0
114
ViewsWierd font change when adding highlightjs to Hugo website using blowdown and Anatole theme
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?
1 answers
Answer question0
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:
pre code.hljs,
code.hljs,
.hljs,
.hljs-comment,
.hljs-tag,
.hljs-punctuation,
.hljs-tag .hljs-name,
.hljs-tag .hljs-attr,
.hljs-keyword,
.hljs-attribute,
.hljs-selector-tag,
.hljs-meta .hljs-keyword,
.hljs-doctag,
.hljs-name,
.hljs-type,
.hljs-string,
.hljs-number,
.hljs-selector-id,
.hljs-selector-class,
.hljs-quote,
.hljs-template-tag,
.hljs-deletion,
.hljs-title,
.hljs-section,
.hljs-regexp,
.hljs-symbol,
.hljs-variable,
.hljs-template-variable,
.hljs-link,
.hljs-selector-attr,
.hljs-operator,
.hljs-selector-pseudo,
.hljs-literal,
.hljs-built_in,
.hljs-bullet,
.hljs-code,
.hljs-addition,
.hljs-meta,
.hljs-meta .hljs-string,
.hljs-emphasis,
.hljs-strong {
font-family: monospace, monospace;
}
And then adding the following line at the end of assets/scss/main.scss:
@import './partials/components/code';
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.