使用highlight.js时如何指定语言？

Question

我使用highlight.js 来突出显示HTML 中的代码块。 highlight.js 可以找到所有代码块并自动确定语言，但我想手动指定元素和语言。通过指定语言，我想避免确定它是哪种语言的开销（虽然highlight.js很快，但我猜如果它跳过语言检测，它可能会更快）。

在 HTML 中，我将语言指定为一个类（我需要它来设置代码块的某些样式）。

<pre>
<code class="python">
print "Hello"
</code>
</pre>

在 JavaScript 中，我迭代代码元素（由于某些其他原因，我需要获取这些元素的列表）。当我迭代代码元素时，我调用

hljs.highlightBlock

函数。因为我知道该语言（存储为类），所以我认为实际告诉highlight.js 它应该突出显示的语言是有利的。

从highlight.js网站上的使用示例中，我猜想我可以调用

hljs.configure

函数并指定要尝试的语言列表：

// ...
if (codeElement.hasClass('python'))
    language = 'python';
else if (codeElement.hasClass('bash'))
    language = 'bash';

hljs.configure({languages: [language]});
hljs.highlightBlock(codeElement[0]);

但是，我不确定这是否是正确的方法。首先，我不清楚这是否是我可以依赖的官方 API。其次，我认为highlight.js仍在尝试确定代码块是否采用给定的语言（这是我首先想要避免的）。

Answer 1

您正在迭代“预代码”元素，对吗？但是您在“code”标签而不是“pre”标签中指定了语言。 我遇到了同样的问题，并在最上面的元素上指定语言解决了这个问题。你的 html 代码应该如下所示：

<pre class="python">
<code>
print "Hello"
</code>
</pre>

还要确保“python”包含在您使用的highlight.js包中:)

Answer 2

截至 2023 年：

const highlightedCode = hljs.highlight('print "hello"', { language: 'python' }).value

document.getElementById('code').innerHTML = `<code>${highlightedCode}</code>`

pre {
  font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas,
    Liberation Mono, monospace;
  background-color: #f6f8fa;
  padding: 1rem;
}

code {
  white-space: break-spaces;
  border-radius: 6px;
  word-break: normal;
  white-space: pre;
  border: 0;
}

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