如何在react组件上导入Highlight.js？

Question

I would like to display and highlight some "JSON" data in a React.js component.

It works, but the problem is when the component refresh, the highlighted code disappear.

I want to clarify that I'm a newbie here.

Thank you for your support.

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

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 .