I am trying to add highlight.js to my Hugo website with Anatole theme.
This is how a code chunk looks like before adding highlightjs:
And this is how it looks like after adding highlight.js:
This is of course not the way it should look.
To add highlight.js I added the following code to layouts/partials/head.html
:
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/styles/default.min.css"
/>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js">
</script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/languages/r.min.js">
</script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/languages/python.min.js">
</script>
And I added the following code to layouts/partials/article_footer_js.html
:
<script>hljs.initHighlightingOnLoad();</script>
What am I doing wrong?
So, I'm not very good at css but I found a solution. My solution was to add a file
assets/scss/partials/components/_code.scss
with the following content:And then adding the following line at the end of
assets/scss/main.scss
:With these changes the font family of the highlighted code went back to monospace and the font size is the same for all the code.