markdown-to-jsx

What is markdown-to-jsx?

The markdown-to-jsx package is an npm package that allows you to parse and render Markdown content as React components. It is lightweight and customizable, making it a good choice for projects that need to convert Markdown to JSX without heavy dependencies.

What are markdown-to-jsx's main functionalities?

Basic Markdown Parsing

This feature allows you to render basic Markdown text as React components. The example code shows how to import the Markdown component from the package and use it to render a simple Markdown string.

import Markdown from 'markdown-to-jsx';

const markdownInput = '# Hello World!';

function App() {
  return <Markdown>{markdownInput}</Markdown>;
}

Custom Components

This feature allows you to use custom components to render specific parts of the Markdown content. In the example, a custom anchor component is used to replace the default rendering of links.

import Markdown from 'markdown-to-jsx';
import MyCustomComponent from './MyCustomComponent';

const markdownInput = '[Click me](#custom)';

const options = {
  overrides: {
    a: {
      component: MyCustomComponent,
      props: {
        className: 'my-custom-class'
      }
    }
  }
};

function App() {
  return <Markdown options={options}>{markdownInput}</Markdown>;
}

Markdown Options

This feature allows you to customize the parsing and rendering behavior of the Markdown content. The example demonstrates how to use options to modify the default behavior, such as forcing block-level rendering or customizing the slugify function.

import Markdown from 'markdown-to-jsx';

const markdownInput = 'Hello, *world*!';

const options = {
  forceBlock: true,
  forceInline: false,
  slugify: (text) => text.toLowerCase().replace(/\s/g, '-')
};

function App() {
  return <Markdown options={options}>{markdownInput}</Markdown>;
}

Other packages similar to markdown-to-jsx

react-markdown

react-markdown is a popular Markdown renderer for React that uses remark to parse Markdown. It is similar to markdown-to-jsx but offers a more extensive plugin system, which allows for more customization and extensibility at the cost of a larger bundle size.

marked

marked is a low-level Markdown compiler for parsing Markdown without caching or blocking for long periods of time. It is not specifically designed for React like markdown-to-jsx, but it can be used in a React project with additional setup. It is known for its speed and extensibility.

remarkable

remarkable is another Markdown parser that can be configured extensively with plugins. It is not React-specific and provides a full-featured Markdown to HTML converter. Compared to markdown-to-jsx, it might require additional integration steps for use within React applications.

README

markdown to jsx compiler

Enables the safe parsing of markdown into proper React JSX objects, so you don't need to use a pattern like dangerouslySetInnerHTML and potentially open your application up to security issues.

The only exception is arbitrary block-level HTML in the markdown (considered a markdown antipattern), which will still use the unsafe method.

Uses remark-parse under the hood to parse markdown into a consistent AST format. The following remark settings are set by markdown-to-jsx:

• footnotes: true
• gfm: true
• position: false

Requires React >= 0.14.

Usage

The default export function signature:

compiler(markdown: string, options: object?)

ES6-style usage:

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

render(compiler('# Hello world!'), document.body);

Override a particular HTML tag's output:

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

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

render(
    compiler('# Hello world!', {
        overrides: {
            h1: {
                component: MyParagraph,
                props: {
                    className: 'foo',
                },
            },
        },
    }), document.body
);

/*
    renders:

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

Depending on the type of element, there are some props that must be preserved to ensure the markdown is converted as intended. They are:

• a: title, href
• img: title, alt, src
• input[type="checkbox"]: checked, readonly (specifically, the one rendered by a GFM task list)
• ol: start
• td: style
• th: style

Any conflicts between passed props and the specific properties above will be resolved in favor of markdown-to-jsx's code.

MIT