I have a Jekyll blog, where I changed the code highlighter from Rouge (the default) to highlight.js, and it works perfectly.
However, I also want line numbers on my code snippets. Since highlight.js does not provide line numbers by default, I turned to the highlightjs-line-numbers plugin.
I followed the instructions given in the highlightjs-line-numbers usage instructions, and added the relevant lines to my _includes/script.html.
However, for some reason, adding this plugin mysteriously changes the code font to Arial. Here is a link to a blog post which demonstrates this odd side effect.
I have tried to figure this issue out for hours, to no avail. Does anyone know what I am doing wrong, and why this code font change is occurring?
Edit: The current GH Pages is being built from the custom-liquid-tag branch of my repository, and not main.
As a sort of last-ditch effort, I opened an issue on the highlightjs-line-numbers repo to get some feedback from the author of the library himself.
Luckily for me, he responded, and the solution he proposed was indeed correct:
In my repository, the theme I am using, minimal-mistakes, was overriding the table CSS style and breaking the font. Since the line numbers plugin uses the table CSS style, the end result was a messed up font.
The error went away after I manually added
table {
font-family: $monospace;
}
to my main.scss.
For the sake of completeness, here is a link to how minimal-mistakes defines $monospace.