Enhancing Your React-Markdown Experience with Syntax Highlighting in a React Application

Introduction:

react-markdown is a popular library in the React ecosystem that allows developers to render Markdown content as React components. While React-Markdown provides a seamless way to incorporate Markdown into your React applications, adding syntax highlighting support can take your user experience to the next level. Syntax highlighting not only improves code readability but also enhances the overall aesthetics of your application. In this blog post, we'll explore how to integrate syntax highlighting into React-Markdown effortlessly.

Prerequisites:

Before we begin, make sure you have the working React Project:

Getting Started:

Install dependencies:

npm install react-markdown remark-gfm rehype-raw prismjs react-syntax-highlighter

Import dependencies

import Markdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
import rehypeRaw from 'rehype-raw';
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { dracula } from 'react-syntax-highlighter/dist/cjs/styles/prism';

Here, we're using the dracula theme for syntax highlighting. You can choose a different theme according to your preferences.

Create Markdown Rendered component

    <Markdown
      remarkPlugins={[remarkGfm]}
      rehypePlugins={[rehypeRaw]}
      components={{
        code({ node, inline, className, children, ...props }: any) {
          const match = /language-(\w+)/.exec(className || '');

          return !inline && match ? (
            <SyntaxHighlighter style={dracula} PreTag="div" language={match[1]} {...props}>
              {String(children).replace(/\n$/, '')}
            </SyntaxHighlighter>
          ) : (
            <code className={className} {...props}>
              {children}
            </code>
          );
        },
      }}
    >
      {markdown}
    </Markdown>

By default react-markdown does not do any syntax highlighting to a pre tag. so we need to override this implementation with syntax highlighting. In this example, we're using the components prop to specify a custom renderer for the code element.

Complete code example

// markdown.tsx

import React from 'react';
import Markdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
import rehypeRaw from 'rehype-raw';
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { dracula } from 'react-syntax-highlighter/dist/cjs/styles/prism';

type MarkdownRendererProps = {
  children: string;
};

export function MarkdownRenderer({ children: markdown }: MarkdownRendererProps) {
  return (
    <Markdown
      remarkPlugins={[remarkGfm]}
      rehypePlugins={[rehypeRaw]}
      components={{
        code({ node, inline, className, children, ...props }: any) {
          const match = /language-(\w+)/.exec(className || '');

          return !inline && match ? (
            <SyntaxHighlighter style={dracula} PreTag="div" language={match[1]} {...props}>
              {String(children).replace(/\n$/, '')}
            </SyntaxHighlighter>
          ) : (
            <code className={className} {...props}>
              {children}
            </code>
          );
        },
      }}
    >
      {markdown}
    </Markdown>
  );
}

// blog-post.tsx

import React from 'react';

function BlogPost({blog}){
  const markdownExample = `
    # Heading
    ## Sub heading
    - point
    some text
  `

return (
 <div>
   <h1>{blog.title}</h1>
   <div className="content">
      <Markdown>{markdownExample}</Markdown>
  </div>
 </div>
)

Conclusion:

By following these steps, you can seamlessly integrate syntax highlighting into your react-markdown powered applications. This enhancement not only makes your code snippets more visually appealing but also improves the overall user experience. Experiment with different PrismJS themes to find the one that best suits your application's design. Happy coding!

Bonus

This Website and page uses the exact same implementation to render code blocks with react-markdown