Syntax highlight to Next.js blog
2020-07-30
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.
- jsx
- next.js
- syntax
- highlight
- markdown
- react