如何重新初始化highlight.js？

Question

我的网站会动态生成一些内容，因此在加载插件后，我必须以某种方式再次启动 highlight.js 插件。

以下代码用于启动语法高亮：

hljs.initHighlightingOnLoad();

我尝试像这样做：hljs.initHighlighting(); 以再次实现此操作，但它不起作用。

- boreq

---

你在使用Turbolinks吗？因为如果是的话，我很确定那就是分隔符。我无法让两者一起正常工作（可能与hljs的异步有关）。Turbolinks以引起问题和复杂性而臭名昭著。 - JackHasaKeyboard

Answer 1

您必须首先将“called”设置为false：

hljs.initHighlighting.called = false;
hljs.initHighlighting();

- Serhii Polishchuk

---

这不是 initHighlightingOnLoad() 的作用吗？ - JackHasaKeyboard

不错，但这个解决方案有问题，它会将高亮对象光标重置为0,0。 如果你尝试在contenteditable元素上调用它，你会发现自己在倒写。 - TheQult

Answer 2

你可以这样重新初始化所有的代码块。

$(document).ready(function() {
   $('pre code').each(function(i, e) {hljs.highlightBlock(e)});
});

如果你有一个ID为myBlock的div，你可以这样做。

$(document).ready(function() {
   $('#myBlock').each(function(i, e) {hljs.highlightBlock(e)});
});

- planetoftheweb

---

Sergey的答案不适用于所有块吗？ - ahnbizcad

除非我忽略了什么，否则没有理由认为提问者正在使用jQuery？ - Tommy

谢谢你的回答！我在我的React应用程序中使用它来更新组件，当状态改变时。可以在componentDidUpdate()中使用以下代码调用它。var blocks = document.querySelectorAll('pre code:not(.hljs)'); Array.prototype.forEach.call(blocks, hljs.highlightBlock); - luvwinnie

Answer 3

希望这能解决你的问题.. 你需要使用

hljs.highlightAll()

自从10.6版本以后，hljs.initHighlightingOnLoad()已经被弃用。

如果你正在使用React，你可以在componentDidMount中应用它。

  useEffect(() => {
    hljs.highlightAll()
  }, []);

或者，如果使用另一个框架，请在页面加载时调用该函数。 更多信息：https://highlightjs.readthedocs.io/en/latest/api.html

- Handi

Answer 4

如果你正在使用 React Hooks，请按照以下步骤操作：

我通过集成react-highlight来解决了这个问题。

你可以在属性上将innerHtml设置为true。

import Highlight from "react-highlight"
import "highlight.js/styles/gradient-dark.css"; // import style on the root file
import JSONViewer from "./JSONViewer"

<Highlight innerHTML className="w-full">
  <JSONViewer content={yourContentHere} />
</Highlight>

设置`innerHTML=true`以一次性突出显示多个代码片段。如果使用预处理工具（如Markdown）生成包含多个代码片段的HTML，这将非常有用。

警告：如果将innerHTML设置为true，请确保生成的HTML来自可信源。

试图在useEffect中强制执行它？

使用`hljs.registerLanguage("json", json);`或`hljs.initHighlightingOnLoad();`会在重新渲染React时出现问题。使用依赖项时不会重新调用，但是像这样没有依赖项的`useEffect`可以正常工作。

useEffect(() => {
  hljs.initHighlightingOnLoad(); // it works, but bad for performance because will call every single time re-rendering.
})

useEffect(() => {
  hljs.initHighlightingOnLoad(); // it doesn't works
}, [])

- Fuadit Muhammad