score:3

Step 1: Install react-syntax-highlighter

npm install react-syntax-highlighter

Step 2: Import react-syntax-highlighter

import SyntaxHighlighter from "react-syntax-highlighter";

Step 3: Import a style

import { aStyle } from "react-syntax-highlighter/styles/hljs-or-prism";

Step 4: Display your code

<SyntaxHighlighter language="yourLanguage" style={aStyle}>
     {yourCode}
</SyntaxHighlighter>

Example

import React from "react";
import ReactDOM from "react-dom";

import SyntaxHighlighter from "react-syntax-highlighter";
import { docco } from "react-syntax-highlighter/styles/hljs";

function App() {
    return (
        <div className="App">
            <SyntaxHighlighter language="javascript" style={docco}>
                {console.log('Hello world!...');}
            </SyntaxHighlighter>
        </div>
    );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Live running example

Full documentation


Related Query

More Query from same tag