How to Add Syntax Highlighting to Code Blocks in Blog Posts using React Syntax Highlighter

Ayan Ghanta

5 min read | Oct 31, 2025

In this post, I’ll show you how I added syntax highlighting to the code snippets in my blog posts using the React Syntax Highlighter library. It makes my posts look more professional and visually engaging.

When I first started adding code snippets to my blog, they looked dull and hard to read as code blocks. I added some basic styling with CSS (JetBrains font, dark background, etc.), but I quickly realized that good syntax highlighting can make code snippets pop, help readers understand faster, and make my posts look way more professional.

so i write this blog to show you how I used react-syntax-highlighter to highlight the code blocks in my blog.

Step 1: Library I used

for the syntax highlighting, I used a library called react-syntax-highlighter. The big advantage of this library is that it comes with many built-in themes and language supports, so you can easily customize the look of your code blocks.

I also used html-react-parser (only if you’re using a rich text editor like Tiptap), this library helps parse the HTML string returned by the editor into React elements, so you can safely render it inside your blog page.

You can install it by running the following command:

npm install react-syntax-highlighter

npm install html-react-parser

Step 2: Preparing HTML Content for Syntax Highlighting

In a blog application, SEO plays an important role, so rendering your post content as HTML is highly recommended.

In my app, i use Tiptap editor to write blog posts. Tiptap return the written content as as HTML string which look somethig like this

<p>This is the code:</p><pre><code>const name = 'devio'</code></pre>

Once we have the HTML, there are two possible approach to apply syntax highlighting:

1. If you use an editor like Tiptap: you can render this HTML string inside your React componet and apply syntax highlighting to the code blocks dynamically.

2. If you write posts directly in HTML: You can simply highlight the code blocks at render time

Let's explore them , starting with the one i actully use this the blog post.

Step 2.1: Applying Syntax Heighlighting to Tiptap Contnet

we can achieve this in three simple steps:

1. Parse the HTML string returned by the editor.(to make it react element)

2. Identify the <pre> & <code> blocks within the HTML content.

3. Render and highlight those code blocks using react-syntax-heilighter

Here is the implementation:

import parse from "html-react-parser";
import SyntaxHighlighter from "react-syntax-highlighter";
import { monokai } from "react-syntax-highlighter/dist/esm/styles/hljs";

function DisplayBlogContnet({ htmlString }) {
  //STEP 1:This parse() conver the html string to a react elemets
  const blogDOM = parse(htmlString, {
    replace: (domNode, index) => {
      //STEP 2:Identify <pre><code> blocks in the HTML structure
      if (
        domNode.type === "tag" &&
        domNode.name === "pre" &&
        domNode.children?.[0]?.name === "code"
      ) {
        const codeString =
          domNode.children[0].children
            ?.map((child) => child.data || "")
            .join("") || "";

        // STEP 3:Apply the syntax highlight to the code blocks
        return (
          <SyntaxHighlighter
            key={index}
            language="javascript" 
            style={monokai} 
          >
            {codeString}
          </SyntaxHighlighter>
        );
      }
    },
  });
  return <>{blogDOM}</>;
}
export default DisplayBlogContnet;

Step 2.2 Highliting Code Blocks in Plain HTML Contnet

If you write your blog post directly in html (with out using an editor like Tiptap), applying syntax highlighting becomes even simpler.

In this case, you can directly use the react-syntax-highlighter component to wrap your code. There's no need to parse HTML string or replace tags. You just pass the code as a string and specify the language.

Here's an example:

import SyntaxHighlighter from "react-syntax-highlighter";
import { monokai } from "react-syntax-highlighter/dist/esm/styles/hljs";

const HTMLPost = () => {
  const codeString = `const name = 'React'; console.log(name);`;

  return (
    <div className="blog-post">
      <p>This is a simple code snippet:</p>
      <SyntaxHighlighter language="javascript" style={monokai}>
        {codeString}
      </SyntaxHighlighter>
    </div>
  );
};

export default HTMLPost; 

Step 3: Customize the Look with CSS

you can also customize the style of the code block using your own custom css like padding, margin, border-radius etc.

Here's a simple example:

import parse from "html-react-parser";
import SyntaxHighlighter from "react-syntax-highlighter";
import { monokai } from "react-syntax-highlighter/dist/esm/styles/hljs";

function DisplayBlogContnet({ htmlString }) {
  const blogDOM = parse(htmlString, {
    replace: (domNode, index) => {
      if (
        domNode.type === "tag" &&
        domNode.name === "pre" &&
        domNode.children?.[0]?.name === "code"
      ) {
        const codeString =
          domNode.children[0].children
            ?.map((child) => child.data || "")
            .join("") || "";

        return (
          <SyntaxHighlighter
            key={index}
            language='javascript'
            style={monokai}
            customStyle={{
              marginTop: "10px",
              marginBottom: "8px",
              borderRadius: "2px",
            }}
          >
            {codeString}
          </SyntaxHighlighter>
        );
      }
    },
  });
  return <>{blogDOM}</>;
}
export default DisplayBlogContnet;

Adding syntax highlighting turned out to be a small change that made a big difference in my blog. and also I learned a lot of the things while setting this up, and it was fun to see my blog feel more 'techy' . If you haven’t added syntax highlighting yet give it a try, it’s totally worth it.🖍️