How to Add Syntax Highlighting to a Code Block in React

September 16, 2022 Abraham Smith

One of the main features of a programming blog is blocks of code. You don’t have to format them with a syntax highlighter, but it makes your blogs look a lot nicer if you do. It can also improve the readability of your code.

This article will show you how to use the React syntax highlighter to highlight blocks of code in React. You create a code block component capable of highlighting code passed to it using the syntax of the provided language.

Syntax highlighting With React syntax highlighter

The React syntax highlighter allows you to highlight code using React. Unlike other syntax highlighters, the React syntax highlighter does not rely on ComponentDidUpdate or ComponentDidMount to insert the highlighted code into the DOM using DangerlySetInnerHTML.

This approach is dangerous because it exposes an application to cross-site scripting attacks.

Instead, it uses a syntax tree to create the virtual DOM and only updates it when it changes.

The component uses PrismJS and Highlight.js in the background. You can use both to make your code stand out. It is very easy to use as it offers out-of-the-box styling.

The react-syntax-highlighter component accepts the code, language, and style as props. The component also accepts other customization options. You can find them in the React syntax highlighter documentation.

Using the React syntax highlighter component

To use React’s syntax highlighter in React, install it via npm.

npm install react-syntax-highlighter

Create a new component called CodeBlock.js in your React application and import it React syntax highlighter:

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

The SyntaxHighlighter component accepts the language and style to use. It also takes the code string as its content.

You can render the above component as follows:

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

It’s important to note that using React syntax highlighter can increase your build size, so you can import the light build if needed. However, the light build has no default styles.

You must also import and register the desired languages registerlanguage Function exported from the light build.

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

This component uses Highlight.js to highlight the code.

To use PrismJS instead, import it from the react-syntax-highlighter package as follows:

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

For the Prism Light build, import PrismLight and register the language you are using.

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/styles/prism/prism';SyntaxHighlighter.registerLanguage('jsx', jsx);

Using Prism is beneficial, especially when highlighting jsx, as the React syntax highlighter doesn’t fully support it.

Adding line numbers to the code block

Now that you know how to highlight a block of code, you can start adding additional features like line numbers.

With React syntax highlighter, all you have to do is pass Show line numbers to the SyntaxHighlighter component and set it to true.

<SyntaxHighlighter language="javascript" style={docco} showLineNumbers="true">
{codeString}
</SyntaxHighlighter>

The component now displays line numbers next to your code.

Using custom styles in your component

Although the React syntax highlighter provides styling, sometimes you may need to customize your code blocks.

For this purpose, the package allows you to pass inline CSS styles to the customStyle prop as shown below:

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

The highlighted code block in this example has a custom border radius and background color.

The importance of syntax highlighting

You can use the react-syntax-highlighter package to highlight code in React. You can use the light version to reduce build size and customize code blocks with your own styles.

Code snippet highlighting makes your code look good, improves its readability, and makes it more accessible to readers.

unugtp