The allure of nice syntax highlighting without leaving Markdown was one of the things that drew me to Hugo. In practice, I have found there are a number of challenges in implementation to get it to work as I expect. I was also reminded why I prefer not to spend my time fighting with CSS. ;)
A Helping Hand
As it is, I probably should have given up and spent the time elsewhere, but at least I was able to turn it into a post. ;)
In my first post I covered installing
Hugo with Pygments. In a
later post, I talked about the
migration from Pygments to Chroma
and I referenced what appeared to be a
styling bug in Chroma
Shortcodes vs Code Fences
Now I seem to have found another issue - a bit of extra padding that
crept in during one of my upgrades of Hugo or my theme
Beautiful Hugo. The
following CSS seems to be causing the problem. The first is displayed
Compared to code fences:
And that code seems to come from an auto-generated
file with the following contents:
Based on the help from @the_mckern,
I decided to convert back to using Pygments instead of Chroma since I
could get the code blocks looking more or less like I wanted. I’m sure
I will come back to Chroma at some point but not until I’m willing to
do the work of converting the
table.highlighttable styling over to
match what Chroma outputs.
I’m also seeing some scrolling issues.
Instead of scrolling horizontally, I was seeing longer lines lead to
cutting off some of the spacing on the left-hand side of the line
numbers (pulled from a
previous post of mine). I resolved this by
min-width: 2.5em; to the styling for
Also the following two code blocks should be the same width as the ones above but aren’t (assuming I haven’t corrected the CSS by the time you read this). The first one should be ~10 characters longer than those above.
If I make that line even longer it eventually wraps leading to the line numbering to be off.
In both cases, I would have preferred the text to force a horizontal
scrollbar but otherwise stay within the horizontal spacing of the rest
of the post.instead of scrolling as I would have preferred. This is the
behavior I had seen in some original posts that made me think it would
work well for posts that rely on being able to display especially wide
content without wrapping - like my
first Kubernetes post when
displaying the result of
sudo docker ps.
So far I don’t have a solution for this. For an example of what I was
hoping for, take a look at the code block after “Example
on the Hugo shortcodes page.
you should see a horizontal scrollbar indicating there is more text to
see and when you hover the mouse over it the code block extends to the
edge of the window.
Moving On For Now
I’m (hopefully) leaving this alone for now after I spin through and convert my previous posts to use code fences instead of shortcodes. I have other posts to write that I’m more excited about than this frustrating reminder that CSS and browser compatibility is hard and better left to experts (i.e. not me).