How to Add Syntax Highlighting to a Code Block in React

One of the important thing options of a programming weblog is code blocks. You don’t have to format them utilizing a syntax highlighter, nevertheless it makes your blogs look a lot nicer when you do. It also can enhance your code’s readability.

This article will present you the way to use react-syntax-highlighter to spotlight code blocks in React. You will create a code block part able to highlighting code handed to it utilizing the syntax of the supplied language.

Syntax Highlighting With react-syntax-highlighter

The react syntax highlighter permits you to spotlight code utilizing React. Unlike different syntax highlighters, react-syntax-highlighter doesn’t depend on ComponentDidUpdate or ComponentDidMount to insert the highlighted code in the DOM utilizing dangerouslySetInnerHTML.

That method is harmful as a result of it exposes an utility to cross-site scripting assaults.

Instead, it makes use of a syntax tree to construct the digital DOM and updates it solely with modifications.

The part makes use of PrismJS and Highlight.js in the background. You can select to use both to spotlight your code. It could be very simple to use because it offers out-of-the-box styling.

The react-syntax-highlighter part accepts the code, language, and magnificence as props. The part accepts different customizing choices as nicely. You can discover them in the react syntax highlighter documentation.

Using the react-syntax-highlighter Component

To begin utilizing react syntax highlighter in React, set up it through npm.

npm set up react-syntax-highlighter 

Create a new part known as CodeBlock.js in your React Application and import react-syntax-highlighter:

import SyntaxHighlighter from 'react-syntax-highlighter';
import { docco } from 'react-syntax-highlighter/dist/esm/types/hljs';
const CodeBlock = ({codestring}) => {
return (
<SyntaxHighlighter language="javascript" type={docco}>
{codeString}
</SyntaxHighlighter>
);
};

The SyntaxHighlighter part accepts the language and the type to use. It additionally takes the code string as its contents.

You can render the above part as follows:

const App = () => {
const codeString = `
const Square = (n) => return n * n
`
return(
<CodeBlock codestring={codeString}/>
)
}

It is essential to be aware that utilizing react-syntax-highlighter can enhance your construct dimension, so when you want to, you may import the sunshine construct. The gentle construct, nonetheless, doesn’t have default types.

You will even want to import and register the languages you need utilizing the registerLanguage operate exported from the sunshine construct.

import { Light as SyntaxHighlighter } from 'react-syntax-highlighter';
import js from 'react-syntax-highlighter/dist/esm/languages/hljs/javascript';
SyntaxHighlighter.registerLanguage('javascript', js);

This part makes use of Highlight.js to spotlight the code.

To use PrismJS as an alternative, import it from the react-syntax-highlighter bundle like this:

import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
import { vscDarkPlus } from "react-syntax-highlighter/dist/esm/styles/prism";

For the prism gentle construct, import PrismLight and register the language you might be utilizing.

import { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter';
import jsx from 'react-syntax-highlighter/dist/esm/languages/prism/jsx';
import prism from 'react-syntax-highlighter/dist/esm/types/prism/prism';
SyntaxHighlighter.registerLanguage('jsx', jsx);

Using prism is helpful, particularly when highlighting jsx as a result of react-syntax-highlighter doesn’t absolutely assist it.

Adding Line Numbers to the Code Block

Now that you understand how to spotlight a code block, you can begin including additional options like line numbers.

With react-syntax-highlighter, you solely want to move presentLineNumbers to the SyntaxHighlighter part and set it to true.

<SyntaxHighlighter language="javascript" type={docco} presentLineNumbers="true">
{codeString}
</SyntaxHighlighter>

The part will now present line numbers subsequent to your code.

Using Custom Styles in Your Component

Even although react-syntax-highlighter offers styling, it’s possible you’ll want to customise your code blocks typically.

For this, the bundle permits you to move inline CSS types to the customStyle prop as proven beneath:

<SyntaxHighlighter language="javascript" type={vscDarkPlus} customStyle={{borderRadius: "5px", backgroundColor: "#001E3C"}} >
{codestring}
</SyntaxHighlighter>

The highlighted code block may have a customized border radius and background coloration in this instance.

The Importance of Syntax Highlighting

You can use the react-syntax-highlighter bundle to spotlight code in React. You can use the sunshine model to scale back construct dimension and customise code blocks utilizing your individual types.

Highlighting code snippets makes your code look good, improves its readability, and makes it extra approachable to readers.