Moved to Vercel and syntax highlighting broke

I moved my site from Netlify to Vercel and syntax highlighting is broken in 2 ways. One, it’s a different theme locally vs production now.


This is local, which I like more.

As a new user I can only add one image here so this is what it looks like on the live site Imgur: The magic of the Internet.

Secondly one random code block is putting it on the production page as raw text, including the code fences.

Locally it looks like this a regular code block but on live site it’s this abomination: Imgur: The magic of the Internet

In the markup file it is the same as other code blocks, so a bit baffling.

My config file:

baseURL: /
disablePathToLower: false
languageCode: en-us
title: My site name
Paginate: 10
pygmentsCodeFences: true
pygmentsUseClasses: false
params:
  description: My site description.
markup:
  highlight:
    anchorLineNos: false
    codeFences: true
    guessSyntax: false
    hl_Lines: ""
    lineAnchors: ""
    lineNoStart: 1
    lineNos: false
    lineNumbersInTable: true
    noClasses: true
    style: dracula
    tabWidth: 2
  goldmark:
    renderer:
      unsafe: true
preserveTaxonomyNames: true

Hugo version locally is hugo v0.84.0.

And on Vercel?

Ah, didn’t know it needed specified there. Thanks, got it fixed.

1 Like