react-rich-markdown

react-rich-markdown

A ready-to-go component to render rich Markdown snippets.

The <Markdown /> component renders the contents of its source property with markdown-it and the following plugins:

• markdown-it-sup and markdown-it-sub for superscripts and subscripts
• markdown-it-smartarrows to replace ASCII arrows (==>, <-->, ...) with proper Unicode characters.
• markdown-it-highlightjs for code syntax highlighting
• markdown-it-math using Katex as rendering engine for LaTex syntax

Usage

import React from 'react';
import Markdown from 'react-rich-markdown';

export class MyComponent extends React.Component {
	render() {
		const opts = { smartarrows: false };
		return (
			<div>
				<h1>{this.props.sometitle}</h1>
				<Markdown source={this.props.sometext} options={opts}/>
			</div>
		);
	}
}

The options property allows to switch off unneeded plugins

{
	"sup": true|false,
	"sub": true|false,
	"smartarrows": true|false,
	/* syntax highlighting */
	"sh": true|false,
	"math": true|false
}

By default all the plugins are loaded.

Styling

The component includes a stylesheet for LaTex expressions and syntax highlighting. It's a very big file because it has all the fonts needed by Katex inlined, so you can setup it quickly with PostCSS or Webpack.

Nonetheless, I strongly recommend to not use this solution in production, and instead go and download Katex styles separately, without the fonts inlined, so the browser isn't forced to download them all at once.

You'll need also Highlight.js styles.

TODOs

• Testing
• Support mounting other markdown-it plugins

License

ISC