[BUG] Code Block Font-Size not Matching

[qtc-de]

Hi there 👋

Describe the bug:

There seems to be an issue with line numbers in code blocks and mobile devices. When using line numbers with table format (lineNos: true within the config file and a bare code block like ´´´java), the font size of code blocks viewed from my iOS devices is not correct. Unfortunately, the issue seems to be non deterministic and does not occur for all code blocks.

• Device/Os: iPhone iOS 15.2
• Type: Mobile
• Browser and version: Firefox Klar (40.0), DuckDuckGo 7.65.2.0
• Hugo Version: 0.89.4-1
• Theme Version: master

Steps to reproduce the behavior:

1. Goto https://blog.tneitzel.eu/posts/01-attacking-java-rmi-via-ssrf/ (from iOS device)
2. Scroll down to the first codeblock (e.g. search for import java.rmi.registry.LocateRegistry)
3. Compare the font-size of the line numbers to the font-size of the actual code
4. Scroll down to the next code block (e.g. search for public boolean isReusable)
5. The font-size is correct on this one.

Expected behavior:
The font-size of the line numbers and the actual code should be consistent.

Screenshots

Additional context

I'm not sure whether this is a problem with the theme. I tried to debug it manually but from my point of view everything seems to be correct. From my desktop devices I cannot reproduce the issue and everything is displayed correctly.

[qtc-de]

Just found another blog that uses the PaperMod theme and that is affected:

So it seems to be a general issue and not only caused by my configuration.

Furthermore, I tested some more devices:

iPod Touch (Safari) -> Same Bug
iPhone X (Safari, DuckDuckGo) -> Same Bug
iPad (Safari, DuckDuckGo) -> Not affected

Moreover, while I was playing with #697 , I tried different highlighter configurations (chroma, highlight js, ...). None of them solved the issue.

[adityatelange]

@qtc-de

• [BUG] On iOS mobile phone, the code block font size is not the same #828
  Was closed recently please check if the fix works for this issue as well.

[qtc-de]

I will check it soon and close the issue if it works. Thanks for notifying 🙂

[QuarticCat]

Any progress? I also tried different highlighter configurations including the link that @adityatelange quoted. And also, none of them solved the issue.

[adityatelange]

Hello @qtc-de @QuarticCat Can you try putting thefollowing in config.yml

# baseURL: "https://adityatelange.github.io/"
# theme: PaperMod
pygmentsUseClasses: true

or markup.highlight.noClasses=false

Originally posted by @adityatelange in #923 (comment)

[QuarticCat]

@adityatelange When I set pygmentsUseClasses: true or markup.highlight.noClasses=false, the highlight just dissapeared. Here's the website https://github.com/QuarticCat/QuarticCat.github.io

[adityatelange]

@adityatelange When I set pygmentsUseClasses: true or markup.highlight.noClasses=false, the highlight just dissapeared. Here's the website https://github.com/QuarticCat/QuarticCat.github.io

True that will happen you will have to use https://gohugo.io/content-management/syntax-highlighting/#generate-syntax-highlighter-css and generate a style-sheet for highlighting code or use highlight.js
Can do

hugo gen chromastyles --style dracula > assets/css/extended/dracula.css

[QuarticCat]

@adityatelange The font size issue still exists. Try this page on iPhone safari https://blog.quarticcat.com/posts/how-do-i-make-my-zsh-smooth-as-fuck/

[cha2hyun]

I tired

1. add pygmentsUseClasses: true in config.yml
2. changed diffrent code highlight stlye

Same issue on ios device

Solved (#828 (comment))

1. assets > css > extended > custom.css

/* 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%;
}