Highlight.js: Can't get the styling added to my webpage

Question

I'm trying to get a styled block of code on my website. Highlight.js seems to be what I'm looking for. However when I run my website it doesn't show the layout.

What I've done so far:

1 install it by running "npm install highlight.js"

2 Add it to document app.js:

import hljs from 'highlight.js';

document.querySelectorAll('div.code pre code').forEach((block) => {
    hljs.highlightBlock(block);
});

3 Add it to the document "layout.scss":

@import 'highlight.js/styles/base16-atlas.css';

4 try to run it in my html document:

<div class="code">
  <pre><code class="language-php">
echo "Hoeveel stapels wil je hebben? " . PHP_EOL;
$k = readline("");

for ($i = 0; $i < $k; $i++) {
  for ($j = 0; $j <= $i; $j++) {
      echo "*";
  }
  echo PHP_EOL;
}
  </code></pre>
</div>

5 Outcome is like this:

outcome

I've tried to fix it by changing the html like this:

//imagine the code here this resulted in: "Syntax error, unexpected token "<", expecting end of file". I've then removed <?php but that resulted in only one line with "hoeveel stapels wil je hebben?"

Answer 1

Looks like you need to just include the highlight js CDN links in your html and you should be good.

From their website:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>


<script>hljs.highlightAll();</script>