Syntax highlighting for react-markdown and Next.js

README.md

Syntax highlighting for react-markdown and Next.js

This gist is based on @ibrahima's version that doesn't support Next.js.

Example

import Markdown from '@/components/markdown'

function PostBody({ content }) {
  return (
    <Markdown value={content} />
  )
}

code-block.js

import PropTypes from 'prop-types';
import { LightAsync as SyntaxHighlighter } from 'react-syntax-highlighter';
import { solarizedLight } from 'react-syntax-highlighter/dist/cjs/styles/hljs';

export default function CodeBlock({ language = null, value }) {
  return (
    <SyntaxHighlighter language={language} style={solarizedLight}>
      {value}
    </SyntaxHighlighter>
  );
}

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

markdown.js

import PropTypes from 'prop-types';
import ReactMarkdown from 'react-markdown';
import CodeBlock from '@/components/code-block'

export default function Markdown({ value }) {
  return (
    <ReactMarkdown
      source={value}
      renderers={{
        code: CodeBlock,
      }}
    />
  );
}

Markdown.propTypes = {
  value: PropTypes.string.isRequired,
};