Syntax highlight to Next.js blog

These are the steps I did to add syntax highlighting to my blog which uses Next.js and react-markdown for rendering Markdown.

Add react-syntax-highlighter

yarn add react-syntax-highlighter

Create CodeBlock component

Then I created new separate component for the code blocks, intuitively named: CodeBlock.

import React from 'react';
import PropTypes from 'prop-types';

import SyntaxHighlighter from 'react-syntax-highlighter';
import { a11yDark, a11yLight } from 'react-syntax-highlighter/styles/hljs/';
import { useDarkMode } from 'next-dark-mode';

const CodeBlock = ({ language, value }) => {
  const { darkModeActive } = useDarkMode();
  return (
    <SyntaxHighlighter
      style={darkModeActive ? a11yDark : a11yLight}
      language={language}
    >
      {value}
    </SyntaxHighlighter>
  );
};

CodeBlock.propTypes = {
  language: PropTypes.string,
  value: PropTypes.string,
};

export default CodeBlock;

As you can see, I use next-dark-mode for my theme styling and there I get which I'm currently using. But you can skip those if you do not need them.

Using the CodeBlock

Then in the place where I'm using react-markdown I will give the created CodeBlock for it renderers prop like this:

import CodeBlock from './CodeBlock';

<ReactMarkdown source={markdownBody} renderers={{ code: CodeBlock }} />;

Done

Now the blog has syntax highlighting and it is a little better looking when viewing the code blocks.