react-markdown

Renders Markdown as pure React components.

Demo available at http://rexxars.github.io/react-markdown/

Installing

npm install --save react-markdown

Basic usage

var React = require('react');
var ReactDOM = require('react-dom');
var ReactMarkdown = require('react-markdown');

var input = '# This is a header\n\nAnd this is a paragraph';

ReactDOM.render(
    <ReactMarkdown source={input} />,
    document.getElementById('container')
);

Notes

If you either set escapeHtml or skipHtml to true, this component does not use dangerouslySetInnerHTML at all.

Options

source - string The Markdown source to parse (required)
className - string Class name of the container element (default: '').
containerTagName - string Tag name for the container element, since Markdown can have many root-level elements, the component need to wrap them in something (default: div).
escapeHtml - boolean Setting to true will escape HTML blocks, rendering plain text instead of inserting the blocks as raw HTML (default: false).
skipHtml - boolean Setting to true will skip inlined and blocks of HTML (default: false).
sourcePos - boolean Setting to true will add data-sourcepos attributes to all elements, indicating where in the markdown source they were rendered from (default: false).
softBreak - string Setting to br will create <br> tags instead of newlines (default: \n).
allowedTypes - array Defines which types of nodes should be allowed (rendered). (default: all types).
disallowedTypes - array Defines which types of nodes should be disallowed (not rendered). (default: none).

The possible types of elements that can be allowed/disallowed are:

Html - Inline HTML
HtmlBlock - Block of HTML
Text - Text nodes (inside of paragraphs, list items etc)
Paragraph - Paragraph nodes (<p>)
Header - Headers (<h1>, <h2> etc)
Softbreak - Newlines
Hardbreak - Hard line breaks (<br>)
Link - Link nodes (<a>)
Image - Image nodes (<img>)
Emph - Emphasis nodes (<em>)
Code - Inline code nodes (<code>)
CodeBlock - Blocks of code (<code>)
BlockQuote - Block quotes (<blockquote>)
List - List nodes (<ol>, <ul>)
Item - List item nodes (<li>)
Strong - Strong/bold nodes (<strong>)
HorizontalRule - Horizontal rule nodes (<hr>)

Note: Disallowing a node will also prevent the rendering of any children of that node. Eg, disallowing a paragraph will not render it's children text nodes.

Developing

git clone git@github.com:rexxars/react-markdown.git
cd react-markdown
npm install
npm test

License

MIT-licensed. See LICENSE.

gaoxue86 / react-markdown