Uses Chroma

( Hugo’s default code highlighter )

1. Config highlight

• https://gohugo.io/getting-started/configuration-markup#highlight

default config (some of these settings can be set per code block)

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

2. Generate Syntax Highlighter CSS

If you prefer another theme (like dracula) instead of default monokai, below command will help.

You may change dracula to any theme name you like, check all themes.

hugo gen chromastyles --style=dracula > <HUGO_ROOT>/static/css/syntax.css

Don’t forget to set pygmentsUseClasses=true in your config.toml file !!!

3. Include syntax.css in your head.html

copy head.html from theme/<YOUR_THEME_PATH>/layouts/partials/head.html to <HUGO_ROOT>/layouts/partials/head.html

add

<link type="text/css" rel="stylesheet" href="{{ "/" | relURL }}css/syntax.css">

below the last <link> tag

References:

• https://gohugo.io/getting-started/configuration-markup#highlight
• https://gohugo.io/content-management/syntax-highlighting/
• https://xyproto.github.io/splash/docs/all.html