Syntax highlighting for react-markdown

CodeBlock.jsx

import React from 'react';
import PropTypes from 'prop-types';
import SyntaxHighlighter from 'react-syntax-highlighter';

export default class CodeBlock extends React.PureComponent {
  static propTypes = {
    value: PropTypes.string.isRequired,
    language: PropTypes.string,
  }

  static defaultProps = {
    language: null,
  }

  render() {
    const { language, value } = this.props;

    return (
      <SyntaxHighlighter language={language}>
        {value}
      </SyntaxHighlighter>
    );
  }
}

Markdown.jsx

import React from 'react';
import PropTypes from 'prop-types';
import ReactMarkdown from 'react-markdown';
import CodeBlock from './CodeBlock';

class Markdown extends React.PureComponent {
  render() {
    return (
      <Container>
        <ReactMarkdown
          source={value}
          renderers={{
            code: CodeBlock,
          }}
        />
      </Container>
    );
  }
}

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


export default Markdown;

It did work out of the box 👍 Quite useful!

Amazing! I've spent so much time trying to get something like this to work and could never figure it out. Thank you!

👍

good

Thank you so much :)

UPD styles

import React from 'react';
import ReactMarkdown from 'react-markdown';
import CodeBlock from './CodeBlock';

function Markdown({ source = ''}) {
  return (
    <ReactMarkdown
      source={source}
      renderers={{
        code: CodeBlock
      }}
    />
  );
}

export default Markdown;

// =====================

import React from 'react';
import SyntaxHighlighter from 'react-syntax-highlighter';
import { atomOneLight } from 'react-syntax-highlighter/dist/esm/styles/hljs';

export default function CodeBlock({ language, value }) {
  if (!language) language = 'javascript';
  return (
    <SyntaxHighlighter language={language} style={atomOneLight}>
      {value}
    </SyntaxHighlighter>
  );
}