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.
Create a new component called CodeBlock.js in your React Application and import react-syntax-highlighter:
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:
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.
This component uses Highlight.js to highlight the code.
To use PrismJS instead, import it from the react-syntax-highlighter package like this:
For the prism light build, import PrismLight and register the language you are using.
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.
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:
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.
