Question

我想展示和强调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;

Answer 1

我通过整合react-highlight 找到解决办法。

您可使用innerHtml,以证明财产的真实情况。

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>

Set inner/60/8=true,以突出多种代码在某一时间的位置。如果采用多种编码信标的html产生于诸如标识之类的预处理器工具,则这尤其有用。

Warning: If innerHTML is set to true, make sure the html generated with code snippets is from trusted source.

利用hljs.registerLanguage(“json”), json;或hljs.initHighlighting On Load(); 将通过重新定位反应产生问题。在无依无依无依无依地使用受抚养人,但<代码>不适用。

useEffect(() => {
  hljs.initHighlightingOnLoad(); // it works, but bad for performance because will call every single time re-rendering.
})

useEffect(() => {
  hljs.initHighlightingOnLoad(); // it doesn t works
}, [])

Answer 2

From what I see the function call hljs.initHighlightingOnLoad(); is the one activating the highlighting. If you are using hooks call that function in useEffect or if you are using classes call it in componentDidMount and componentDidUpdate.

友情链接