使用 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.

中仅突出显示特定的 element/node

并且您正在向 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 中动态突出显示代码

Highlight code dynamically in React using hljs library

javascript

syntax-highlighting

reactjs