jekyllhighlight.jshighlightjs

highlight.js with highlightjs-line-numbers changes code font


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.


Solution

  • 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.