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.

Hi welcome to stackoverflow "javascrpit library code snippet" in google will help you. Or maybe you wanna do it all about yourself ? — Maxime Girou, Sep 24 '20 at 18:19
Does this answer your question? [Display javascript as code snippet](https://stackoverflow.com/questions/17753241/display-javascript-as-code-snippet) — Maxime Girou, Sep 24 '20 at 19:25

score 3 · Accepted Answer · answered Sep 24 '20 at 19:47

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>
  );
};

Displaying a block of code in react project

1 Answers1