Displaying a block of code in react project

Question

I would like to display code samples of different languages on a website built using react.

Ideally the code sample maintains its formatting and includes line numbers. Best case scenario would be to include syntax highlighting based on the language.

Any suggestions on how to approach this is appreciated.

Answer 1

You can use react-syntax-highlighter

npm install react-syntax-highlighter --save

import SyntaxHighlighter from 'react-syntax-highlighter';
import { docco } from 'react-syntax-highlighter/dist/esm/styles/hljs';
const Component = () => {
  const codeString = '(num) => num + 1';
  return (
    <SyntaxHighlighter language="javascript" style={docco}>
      {codeString}
    </SyntaxHighlighter>
  );
};