markdown-to-jsx v6 is now available

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

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

render((
    <Markdown
        options={{
            overrides: {
                h1: {
                    component: MyH1,
                    props: {
                        className: 'foo',
                    },
                },
            },
        }}>
        # Hello world!
    </Markdown>
), document.body);

/*
    renders:

    <div class="foo">
        Hello World
    </div>
 */

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. 🙏🏼

Check out my other project: buttermilk, beautifully simple routing for React projects