Chroma Syntax Highlighter and tabWidth


First of all, a thank you to @bep and all the other Hugo employees for a great system.

The syntax highlighter integrated in Hugo is very good, the only thing that bothers me is the automatic tabWidth = 8. I want to have a tabWidth = 2. With the following config.toml (excerpt) it works with a tabWidth = 2.

DefaultContentLanguage = "de"
#pygmentsUseClasses = true
#pygmentsCodeFences = true

# The below is pygmentsOptions
#  codeFences = true
#  guessSyntax = true
#  hl_Lines = ""
#  lineNoStart = 1
#  lineNos = true
lineNumbersInTable = true
tabWidth = 2
#  noClasses = false


The result looks like this in Safari:

When pygmentsUseClasses and pygmentsCodeFences are activated again, the tabWidth is 8. With <hugo gen chromastyles …> I created Monokai and Monokailight syntax.css files and integrated the content into my SCSS structure.

.monokai {
  .highlight {
	/* Background */
	color: #f8f8f2; 
	background-color: #272822;
	/* Other */ 

.monokailight {
  .chroma {
	color: #272822;
	background-color: #fafafa;

This allows me to switch to the appropriate theme in md-file or in dark mode. The code in the md-file looks like this:

<div class="monokailight">
  {{< highlight html "linenos=table, lineanchors=prefix" >}}
  <!doctype html>
  <html lang="en">
	  <meta charset="utf-8">
	  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	  <title>Hello, world!</title>
	  <h1>Hello, world!</h1>
  {{< / highlight >}}

The display is fixed to monokai for commented out pygment … instructions, although I changed the class name to monokailight. I do not know why. This means that it is not possible to switch the theme using JavaScript in dark mode.

Google Chrome and Microsoft Edge have difficulties with the display from the 2nd line of code under macOS. Safari and Firefox represent this clearly. It looks like this in Google Chrome:

If there is no solution for the tabWidth, I can also live with the one theme variant in dark mode. Maybe you can help me.


I suspect there is a fault in the logic supporting the “old way to configure this”.

It’s not likely that that gets fixed so I suggest you pick one of the ways, in your case drop the pygmentsUseClasses etc. nand configure all via the markup struct.

Thank you for your quick response. But why can’t I change the theme then? The CSS class is set to monokailight and the system outputs monokai - the dark version.

I assume you have some conflicting config options, which is har for me to guess without seeing the project.


1 Like