Add Code Blocks to Your React Blog Using React Syntax Highlighter

If you're building a developer-focused blog, documentation site, or portfolio using React, chances are you'll need to display code snippets in a readable and stylish way. This is where syntax highlighting comes in—and one of the best libraries for the job isreact-syntax-highlighter.

In this guide, we’ll walk through how to implement code blocks in a React blog using this library, covering two common approaches:

• The quick and simple full import method
• The more customizable and performant PrismLight setup

By the end, you’ll understand the trade-offs of each and can choose the one that fits your needs best— whether you’re focused on development speed, customizability, or performance.

Installation

Before diving into the setup options, you'll need to install the react-syntax-highlighter package in your React project. You can do this using either npm or yarn:

1npm install react-syntax-highlighter

Or, if you prefer Yarn:

1yarn add react-syntax-highlighter

Once installed, you're ready to choose the setup that best suits your needs.

Why Syntax Highlighting Matters

Syntax highlighting isn’t just about aesthetics—it enhances readability and comprehension. For readers going through your blog posts or documentation, properly styled code blocks make it easier to understand the logic and follow along.

Option 1: The Simple Full Import Setup

This is the go-to method for getting started quickly:

1// CodeBlock.jsx
2
3import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
4import { oneDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
5
6export default function CodeBlock({ language, children }) {
7  return (
8    <SyntaxHighlighter language={language} style={oneDark} showLineNumbers>
9      {children}
10    </SyntaxHighlighter>
11  );
12}

Pros:

• Very easy to implement
• No need to manage language imports manually
• Great for getting started or prototyping

Cons:

• Includes all Prism languages by default
• Can bloat your JavaScript bundle unnecessarily
• Not ideal if performance is a top priority

Option 2: Optimized Setup with PrismLight

For those looking to keep things lean, the PrismLight version lets you import only the languages you need, improving performance and bundle size:

1// CodeBlock.jsx
2 
3import { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter';
4import oneDark from 'react-syntax-highlighter/dist/esm/styles/prism/one-dark';
5
6// Import only the languages you need
7import jsx from 'react-syntax-highlighter/dist/esm/languages/prism/jsx';
8import javascript from 'react-syntax-highlighter/dist/esm/languages/prism/javascript';
9import html from 'react-syntax-highlighter/dist/esm/languages/prism/markup';
10import css from 'react-syntax-highlighter/dist/esm/languages/prism/css';
11import bash from 'react-syntax-highlighter/dist/esm/languages/prism/bash';
12
13// Register them with PrismLight
14SyntaxHighlighter.registerLanguage('jsx', jsx);
15SyntaxHighlighter.registerLanguage('javascript', javascript);
16SyntaxHighlighter.registerLanguage('html', html);
17SyntaxHighlighter.registerLanguage('css', css);
18SyntaxHighlighter.registerLanguage('bash', bash);
19
20export default function CodeBlock({ language = 'jsx', children }) {
21  return (
22    <SyntaxHighlighter language={language} style={oneDark} showLineNumbers>
23      {children}
24    </SyntaxHighlighter>
25  );
26}

Pros:

• Only bundles the languages you register
• Keeps your app fast and lightweight
• Easy to extend as your blog grows

Cons:

• Requires a bit more setup
• You’ll need to register each new language manually

When to Use Which?

This depends on your goals:

• If you’re just starting out, working on a small blog, or want to get things working fast, the full import approach is totally fine.
• If you're running a production blog, working on SEO and performance, or care about loading speeds, the PrismLight setup is the better long-term solution.

The good news? You can start with the simple method and refactor later as needed.

Using the CodeBlock Component

Once you’ve set up your <CodeBlock> component using either method, you can use it in your blog or documentation by wrapping any code snippet. Here's a realistic example showing how you might display shell commands for installing dependencies and starting the development server:

1import CodeBlock from './CodeBlock';
2
3function SetupGuide() {
4  return (
5    <CodeBlock language="bash">
6{\`# Install dependencies
7npm install
8
9# Start the dev server
10npm run dev\`}
11    </CodeBlock>
12  );
13}

Bonus: Real-World Benefits

In one of our recent projects, we moved from the full import approach to the optimized PrismLight setup—and reduced the bundle size of the blog module by nearly 30%.

Summary: Comparing Both Approaches

Wrapping Up

Using react-syntax-highlighter in your React blog or documentation site is a great way to present code clearly and beautifully.

Depending on your use case, you can choose between:

• A quick plug-and-play approach
• A highly optimized, customizable solution

Either way, you’ll give your readers a better experience. Just remember to register only what you need if you're going the optimized route.