Highlight.js：无法将样式添加到我的网页

Question

我正在尝试在我的网站上获取样式化的代码块。 Highlight.js 似乎就是我正在寻找的。但是，当我运行我的网站时，它不显示布局。

到目前为止我所做的：

1 通过运行“npm installhighlight.js”来安装它

2 将其添加到文档app.js中：

import hljs from 'highlight.js';

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

3 将其添加到文档“layout.scss”中：

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

4尝试在我的html文档中运行它：

<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 结果是这样的：

结果

我尝试通过更改 html 来修复它，如下所示：

//想象一下这里的代码 这导致：“语法错误，意外的标记”<", expecting end of file". I've then removed

看起来你只需要在 html 中包含突出显示的 js CDN 链接就可以了。

来自他们的网站：

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

Answer 1