[Bug]: From hightlight.js to Chroma, the font size rendering style is incorrect in the browser.

[DejavuMoe]

What happened?

The syntax highlighting style in the code block is incorrect with Hugo ChromaThis issue occurs on Google Chrome and Safari browsers on Android, macOS, and Windows 11.

可以复现的网页：

• https://blog.dejavu.moe/posts/generate-har-in-browser-to-batch-download/
• https://blog.dejavu.moe/posts/show-live-photos-in-hugo/

Steps to reproduce

What have I done?

I have read:

• Using Hugo’s Syntax highlighter “chroma”
• [BUG] Code Block Font-Size not Matching · Issue #695 · adityatelange/hugo-PaperMod
• fix: Font size in the code block may be larger on iOS Safari by shimoju · Pull Request #1285 · adityatelange/hugo-PaperMod
• [BUG] On iOS mobile phone, the code block font size is not the same · Issue #828 · adityatelange/hugo-PaperMod
• [BUG] Chroma not rendering · Issue #1241 · adityatelange/hugo-PaperMod

I made the following changes to the Hugo configuration:

• Disable Highlight.js in hugo.yaml

params:
 assets:
 disableHLJS: true

pygmentsUseClasses: true
...
markup:
 ...
 highlight:
 noClasses: false
 anchorLineNos: true
 codeFences: true
 guessSyntax: true
 lineNos: true
 style: dracula

• Gen a Chroma CSS style

hugo gen chromastyles --style dracula --highlightStyle 'bg:#1c1d21' > assets/css/extended/dracula.css

• Add custom css style (assets/css/extended/custom.css)

.chroma{
 background-color: unset;
}

/* Fixes iOS font sizing anomaly */
code{
 text-size-adjust: 100%;
 -ms-text-size-adjust: 100%;
 -moz-text-size-adjust: 100%;
 -webkit-text-size-adjust: 100%;
}

Hugo Version

Hugo >= 0.146.0 (Recommended - Minimum version required for PaperMod)

PaperMod Version

c98a924

What kind of devices are you seeing the problem on?

Desktop

What browsers are you seeing the problem on?

Chrome

Browser Version

Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/141.0.0.0 Mobile Safari/537.36

Relevant log output

There were no log errors or console reports when building the Hugo website.

Repository/Source Code link where this issue can be reproduced

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[adityatelange]

Hi @DejavuMoe, disabled js. You'll see that font is fine. something's wrong with any kind of js file you're loading, coz the font change happens after a split second.

[DejavuMoe]

Hi @DejavuMoe, disabled js. You'll see that font is fine. something's wrong with any kind of js file you're loading, coz the font change happens after a split second.

You pointed out the direction for troubleshooting. After investigation, I found that it was the comment system I was using, Twikoo, which supports Markdown. It has a built-in code highlighting feature, which conflicted with the JS and theme styles. However, Twikoo has an optional configuration to disable the code highlighting of the comment system, which completely resolved the issue.

A few years later, I restarted using the powerful papermod, thank you and other contributors for your continuous maintenance!❤️