6 Syntax Highlight - loyistro/gofun GitHub Wiki

Syntax Highlight

The syntax highlight is using chroma:

# hugo.yaml
markup:
  highlight:
    anchorLineNos: false
    codeFences: true
    guessSyntax: true
    hl_Lines: ""
    hl_inline: false
    lineAnchors: ""
    lineNoStart: 1
    lineNos: false
    lineNumbersInTable: true
    noClasses: false
    tabWidth: 4
    style: "base16-snazzy"

I set the default noClasses to false because the built-in CSS effects in Hugo look terrible. So, I chose to generate my own syntax highlighter CSS, which I suggest you do as well.

How to generate syntax highlighter CSS

  1. Check out the Chroma Style Gallery and pick a style (name) you like.
  2. Generate with Hugo:
cd <demo-site-name>
hugo gen chromastyles --style=<style-name> > <custom-style-name>.css

The CSS file should be generate on your <demo-site-name> directory.

  1. Move the file to /static/chroma folder.
  2. Change style to <custom-style-name> and done.
⚠️ **GitHub.com Fallback** ⚠️