javascript - 使用 hljs 库在 React 中动态突出显示代码

Question

我从服务器获取代码片段以进行显示。

如果我想显示代码，我将节点附加到 DOM。如果没有可显示的代码，我会从 DOM 中删除该节点。

我正在使用highlight.js突出显示代码。

突出显示:

<script>hljs.initHighlightingOnLoad();</script>

但问题是，它只突出显示加载时的代码，如方法名称所示。

所以，我需要检查并突出显示代码。

我想在每次请求后刷新页面并不是一个解决方案。

我已经尝试过this所以答案:

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

但我没有看到任何突出显示。

如何在 ReactJS 中随时动态突出显示代码？

Answer 1

要动态突出显示 DOM 中的某些节点(您的代码必须位于 <code><pre></pre></code> 之间):

hljs.highlightBlock(document.getElementById("codeblock"));

哪里，codeblock是你的节点的id。例如，<code id=""codeblock><pre></pre></code> .

我们在这里所做的是，我们使用 hljs方法仅突出显示 DOM 中的特定元素/节点。

您正在向 DOM 添加和删除元素。因此，您需要检查是否添加了要突出显示的任何新元素。并调用上面的函数来高亮代码。

要检查 DOM 中的突变，您可以使用 MutationObserver监听更改并调用上面的函数来突出显示代码。

注意:不要使用setTimeout()轮询更改!它会影响网站的性能。

如果你找到MutationObserver很难实现，你可以使用这个很棒的库 arrive .

下载.min.js并将其包含在浏览器中或安装arrive的npm包:

$ npm install -S arrive

如果您通过 npm 使用，请将其导入您的代码中，例如 require("arrive");

为 arrive 编写回调函数:

highlight(){
        if(document.getElementById("codeblock") != null){
            hljs.highlightBlock(document.getElementById("codeblock"));
        }

}

注册arrive :在您的constructor()中调用此

document.arrive("#codeblock", () => this.highlight());

它应该可以完成工作。