Themes

Wat highlights the code snippets it displays based on themes. This highlighting is based on highlight.js, a powerful syntax highlighter; and Chalk, the most popular ANSI coloring library.

When code is run through highlight.js, words are assigned various "classes". All assignable classes are listed here.

To add a theme, you'll be creating a {theme-name}.json file in ./config/themes/, which assigns Chalk ANSI styles to each class, by language. For example, to make a theme where all comments are bold green and no other syntax highlighting is applied, you would make the following:

{
  "default": {
    "comment": ["green", "bold"]
  }
}

The default key applies those styles to code blocks of every language unless specified.

If you wanted all Javascript code blocks to be peculiar in having magenta comments, you would add this on:

{
  "default": {
    "comment": ["green", "bold"]
  },
  "js": {
    "comment": "magenta"
  }
}

List of supported languages.

OKay, so where do I get started?

The best way to make a theme is to copy an existing theme, and edit it to your liking.

You can also shamelessly rip off existing styles from highlight.js, and convert the style's CSS to the closest ANSI color matches.

I'm done! This is the best style ever!

Great! Submit a Pull Request!