Syntax Highlighting

Dream Plus implements Hugo's default syntax highlighting method which is way better than client-side highlighting since the highlighting is done during the building process. Certain customizations have been made to the code block styles so that it complies with the overall appearance of the theme.

Usage

To use the syntax highlighting feature of Dream Plus, set pygmentsCodeFences = true in the config.toml file. This enables syntax highlighting for those code blocks which are followed by a language tag in the MarkDown. For example:

```css
html {
   font-size: 16px;
}
```

Had the css tag not been there, Hugo would have skipped the block's highlighting. The syntax highlighting can also be further customized through other variables which have been documented here.

Alternatively, you can also use shortcodes to get the same results. Here is the link to the Hugo documentation for it.

Custom External CSS

You can style the highlighted code blocks through an external CSS as well. To do that, set pygmentsUseClasses = true in the config.toml file and place your CSS in the static/css directory, renamed as highlight.css, of your Hugo website folder.

If you're someone who switches between highlighting styles frequently, then you can simply use the [customCSS](https://github.com/UtkarshVerma/hugo-dream-plus/wiki/External-CSS-and-JS) method of loading CSS and specifying the name of the style you want to load in the array. If you're loading CSS this way, then you'll have to ensure that no file is stored as higlight.css in static/css/.

[params.features]
    #Use style1 for syntax highlighting
    customCSS = ["/path/to/style1.css"]

There's a plethora of CSS available for Pygments, here are some of them to get you started:

• https://github.com/richleland/pygments-css
• https://github.com/jwarby/jekyll-pygments-themes
• https://github.com/dracula/pygments