Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Syntax highlighting for react-markdown
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>
);
}
}
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;
@linesh-simplicity

This comment has been minimized.

Copy link

@linesh-simplicity linesh-simplicity commented Aug 21, 2018

It did work out of the box 👍 Quite useful!

@davidyeiser

This comment has been minimized.

Copy link

@davidyeiser davidyeiser commented Jan 14, 2019

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

@ziishaned

This comment has been minimized.

Copy link

@ziishaned ziishaned commented May 16, 2019

👍

@feiyuWeb

This comment has been minimized.

Copy link

@feiyuWeb feiyuWeb commented May 18, 2019

good

@trungnus96

This comment has been minimized.

Copy link

@trungnus96 trungnus96 commented Jun 4, 2019

Thank you so much :)

@bogutski

This comment has been minimized.

Copy link

@bogutski bogutski commented Jun 11, 2019

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

This comment has been minimized.

Copy link

@WisseVoortman WisseVoortman commented Mar 7, 2020

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

@aeksco

This comment has been minimized.

Copy link

@aeksco aeksco commented Mar 22, 2020

👍 Works great thanks for sharing!

@blackfalcon

This comment has been minimized.

Copy link

@blackfalcon blackfalcon commented May 23, 2020

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

@edqwerty1

This comment has been minimized.

Copy link

@edqwerty1 edqwerty1 commented Jun 10, 2020

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>
);
@Prottoy2938

This comment has been minimized.

Copy link

@Prottoy2938 Prottoy2938 commented Nov 16, 2020

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