Hugo Netlify - No Code Syntax Highlighting

March 03, 2020 0 Comments by

This tripped me up for an unusually long period of time. I'm documenting this here for anybody else who faces the same problem. I wasn't getting code syntax highlighting when deploying to Netlify.


update version of Hugo on Netlify by adding a netlify.toml file

I searched for:

hugo serve highlights code syntax

I wanted to see if somebody else had this same issue. When running hugo serve then the code syntax was showing up. Came across a bunch of posts and none of these pointed me to the write direction. Looking at the deploy config in Netlify, it was running Hugo --gc --minify.

So I ran a production build locally, and noticed I wasn't getting colors. Bingo, I had reproduced the issue locally and was getting closer. So I did some more reading and learned about Chroma. Running this command would now show syntax highlighting after running a production build, locally.

$ hugo gen chromastyles --style=monokai > syntax.css

This generated a syntax file in the root, but it still wasn't showing on Netlify.

So it had nothing to do with adding custom css or context.production.environment configuration in config.toml. Didn't add environment variables to change the Hugo version, though that works too.

In the end the problem was solved by adding a netlify.toml file.

publish = "public"  
command = "hugo --gc --minify"

HUGO_VERSION = "0.65.3"  
HUGO_ENV = "production"  

command = "hugo --gc --minify --enableGitInfo"

HUGO_VERSION = "0.65.3"  
HUGO_ENV = "production"

command = "hugo --gc --minify --buildFuture -b $DEPLOY_PRIME_URL"

HUGO_VERSION = "0.65.3"

command = "hugo --gc --minify -b $DEPLOY_PRIME_URL"

HUGO_VERSION = "0.65.3"


This was explained clearly in the Hugo docs but I skimmed past this part because I thought it wasn't relevant.

Checkout the Algorithms and Data Structures site I've created at:

Tag cloud