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

getting the following error when putting ``` (three backticks) in my markdown inputfield

Warning: Failed prop type: The prop `value` is marked as required in `CodeBlock`, but its value is `undefined`.
    in CodeBlock (created by ReactMarkdown)
    in ReactMarkdown (at MarkDownTest.js:47)
    in div (at MarkDownTest.js:45)
    in div (at MarkDownTest.js:35)
    in MarkDownTest (created by Context.Consumer)
    in Route (at PageContent.js:44)
    in Switch (at PageContent.js:34)
    in div (at PageContent.js:33)
    in div (created by Container)
    in Container (at PageContent.js:32)
    in div (at PageContent.js:31)
    in PageContent (at App.js:65)
    in Router (created by ConnectedRouter)
    in ConnectedRouter (created by Context.Consumer)
    in ConnectedRouterWithContext (created by ConnectFunction)
    in ConnectFunction (at App.js:63)
    in Provider (at App.js:62)
    in div (at App.js:61)
    in App (at src/index.js:6)

javascritp accept '```' as a valid string but react markdown does not for some reason

👍 Works great thanks for sharing!

Wow! This is exactly the help I needed to get my head wrapped around this. Thanks!

Thanks, works great!

Typescript/functional component version

import React from "react";
import SyntaxHighlighter from "react-syntax-highlighter";

interface CodeBlockProps {
  value: string;
  language?: string;
}

export const CodeBlock = ({ language, value }: CodeBlockProps) => (
  <SyntaxHighlighter language={language}>{value}</SyntaxHighlighter>
);

Another Version:

Codeblock:

import React from "react";
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
import { coy } from "react-syntax-highlighter/dist/cjs/styles/prism";

interface Props {
  value: string;
  language: string;
}

const CodeBlock: React.FC<Props> = (props: Props) => {
  const { language, value } = props;
  return (
    <SyntaxHighlighter language={language} style={coy}>
      {value ? value : ""} 
    </SyntaxHighlighter>
  );
};

export default CodeBlock;

ReactMarkdown:

 <ReactMarkdown
    plugins={[gfm]}
    skipHtml={true}
    renderers={{ code: CodeBlock }}
     >
     {value}
  </ReactMarkdown>