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

Question

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.

Answer 1

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.

Answer 2

Updated Answer

This answer was not able to help OP with the problem. Keeping this answer here so the comments remain intaked.

Original Answer

I think you are missing the import of the highlightjs stylesheet that goes with the highlight JavaScript in your file scripts.html [1]

https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/styles/default.min.css

[1] https://github.com/wermos/blog/blob/main/_includes/scripts.html