Wowchemy-hugo-modules: Add support for Chroma code highlighting

[seisman]

From Hugo 0.28, the default syntax hightlighter in Hugo is Chroma; it is built in Go and is really, really fast – and for the most important parts compatible with Pygments.

https://gohugo.io/content-management/syntax-highlighting/

[gcushen]

Highlight.js is more stable (it's a very well established project) and supports syntax highlighting of far more languages. Also, it can integrate more conveniently with our theme system. Therefore, I won't be replacing Highlight.js with Chroma anytime soon. However, if someone contributes a PR for adding Chroma support, I'll be happy to review it and consider merging it in.

[prateekkumarweb]

To use the Academic theme with chroma syntax highlighting, follow below steps:

1. Disable highlight.js by setting params.highlight to false in config.toml. (Do not set to true in the markdown file either).
2. Enable chroma for code enclosed in ``` and ``` by setting pygmentsCodeFences = true in config.toml.
3. Set the color theme for chroma by setting pygmentsStyle config option in config.toml. By default, it is monokai.

Now the code in posts and other pages will be highlighted using chroma.
For more config options, refer here.

[prateekkumarweb]

@gcushen Since hugo has inbuilt chroma syntax highlighter, disabling highlight.js and enabling chroma works. So If you could mention this in the Academic docs, it would be great.

[anayrat]

Hello @gcushen ,

I used to use chroma for highlighting, by disabling highlight and enable chroma with theses lines :

pygmentsCodefences = true
pygmentsStyle = "monokai"
pygmentsCodefencesGuessSyntax = true

I seems it do not longer works after recent update of Academic Theme?

[davxiao]

Tested on hugo v0.72.0, academic v4.8.0-28-gfc94d95 (git describe --tags)
jsx code blocks are not getting syntax highlighting properly.

I've managed to enable chroma for highlighting by the following:

• Under config.toml, change to:
  [markup.highlight]
  codeFences = true

• Under params.toml, change to:
  highlight = false

THAT'S IT.

If you need to adjust look and feel of code blocks, use custom.scss, here's what I have for my site:

div.highlight pre {
  background: #44475a !important;
  padding: 0.5rem;
  font-size: 0.85rem;
}

div.highlight code {
  background: #44475a !important;
}

Hope it's helpful!