Martin Frost

While converting this site to Zola the other day, I noticed that some of the code looked odd. Basically, the styling of the syntax highlighting was off, with the background of the actual code being in one color, but the background-color of the surrounding block was in a different color.

This obviously cannot stand, so I had to fix it.

In the Zola docs on syntax highlighting, I saw that I could specify the highlight_theme = "css", and then have the SSG itself output CSS files to use for the highlighting, like so:

highlight_code = true
highlight_theme = "css"

highlight_themes_css = [
  { theme = "ayu-dark", filename = "css/syntax-theme-dark.css" },
  { theme = "ayu-light", filename = "css/syntax-theme-light.css" },
]

Those CSS files end up in my static folder by default, so I can just pull them in from a template:

<head>
  <link rel="stylesheet" type="text/css" href="/css/syntax-theme-dark.css" media="(prefers-color-scheme: dark)" />
  <link rel="stylesheet" type="text/css" href="/css/syntax-theme-light.css" media="(prefers-color-scheme: light)" />
</head>

Now, the code blocks look better in both light and dark mode.

Syntax highlight in light/dark mode