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

wermos 0
Viewed 19

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.

highlightjs highlight.js jekyll
1 Answers

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

Kin0
Related