Syntax highlighting code blocks

Getting started
15

Hugo is like Jekyll and it’s what’s powering Micro.blog.

I am not sure what the stock themes are doing when it comes to syntax highlighting, but for my custom theme, I add the following to my config.json to get my highlight settings setup right with the theme I want to use (Dracula). This may be specific for choosing Hugo 0.91 for your blog-- I’m just not sure.

{
 "markup": {
      "highlight": {
         "anchorLineNos": false,
         "codeFences": true,
         "guessSyntax": true,
         "hl_Lines": "",
         "lineAnchors": "",
         "lineNoStart": 1,
         "lineNos": true,
         "lineNumbersInTable": true,
         "noClasses": true,
         "style": "dracula",
         "tabWidth": 4
      }
   }
}

I don’t know that I would call syntax highlighting an edge case, but language definitions coming for the ride is relatively new for Hugo and Micro.blog is still just upgrading from an old version to one that includes it natively without having to install plug ins or javascript.

1 Like