search

wcoder / highlightjs-line-numbers.js

Line numbering plugin for Highlight.js
https://wcoder.github.io/highlightjs-line-numbers.js/
MIT License
541 stars 125 forks source link

highlightjs-line-numbers changes code font #93

Closed wermos closed 1 year ago

wermos commented 1 year ago

Describe the bug The highlightjs-line-numbers plugin changed the code font on my Jekyll blog (repo link) when I added it as a plugin, following the instructions given in the usage portion of the README.

Expected behavior The code font should not change.

Screenshots This is what code snippets currently look like: image

This is what they're supposed to look like, but with line numbers: image

Desktop:

However, I don't think this is a browser-specific issue.

Additional context In the main branch, one can see the code I added to _include/scripts.html to get highlight.js working.

In the custom-liquid-tag branch, the only lines I changed were these, in accordance with the README, but the code font inexplicably changed.

wcoder commented 1 year ago

Thanks for the report!

I investigated the issue. See the result:

Line-number plugin uses table under the hood.

Table styles on your site (main.css) override and break font, try to rework:

Screen Shot 2022-09-16 at 12 37 45 AM
wermos commented 1 year ago

Wow, thank you so much! I had been trying to solve this issue for the past 3 days, and now I finally know what was happening. I'll close this issue, because this is not an actual bug with the plugin.