How to Add Syntax Highlighting to a Code Block in React

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

This article will show you how to use react-syntax-highlighter to highlight code blocks in React. You will 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, react-syntax-highlighter does not rely on ComponentDidUpdate or ComponentDidMount to insert the highlighted code in the DOM using dangerouslySetInnerHTML.

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

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

The component uses PrismJS and Highlight.js in the background. You can choose to use either to highlight your code. It is very easy to use as it provides out-of-the-box styling.

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

Using the react-syntax-highlighter Component

To start using react syntax highlighter in React, install it via npm.

 npm install react-syntax-highlighter --save 

Create a new component called 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/styles/hljs';
 
const CodeBlock = ({codestring}) => {
  return (
    <SyntaxHighlighter language="javascript" style={docco}>
      {codeString}
    </SyntaxHighlighter>
  );
};
 

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

You can render the above component as follows:

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

It is important to note that using react-syntax-highlighter can increase your build size, so if you need to, you can import the light build. The light build, however, does not have default styles.

You will also need to import and register the languages you want using the 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 like this:

 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 because react-syntax-highlighter does not fully support it.

Adding Line Numbers to the Code Block

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

With react-syntax-highlighter, you only need to pass showLineNumbers to the SyntaxHighlighter component and set it to true.

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

The component will now show line numbers next to your code.

Using Custom Styles in Your Component

Even though react-syntax-highlighter provides styling, you may need to customize your code blocks sometimes.

For this, 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 will have a custom border radius and background color in this example.

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 using your own styles.

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