markdown-to-jsx v6 is now available

Evan Jacobs
Dec 4, 2017 · 2 min read

If you haven’t used markdown-to-jsx in the past, now is a great time! Try it live here:

A shortlist of some of my favorite features:

The ability to override the rendered representation of anything.

Want to do something fancy with your h1 tags? It’s as simple as defining an override:

import Markdown from 'markdown-to-jsx';
import React from 'react';
import {render} from 'react-dom';

// surprise, it's a div instead!
const MyH1 = ({children, ...props}) => (<div {...props}>{children}</div>);

overrides: {
h1: {
component: MyH1,
props: {
className: 'foo',
# Hello world!
), document.body);


<div class="foo">
Hello World

HTML attributes can also be overridden, with a few exceptions.

HTML is a-ok.

Most markdown parsers steer clear of handling HTML and ones targeting JSX often have to resort to using dangerouslySetInnerHTML, an escape hatch that opens up your code to various security risks.

markdown-to-jsx itself had to utilize this functionality in an earlier version, but as of v6 that is no longer the case! It’s all good now.

Github-Flavored Markdown (GFM) syntaxes are supported.

GFM adds a ton of useful functionality to markdown like HTML tables, task lists, strikethrough formatting, and more.

All this weighs in at just over 5kB gzipped.

Special thanks are owed to the simple-markdown team for creating an extremely simple, but highly-extensible markdown framework. A forked version of their parsing engine is the baseline for all the functionality above and much more to come. 🙏🏼

buttermilk, beautifully simple routing for React projects

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store