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 commented Aug 21, 2018

It did work out of the box 👍 Quite useful!

@davidyeiser

This comment has been minimized.

Copy link

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 commented May 16, 2019

👍

@feiyuWeb

This comment has been minimized.

Copy link

feiyuWeb commented May 18, 2019

good

@trungnus96

This comment has been minimized.

Copy link

trungnus96 commented Jun 4, 2019

Thank you so much :)

@bogutski

This comment has been minimized.

Copy link

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>
  );
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.