Last updated at 2023-08-21

Easy React Syntax Highlighter Tutorial

AI Status
Last Edit By
Last edited time
Aug 21, 2023 09:02 AM
Aug 21, 2023
Enhancing your website content with syntax highlighting is a crucial factor in retaining readers on your site. This practice can significantly reduce the bounce rate, ultimately improving your website's ranking. Has this idea crossed your mind?
An easily scannable and navigable source code also plays a vital role in guiding readers to focus on specific parts of an article to solve their problems.
This quick and easy syntax highlighter tutorial can assist you in presenting a beautiful source code within your website content.

Installing react-syntax-highlighter

To add syntax highlighting to your React application, you can use the react-syntax-highlighter package.
These commands below show you how to install the package in your project. Select the command based on your package manager of choice.
# NPM npm install react-syntax-highlighter # YARN yarn add react-syntax-highlighter # PNPM pnpm install react-syntax-highlighter

Basic Syntax Highlighting Usage with react-syntax-highlighter

In this section, you will learn how to use syntax highlighting using the react-syntax-highlighter library in its basic form.
Suppose you have the following code that you want to display with syntax highlighting, this code is a Javascript code.
const sourceCode = "console.log('Hello, world!');";
To render the source code with syntax highlighting using the react-syntax-highlighter library, follow these steps:
  1. Import the SyntaxHighlighter component from the library.
  1. Import the desired style from the react-syntax-highlighter styles.
  1. Use the SyntaxHighlighter component.
  1. Pass the language prop to specify the programming language of the source code.
  1. Pass the style prop to select the visual theme for highlighting.
  1. Pass the source code as the children of the SyntaxHighlighter component.
Here's an example of these steps in action:
// Step 1 import { SyntaxHighlighter } from 'react-syntax-highlighter'; // Step 2 import { docco } from 'react-syntax-highlighter/dist/esm/styles/hljs'; {/* Steps 3 and 4 */} <SyntaxHighlighter language="javascript" style={docco}> {sourceCode} {/* Step 6 */} </SyntaxHighlighter>
In the example above, docco is a predefined style from the react-syntax-highlighter library. You can choose from a variety of available styles to match your preferences.

Available Props in SyntaxHighlighter

When using the SyntaxHighlighter component from the react-syntax-highlighter library, you can customize the behavior and appearance of the syntax highlighting using various props.
Here are the available props and their descriptions:


Specifies the language to highlight code in. Available options for hljs or prism. Pass 'text' to render plain monospaced text.
Using this prop, you can highlight different source code from many programming languages.
<SyntaxHighlighter language="javascript" style={docco}> {sourceCode} </SyntaxHighlighter>


Defines the visual style for the syntax highlighting. Import styles from styles/hljs or styles/prism based on your import path.
Styling with custom style helps in providing good experience to the reader when they have different code highlighting preference.
import { docco } from 'react-syntax-highlighter/dist/esm/styles/hljs'; <SyntaxHighlighter language="javascript" style={docco}> {sourceCode} </SyntaxHighlighter>


Controls whether lines of code should be wrapped in a parent element.
You can force wrap line so reader don’t need to scroll horizontally to see all code. Or you can disable wrapping to display source code as it is.
<SyntaxHighlighter wrapLines={true} language="javascript" style={docco}> {sourceCode} </SyntaxHighlighter>


Displays line numbers next to the code block.
This is particularly useful when you mention the line number in your content. Reader can easily jump to the line number instead of skimming through the source code again.
<SyntaxHighlighter showLineNumbers={true} language="javascript" style={docco} > {sourceCode} </SyntaxHighlighter>


Renders line numbers into each line, suitable for specific renderers like react-syntax-highlighter-virtualized-renderer.
<SyntaxHighlighter showLineNumbers={true} showInlineLineNumbers={true} language="javascript" style={docco} > {sourceCode} </SyntaxHighlighter>


Specifies the starting line number for line numbering. This is useful when you need to show specific code snippet.
For example you are a developer tasked to create a website that shows code review. You can select specific code to be displayed to the user.
<SyntaxHighlighter showLineNumbers={true} startingLineNumber={5} language="javascript" style={docco} > {sourceCode} </SyntaxHighlighter>


Controls how long lines of code are displayed.
<SyntaxHighlighter wrapLongLines={true} language="javascript" style={docco} > {sourceCode} </SyntaxHighlighter>


Overrides styling for the line numbers container.
If you need to create an overlapping line number like in a code diffing tool, you can use custom style for to differentiate between code versions.
<SyntaxHighlighter lineNumberContainerStyle={{ paddingLeft: '20px' }} language="javascript" style={docco} > {sourceCode} </SyntaxHighlighter>


Applies styles to each line number.
One of use case is to differentiate between removed code, added code, and updated code if you are working on a code diffing app.
<SyntaxHighlighter lineNumberStyle={(lineNumber) => ({ color: lineNumber % 2 === 0 ? 'red' : 'blue' })} language="javascript" style={docco} > {sourceCode} </SyntaxHighlighter>


Adds custom styles to the top-level <pre> tag.
<SyntaxHighlighter customStyle={{ backgroundColor: 'lightgray' }} language="javascript" style={docco} > {sourceCode} </SyntaxHighlighter>


Props to be applied to the <code> tag.
<SyntaxHighlighter codeTagProps={{ className: 'custom-code' }} language="javascript" style={docco} > {sourceCode} </SyntaxHighlighter>


Allows custom rendering of lines of code.
<SyntaxHighlighter renderer={(props, ...children) => <span {...props}>{children}</span>} language="javascript" style={docco} > {sourceCode} </SyntaxHighlighter>

Showing Different Languages

This section demonstrates how the syntax highlighter works with different programming languages. Each programming language has its own set of tokens that need to be highlighted. The syntax highlighter automatically styles these tokens based on the language prop.
Below snippets perfectly demonstrate how SyntaxHighlighter works when you pass a Typescript, Python, and PHP source code.


In this Typescript code, the token that should be highlighted because it is a reserved keyword are function, string, and return. The other token comes from built-in functions, library, or user source code.
import { SyntaxHighlighter } from 'react-syntax-highlighter'; import { docco } from 'react-syntax-highlighter/dist/esm/styles/hljs'; const typescriptCode = ` function greet(name: string): string { return 'Hello, ' + name; } console.log(greet('Alice')); `; <SyntaxHighlighter language="typescript" style={docco}> {typescriptCode} </SyntaxHighlighter>


Some tokens that need to be highlighted in this Python source code are def and return.
import { SyntaxHighlighter } from 'react-syntax-highlighter'; import { docco } from 'react-syntax-highlighter/dist/esm/styles/hljs'; const pythonCode = ` def greet(name): return 'Hello, ' + name print(greet('Alice')) `; <SyntaxHighlighter language="python" style={docco}> {pythonCode} </SyntaxHighlighter>


Some tokens that need to be highlighted in this PHP source code are function and return.
import { SyntaxHighlighter } from 'react-syntax-highlighter'; import { docco } from 'react-syntax-highlighter/dist/esm/styles/hljs'; const phpCode = ` function greet($name) { return 'Hello, ' . $name; } echo greet('Alice'); `; <SyntaxHighlighter language="php" style={docco}> {phpCode} </SyntaxHighlighter>

Using Different Styles

In the above code examples, the hljs style was used to highlight the code. However, there are various styles available within hljs that you can experiment with. Here are a few distinct styles you can try:


To use the darcula style for your code highlighting, simply import it from the react-syntax-highlighter/dist/esm/styles/hljs directory and apply it as the style prop:
import { SyntaxHighlighter } from 'react-syntax-highlighter'; import { darcula } from 'react-syntax-highlighter/dist/esm/styles/hljs'; <SyntaxHighlighter language="typescript" style={darcula}> {typescriptCode} </SyntaxHighlighter>

Solarized Light

import { SyntaxHighlighter } from 'react-syntax-highlighter'; import { solarizedlight } from 'react-syntax-highlighter/dist/esm/styles/hljs'; <SyntaxHighlighter language="typescript" style={solarizedlight}> {typescriptCode} </SyntaxHighlighter>

Atom One Light

import { SyntaxHighlighter } from 'react-syntax-highlighter'; import { atomOneLight } from 'react-syntax-highlighter/dist/esm/styles/hljs'; <SyntaxHighlighter language="typescript" style={atomOneLight}> {typescriptCode} </SyntaxHighlighter>


Using SyntaxHighlighter can bring much more opportunity when you need to display source code to the reader.
The available props allows you to customize the behavior of SyntaxHighlighter that fits different scenario for your use case.
You can use it to show different language highlighting or utilize different styles from hljs library.
Happy highligting!

Discussion (0)

Related Posts