javascriptcsshighlight.js

Wierd 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:

enter image description here

And this is how it looks like after adding highlight.js:

enter image description here

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?

Solution

  • 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.