为非预容器配置highlight.js

configuration of highlight.js for non-pre container

本文关键字：配置 highlight js      更新时间：2023-09-26

我想在我的网站上使用highlight.js。但它默认适用于<pre><code></code></pre>块。我喜欢只使用<code></code>(实际上是<div><code>)，并使用官方网站的配置。但这行不通。

配置如下:

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

我现在正在处理这个，不妨把它添加到这里。我的确切问题是突出显示块<pre><code></code></pre>和内联<code></code>，它们非常相似。请注意，我将它用于<code>标记名称，确切的代码如下:

代替:

hljs.initHighlightingOnLoad();

使用(用选择器替换第一行的'code')

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

但是，如果没有<pre></pre>，则需要使用另一个配置选项，例如选择器块前面的useBr: true。当然，你必须使用<br>来表示换行。

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

有一点要注意。如果有人的问题与我的相同(pre和no-pre)，你不需要这个选项，因为内联代码不会包含break, block 1已经在<pre>

参考这个链接，我想这个可以解决问题。

http://highlightjs.readthedocs.io/en/latest/api.html highlightblock-block

highlightBlock(块)

可以使用此函数向包含代码

的DOM节点添加高亮显示。
相关文章：