hugo-PaperMod
hugo-PaperMod copied to clipboard
[BUG] Code Block Font-Size not Matching
Hi there :wave:
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:
- Goto https://blog.tneitzel.eu/posts/01-attacking-java-rmi-via-ssrf/ (from iOS device)
- Scroll down to the first codeblock (e.g. search for
import java.rmi.registry.LocateRegistry
) - Compare the font-size of the line numbers to the font-size of the actual code
- Scroll down to the next code block (e.g. search for
public boolean isReusable
) - 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.
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.
@qtc-de
- #828 Was closed recently please check if the fix works for this issue as well.
I will check it soon and close the issue if it works. Thanks for notifying :slightly_smiling_face:
Any progress? I also tried different highlighter configurations including the link that @adityatelange quoted. And also, none of them solved the issue.
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 https://github.com/adityatelange/hugo-PaperMod/issues/923#issuecomment-1152470738
@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 When I set
pygmentsUseClasses: true
ormarkup.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
@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/
I tired
- add
pygmentsUseClasses: true
in config.yml - changed diffrent code highlight stlye
Same issue on ios device
Solved (https://github.com/adityatelange/hugo-PaperMod/issues/828#issuecomment-1171994855)
- 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%;
}
Hi @qtc-de can you pls help cheking if code from below mentioned comment fixes the issue? I do not own an iOS device.
https://github.com/adityatelange/hugo-PaperMod/issues/828#issuecomment-1171994855
Tested with appetize.io found with default ios brower on iPhone 8 iOS 14.5 (oldest possible config that was available) this issue gets fixed by -webkit-text-size-adjust: 100%;
.
Already fixed by #1285