如何重新初始化highlight.js？

Question

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

此代码用于启动荧光笔：

hljs.initHighlightingOnLoad();

我尝试做类似

hljs.initHighlighting();

的事情再次执行此操作，但它不起作用。

Answer 1

您必须先将 Called 设置为 false：

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

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)});
});

Answer 3

我希望这可以解决您的问题.. 你必须使用

hljs.highlightAll()

自版本 10.6 起，hljs.initHighlightingOnLoad() 已被弃用。

如果你使用react，你可以在componentdidMount处申请..

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

或者，如果是其他框架，请在页面加载时调用该函数。 更多：https://highlightjs.readthedocs.io/en/latest/api.html

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

以一次突出显示多个代码片段。如果具有多个代码片段的 html 是从 markdown 等预处理器工具生成的，这尤其有用。

警告：如果innerHTML设置为true，请确保生成的html 代码片段来自可信来源。

尝试强制使用 useEffect？

使用

hljs.registerLanguage("json", json);

或

hljs.initHighlightingOnLoad();

会因重新渲染反应而出现问题。使用依赖项时不记得了，但

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
}, [])