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

它应该完成工作。

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

1 个答案: