BTS#2: Fix Font Rendering for Hugo's Code Blocks in iOS
#bts #sysops #webdev
For my previous article, I added Syntax highlighting to my Hugo installation.
Reviewing the page on my iPhone, I noticed something weird—the font rendering for the code blocks was entirely off.
Time to fix it!
Hugo’s support for syntax highlighting provides an easy way to make your code snippets more readable. To add them to your page, you add the highlighting shortcode and describe the language in which your code is written.
{{< highlight bash>}}
...
{{< / highlight >}}
Unfortunately, the rendering engine on iOS is not fully compatible with the CSS generated by the syntax highlighting. This leads to broken font sizes, resulting in code that is very hard to read.
Thankfully, there is an easy fix.
Applying the following code snippet to your stylesheet mitigates the broken rendering of the code blocks:
1 /* Fixes iOS font sizing anomaly */
2 code {
3 text-size-adjust: 100%;
4 -ms-text-size-adjust: 100%;
5 -moz-text-size-adjust: 100%;
6 -webkit-text-size-adjust: 100%;
7}
Besides adding the workaround, no additional changes to your Markdown files are required.
Do you have any comments or suggestions regarding this article? Feel free to join the discussion at our fabulous.community!