reactjs 如何在react组件上导入highlight.js?

esbemjvw  于 2023-02-15  发布在  React
关注(0)|答案(1)|浏览(192)

我想在React.js组件中显示并突出显示一些“JSON”数据。
它可以工作,但问题是当组件刷新时,突出显示的代码会消失。
我想澄清一下我是个新手。
谢谢你的支持。

import React from "react";

import hljs from "highlight.js";
import "highlight.js/styles/github.css";
import json from "highlight.js/lib/languages/json";
hljs.registerLanguage("json", json);
hljs.initHighlightingOnLoad();

const JsonViewer = props => {
  return (
    <pre>
      <code className="json">
         {JSON.stringify(props.content, null, 2)}
      </code>
    </pre>
  );
};

export default JsonViewer;
j0pj023g

j0pj023g1#

从我所看到的函数调用hljs.initHighlightingOnLoad();是激活高亮显示的函数,如果你使用钩子调用useEffect中的函数,或者如果你使用类调用componentDidMountcomponentDidUpdate中的函数。

相关问题