Hugo No-JS Syntax Highlight with highlight.js or prism.js

Question

I need syntax highlighting in Hugo. Currently use highlight.js. I like the final look, but not how it works. It uses javascript to run the lexer and apply styles. Instead I'd like do run the lexer during Hugo build phase so that the web site does not use javascript. Effectively I want to shorten page load time, and also eliminate the "blink" effect it takes to run the JS and apply styles. Open to suggestions. Thanks, Ruben

Answer 1

Hugo uses chroma as a compile-time syntax highlighter, so you shouldn't need to use Highlight.js in Hugo.

From the Hugo page on syntax highlighting:

Hugo comes with really fast syntax highlighting from Chroma. Hugo uses Chroma as its code highlighter; it is built in Go and is really, really fast – and for the most important parts compatible with Pygments we used before.

There are many style options (have a look at the chroma library) that you can set for the whole site or per code block.

The default highlight configuration in toml is:

[markup]
  [markup.highlight]
    codeFences = true
    hl_Lines = ""
    lineNoStart = 1
    lineNos = false
    lineNumbersInTable = true
    noClasses = true
    style = "monokai"
    tabWidth = 4