javascript - 非pre容器的highlight.js配置

Question

我想在我的网站中使用 highlight.js。但它默认适用于 <pre><code></code></pre> block 。我喜欢只使用 <code></code> (实际上在 <div><code> 中)并使用 official website 的配置.但它不起作用。

配置如下:

hljs.configure({useBR: true});
$('div.code').each(function(i, e) {hljs.highlightBlock(e)});

Answer 1

我现在正在处理这个，不妨在这里添加它。我的确切问题是突出显示 block <pre><code></code></pre>和内联 <code></code> , 这非常相似。请注意，我将它用于 <code> tag name 具体代码是这个。

代替:

hljs.initHighlightingOnLoad();

使用(用您的选择器替换第一行的“代码”)

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

但是，如果没有 <pre></pre> ，您需要使用另一个配置选项，例如 useBr: true在您的选择器 block 前面。你必须使用 <br>当然，然后发出换行信号。

hljs.configure({useBR: true});

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

有一点需要注意。如果某人的问题与我的相同(pre 和 no-pre)，则不需要此选项，因为内联代码不包含中断，并且第一个 block 已经在 <pre> 中。