How to enable chroma for source code highlighting?


I built a site using the hyde-hyde theme. The theme used highlight.js. I would like to try the build in hugo highlight facilities. Thus I put the following in my config files:

# source code highlihting
pygmentsUseClassic = false
pygmentsCodeFences = true
pygmentsCodeFencesGuessSyntax = true
pygmentsOptions = "linenos=5"
pygmentsStyle = "monokai"
highlightjs = false
# highlightjsstyle = "github"

Then I use markdown file with block such as:

print(f"Numpy: {np.__version__}")
print(f"Scipy: {sp.__version__}")
print(f"Pandas: {pd.__version__}")
print(f"Seaborn: {sns.__version__}")

But at the end the html page is the following without source code highlight:

<pre><code class="language-python">print(f&quot;Numpy: {np.__version__}&quot;)
print(f&quot;Scipy: {sp.__version__}&quot;)
print(f&quot;Pandas: {pd.__version__}&quot;)
print(f&quot;Seaborn: {sns.__version__}&quot;)

I guess I miss something but reading this page of the doc does not help:

EDIT it works if I put this in markdown files:

{{< highlight python >}}
print(f"Numpy: {np.__version__}")
print(f"Scipy: {sp.__version__}")
print(f"Pandas: {pd.__version__}")
print(f"Seaborn: {sns.__version__}")
{{< / highlight >}}

Thank you

To use syntax highlighting with markdown code fences, all you need in your config.toml is:

pygmentsCodefences = true
pygmentsStyle = "pygments"

See the full list of styles here:

Then you can write:

print(f"Numpy: {np.__version__}")

Note: if you want line numbers, you’ll need to use the highlight shortcode, as you’ve already learned.


Thank you. Actually the reason why it did not work was really silly.

In hyde-hyde, highlighting parameters are under the .Site.Params list. The pygments options are built-in hugo parameters thus they have to be put in the main matter of the config file not under a list or section…

1 Like