Code Blocks on Mainroad theme no longer displaying correctly

support
1

Hi there

I am using the Mainroad theme for my blog. I have noticed in the past week, that my code blocks are no longer displaying correctly.

An example, the style is not as I have set in my toml file, and line numbers are messed up:

image
image1015×187 5.97 KB

This is what i have for my markup syntax within my toml file:

[markup]
  [markup.goldmark]
    [markup.goldmark.renderer]
      unsafe = true
  [markup.highlight]
    style = "dracula" # Replace "dracula" with your chosen theme
    lineNos = true # Enable line numbers if desired
    lineNumbersInTable = false # Set to true if you'd like line numbers in a table format

Has anyone else had this issue? I have verified im on the latest version of Hugo.

Thanks

Lee

2

looks like at least some CSS is not loading. maybe the dev console in your browser can give some insights.

Mainroad hasnt been touched for bout a year. so it definitely missed the new layout system introduced with v0.146.0

maybe something with that … you could do a try with 145.

hard to reason without a replayable setup. maybe if you cant share your repo a small reproducable example may help

3

There is a more maintained fork called Roadster that you may want to try out.

@mansoorbarri

1 Like
5

Thanks for the replies both.

After further testing, I discovered the issue wasn’t Hugo or the Mainroad theme at all.

The problem was caused by the 1Password Password Manager extension in Microsoft Edge, which was injecting CSS and interfering with the inline styles Chroma generates for code blocks.
• In Chrome, everything rendered fine.
• In Edge InPrivate (where extensions are disabled), the page also rendered correctly.
• Disabling extensions one by one identified 1Password as the culprit.