javascriptreactjstypescriptsyntax-highlightinghighlight.js

Highlight.js with React.js syntax highlighting not working

I am trying to use highlight.js with react but the syntax highlighting is now working. I am trying to store the highlighted syntax inside a variable but the whole content is displayed without highlighting with highlight.js span tags.

import React from "react";
import hljs from "highlight.js";

const test = `const test = require('test')`;
const tt = hljs.highlightAuto(test).value;


function App() {
  return (
    <>
      <pre>
        <code>{tt}</code>
      </pre>
    </>
  );
}

export default App;
Solution

  • I think react-highlight is built on top of highlight.js