Skip to content

Instantly share code, notes, and snippets.

@ilyazub
Forked from ibrahima/CodeBlock.jsx
Last active January 20, 2022 06:16
Show Gist options
  • Save ilyazub/e58245ad6e76ddd9f0f221b7e4870398 to your computer and use it in GitHub Desktop.
Save ilyazub/e58245ad6e76ddd9f0f221b7e4870398 to your computer and use it in GitHub Desktop.
Syntax highlighting for react-markdown and Next.js

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} />
  )
}

Highlighted Markdown with solarized light theme

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,
}
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,
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment