This works just fine in the CommonMark reference tool.

* Follows the [CommonMark](http://commonmark.org/) spec
* Renders actual, "native" React DOM elements
* Allows you to escape or skip HTML (try toggling the checkboxes above)
* If you escape or skip the HTML, no `dangerouslySetInnerHTML` is used! Yay
  * more things
  * stuff and things
* another list

This does not render the nested list at all.

* Follows the [CommonMark](http://commonmark.org/) spec
* Renders actual, "native" React DOM elements
* Allows you to escape or skip HTML (try toggling the checkboxes above)
* If you escape or skip the HTML, no dangerouslySetInnerHTML is used! Yay
  * more things
  * stuff and things
* another list

This does. Any kind of markdown on the parent causes the nested list to be missed (bold, italics).

Rather than extracting as this.props.source, it would be much nicer if we could just have the Markdown as normal content, and then have the component extract it from this.props.children.

#title
# title

title

title

why the space between '#' and title must be added?

I want to use markdown in my Github Pages with react ,but I met this error -- "Cannot find module "../../test.md",can you give me some suggest.thank you!

Currently it shows a plain code block without any syntax highlighting. Could you please tell me how can I add a syntax highlighting support to it?

I import a .md file so that I can focus the markdown content in a single file.
But the console show： Module not found: ./components/MdContent.md

My code is something like this.

import React, { Component } from 'react';
import './../App.scss';
import MdContent from './components/MdContent.md';
var ReactMarkdown = require('react-markdown');
var input = {MdContent};

class YosgoMarkDown extends Component {

    render() {
        return(
            <div className="YosgoMarkDown">
                <ReactMarkdown source={input} />
            </div>
        );
    }
}
export default YosgoMarkDown;

I use create-react-app and my folder structure is like this
src
⎿ App.js
⎿ index.js
⎿ components
---⎿ YosgoMarkDown.js
---⎿ MdContent.md

Is there any wrong or some other advice to import a .md file?

React 15.2.0 throws a warning if you try to assign custom props to DOM elements. Custom props should be assigned only to React components.

warning.js?8a56:44Warning: Unknown prop `literal` on <p> tag. Remove this prop from the element. For details, see https://fb.me/react-unknown-prop
    in p (created by ReactMarkdown)
    in div (created by ReactMarkdown)
    in ReactMarkdown (created by MY_APP_COMPONENT)

This warning appears with any source input.
I just had to fix the same thing in my library.

Need some tips, thx.

Hello,
There is a p tag always get enclosed when i use the markdown component which always disturbs my page layout. Can you please tell how to avoid that.

I've seen the demo here. How can I highlight the code like demo

Just a recommendation :) Additionally, you can process and set innerHTML of the component when source changes.

First of all, great work everyone.

Is it possible to have a table of content next to the markdown document with react-markdown somehow?
I'd like to use it as a sidebar for a simple documentation page.

In 62df2b2 the Parser require was changed to:

``` diff`

• var Parser = require('commonmark/dist/commonmark').Parser;

This fails at least on Node v4-5, npm@3 and `Browserify` with error

Error: Cannot find module './common' from 'D:\Projects\crf\node_modules\react-markdown\node_modules\commonmark\dist'

There's also an comment from @just-paja in the commit with same happening with `Webpack`

> I like your project, but this breaks webpack for me with a This seems to be a pre-built javascript file. Though this is possible, it's not recommended. Try to require the original source to get better results error.

I could just be doing something wrong, but this is how the live demo text gets displayed in my app:

The code while code like is missing the box and the coloring
The blockquote is missing the left-hand bar.

looking at the elements, the code element is very different in my page than it is on the demo page:

Mine:

Demo:

My package.json reads:
"react": "^15.2.1",
"react-dom": "^15.1.0",
"react-markdown": "^2.4.2",

Any help would be greatly appreciated! Thanks!

such as this

and there is my code

Please help me

I'm trying to use this package in conjunction with developing components in React Storybook, but I'm getting the following errors:

ERROR in ./~/entities/maps/xml.json
Module parse failed: /Volumes/SuperData/GitHub/react-sketchpad/node_modules/entities/maps/xml.json Unexpected token (1:6)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (1:6)

I followed the instructions and installed json-loader, and below is my webpack.config.js:

var path = require('path');
var webpack = require('webpack');

module.exports = {
  devtool: 'eval',
  entry: [
    'webpack-dev-server/client?http://localhost:9000',
    'webpack/hot/only-dev-server',
    './src/index'
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/static/'
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ],
  module: {
    loaders: [
      {
        test: /\.js$/,
        loaders: ['react-hot', 'babel'],
        include: path.join(__dirname, 'src')
      },
      {
        test: /\.json$/,
        loader: 'json',
      },
    ]
  }
};

Am I missing something?

Usually markdown files are read from fs so I think having sourceFile will just make it easier to use it.

Something on similar lines:

require('fs')
.readFileSync(this.props.sourceFile, this.props.sourceFileEncoding || 'utf8', (err, file) => {
  this.setState({ source: file });
});

Hi. We use react-markdown and then renderer prop to map the renderer types to our own components. We have quote component that renders a paragraf where the quote is and a cite tag.

but when i look a the browser markdown adds paragraf inside paragraf so they get nested

<blockquote class="block-quote__blockquote">
  <p class="block-quote__quote">
    <p class="running-text__RunningText">
    <!-- react-text: 578 -->“I have faced rejection so many times that I’ve lost track of how many times. Every time you’re asking someone to buy your product, you’re really asking them to embrace change…”<!-- /react-text -->
    </p>
  </p>
</blockquote>

can i prevent it from doing that?

Hi there. I have tried several times to get the development version working to no avail. Here is a screen shot of my terminal:

I have done everything I can think of. The demo will not load at all. I have successfully installed via npm in my project and I can get the markdown rendered to the page, but nothing else. The documentation is unclear on how to get this to look like the demo page as well as how to start the demo. I tried the webpack command, npm start everything. I even created a directory and tried to run gulp to see if I could fix it, but no there also. Can you provide me an explanation as to what I am doing wrong?

I'm aware CommonMark doesn't specify this behavior, but would an option to enable auto-linking URLs found in text (like GitHub does) be considered?

I want to render tags as link to my site #github => #github but I don't want to allow user to use the Link markdown syntax for anything else.
Currently I'm doing this which works but allows user to use the Link too

 (<ReactMarkdown source={prepare(this.props.text+' ')}
        softBreak="br"
        allowedTypes={['Text', 'Paragraph', 'Hardbreak', 'Emph', 'Strong', 'Item', 'List','Link']} />

function prepare(text){
  return U.tagify(text).reduce(function(acc, token){
      return acc + (U.isTag(token) ? makeLink(token) : token);
    }.bind(this))
}

function makeLink(token){
  return '['+token+'](/tag/'+token.substr(1)+')';
}

Is there any way to do that?

It would be awesome if we could add our own markdown.

For example, I like strikethrough, but it's not part of the CommonMark markdown spec, so I'd love to be able to add it. (Note: I don't want to allow HTML, so adding this would be a safer option)

~strike this~ ==> strike this

Is it feasible to allow this as an option for this package?

Something like the following:

<ReactMarkdown source={input} linkTargets="_blank"/>

When typing 2 strings, and putting each on a new line using Enter. Instead of rendering a BR it will render each in a separate span (including empty span)

Hello,

is there a way to replace the links by react-router link ?

Thanks :)

Any tips on how I could modify react-markdown to parse additional nodes out? In particular, if I found an occurence of $$\int_0^\infty x^2 dx$$ in the text, I'd like to rely on react-katex to render like so:

 React.render(<BlockMath>\int_0^\infty x^2 dx</BlockMath>,
                document.getElementById('math'));

Im getting this error whenever I import react-markdown.

Module not found: Error: Cannot resolve module 'json-loader' in [REDACTED]/node_modules/entities/lib
resolve module json-loader in [REDACTED]/node_modules/entities/lib

I've commented the import, so I know it's that one, and I get no error. I installed "json-loader". Shouldn't json-loader or an equivalent package be specified as a dependency of react-markdown?

Hello, I've testet the component and wanted to change link of images in markdown like

![insert images](../images/myImage.png)

changing the '../images/myImage.png' to 'http://someserverofMine.com/images/myImage.png' but it's not passing through my function if i use '!['

Without the '!' it's passing through my function

[insert images](../images/myImage.png)

bu then it's a link, not an image that is displayed but a link.

for info here is the usage of the component

<ReactMarkdown transformLinkUri={this.myTransformLinkUri} source={this.state.content}/>

do you have a workarround ?

Not sure what, if anything, I'm doing wrong here. This is all I'm specifying:

<Markdown escapeHtml={true} source={"Hello \n---\n**World**!"}/>

and I'm getting in the console:

Uncaught TypeError: Can't add property context, object is not extensible

If I add 2 \n between the --- and the rest, then it's not a problem.

I wrote this here, but it is tied with react-commonmark-renderer too.

The update to the react-commonmark-renderer which updated the commonmark version itself included breaking changes which are somewhat incompatible with semver, which causes issues for those who have locked up the version of react-markdown. For example, my package was locked [email protected] due to #11. But as the react-markdown and react-commonmark-renderer are using the caret notation in package.json, it's possible for npm@3 to resolve the dependencies to both react-markdown and react-commonmark-renderer in a way that are incompatible, thus introducing breaking changes.

1. npm install [email protected]
2. Render a markdown file that would respond to Header in the old version (´Heading` in the new version)

Expected:

• Should render a Header element

Actual:

• Throws for unknown nodeType Header

The structure looks like this:

node_modules
  | - [email protected]
  | - [email protected]
  | - [email protected]

As the npm docs state

Caret Ranges ^1.2.3 ^0.2.5 ^0.0.4

Allows changes that do not modify the left-most non-zero digit in the [major, minor, patch] tuple. In other words, this allows patch and minor updates for versions 1.0.0 and above, patch updates for versions 0.X >=0.1.0, and no updates for versions 0.0.X.

Many authors treat a 0.x version as if the x were the major "breaking-change" indicator.

Caret ranges are ideal when an author may make breaking changes between 0.2.4 and 0.3.0 releases, which is a common practice. However, it presumes that there will not be breaking changes between 0.2.4 and 0.2.5. It allows for changes that are presumed to be additive (but non-breaking), according to commonly observed practices.

As the requirement has changed from 0.22.0 to 0.24.0, npm picks up the newest version of 0.22.x instead -> 0.22.1.

Perhaps this can be fixed together with #16. Basically, our content includes <kbd>Enter</kbd> like text to render a keyboard hotkeys like Enter. There is a CSS defined for it. However, react-markdown renders it into:

<span><kbd></kbd></span><span>Enter</span>

Hi,

Is there any way to detect consecutive images with react-markdown ?

Use case is, we write articles in markdown and want to provide a generic layout for images depending on the number of consecutive images.

For example:
1 image: full-width
2 images: side-by-side
3 images: 2 side-by-side and 1 full size underneath
4 images+: a gallery component

Thanks !

in the example page you show code highlighting

I also noticed that highlight is an option

but it's not clear how to do this. Any advice?

Webpack will successfully bundle my code that includes react-markdown, but during runtime I get this error:

Uncaught Error: Cannot find module "../maps/xml.json"

The module it's referring to is require'd in commonmark, but I suspect this is an issue many of you may have had/solved and I'm just blanking on a way around it. Any suggestions?
Thanks!

Here is my very basic webpack.config,

var config = {
	entry: './src/js/main.js',
	output: {
		filename: 'bundle.js',
		path: __dirname + '/src',
	},
	module: {
		rules: [
			{
				test: /\.jsx?$/,
				use: ['babel-loader'],
				include: __dirname + '/src/js',
			},
		]
	}
}

It seems that unwrapDisallowed only applies to those types included in disallowedTypes. If instead you're whitelisting the types using the allowedTypes, it doesn't seem to unwrap those types that are not included.

Is it possible to limit the advanced markdown features.
I would like to have only below markdown

Emphasis

This text will be italic

This text will be bold

Lists

Unordered

• Item 1
• Item 2
  • Item 2a
  • Item 2b

Ordered

1. Item 1
2. Item 2
3. Item 3
   • Item 3a
   • Item 3b

Not sure why, but the react-markdown.d.ts file is not installed, it's not in my node_modules/react-markdown/ folder.

I'm having a problem rendering some Markdown
What happens is that all the text is rendered as bold

For example, for this text

**This should be bold**

This shouldn't be bold

I'm seeing this render

Any ideas of what might be happening?

This is the code where I render the markdown

<Markdown source={body}/>

body is a string

Hello.
I have some <img/> tags in markdown, and I want to handle the src attrs in these elements. So I use the transformImageUri function, hoping to get original uri as input and return new uri.
However, I found that if the element is already <img/> in the markdown, it can't trigger the transformImageUri function. Any solution to deal with this condition? Thx

Looks like a bug 🐛

I'm using:

• webpack v2.1.0-beta.27
• json-loader v0.5.4
• react-makdown v2.4.2

Following the instructions, I added to the json-loader to my webpack.config.babel.js:

{
    test: /\.json$/,
    loader: 'json-loader',
}

I'm trying to use package:

import React, { Component } from 'react'
import ReactMarkdown from 'react-markdown'

import info from './index.md'
import styles from './index.css'

class Content extends Component {
    render () {
        return (
            <content className={ styles.content }>
                <ReactMarkdown source={ info } />,
            </content>
        )
    }
}

export default Content

But have just the following output:

Hash: 4f07fbf9e1fdba4b7aea
Version: webpack 2.1.0-beta.27
Time: 25768ms
                               Asset     Size  Chunks             Chunk Names
0a7d43a8297f9411d0f57fc63bc3d4e0.jpg  21.2 kB          [emitted]  
504a3a6c4941f1d80e195f24622e8be1.png  34.3 kB          [emitted]  
     js/main.4f07fbf9e1fdba4b7aea.js   267 kB       0  [emitted]  main
   css/main.4f07fbf9e1fdba4b7aea.css   269 kB       0  [emitted]  main
  js/main.4f07fbf9e1fdba4b7aea.js.gz  91.1 kB          [emitted]  
                  assets/favicon.ico  1.15 kB          [emitted]  
         assets/apple-touch-icon.png  4.23 kB          [emitted]  
    + 236 hidden modules

ERROR in ./components/Content/index.md
Module parse failed: /home/azat/Dev/azat-io/components/Content/index.md Unexpected character '#' (1:0)
You may need an appropriate loader to handle this file type.
| ##### lorem
| 
| Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 @ ./components/Content/index.jsx 17:13-34
 @ ./components/Main/index.jsx
 @ ./components/App/index.jsx
 @ ./components/Root/index.jsx

ERROR in Error: Module parse failed: /home/azat/Dev/azat-io/components/Content/index.md Unexpected character '#' (1:0)
You may need an appropriate loader to handle this file type.
| ##### lorem
| 
| Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    at Object.e.__esModule.default (main:17:18954)
    at d (main:1:7158)
    at n (main:1:1264)
    at Object.e.__esModule.default (main:17:20584)
    at d (main:1:7158)
    at n (main:1:1264)
    at Object.i (main:17:27155)
    at d (main:1:7158)
    at n (main:1:1264)
    at Object.e.__esModule.default (main:17:18348)

We are migrating our web app from Backbone to React, and hoping to replace marked with react-markedown. The problem it, we need to convert single newlines to broken newlines (<br />), and I can't seem to find a way to do that in react-markdown.

This is the option we set in marked to enable this functionality: https://github.com/chjj/marked#breaks

We need this support for backwards compatibility in our app, as well as to follow the generally accepted Github style of markdown which is fairly well known to our users. From what I can tell, because react-markdown uses CommonMark, this is not something available as an option.

Any thoughts?

Seems commonmark adds some breaking changes in version 0.23.0, and commonmark-react-renderer has been already updated.

Otherwise, a common error as Unknown node type "Header" would raise

Hi,

I just tried your component on some markdown we had in database and have an issue wit headings not rendering when placed immediately after an HTML <br /> tag.

example :

<br />
#### Test

Any idea why ?

Thanks !

It appears to only happen to inline HTML tags (<a>, <span>, etc.) when they are put in an isolated line.

Example

This:

<div>This is a normal line</div>

<a href="https://www.google.com">Google</a>

Gets compiled into this (For the sake of readability I've removed all the data-reactid):

<div>
    <div>This is a normal line</div>
</div>
<p>
    <span>
        <a href="https://www.google.com"></a>
    </span>
    <a href="https://www.google.com">
        <span>Google</span>
        <span></span>
    </a>
</p>

Please enable escapeHTML by default on the component, a Markdown component should always have escapedHTML.

Hi is there any plans to support superscript in this markdown parser? I tried using <sub>1</sub> but this tag gets converted to even if I specify skipHTML option.

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react.min.js" charset="utf-8" crossorigin="anonymous"></script>

events.js:141
      throw er; // Unhandled 'error' event
      ^
Error: module "react" not found from "/home/dodekeract/code/manta-config-engine-app/node_modules/react-markdown/src/react-markdown.js"
    at notFound (/home/dodekeract/code/manta-config-engine-app/node_modules/browserify/index.js:803:15)
    at /home/dodekeract/code/manta-config-engine-app/node_modules/browserify/index.js:754:23
    at /home/dodekeract/code/manta-config-engine-app/node_modules/browser-resolve/index.js:185:24
    at /home/dodekeract/code/manta-config-engine-app/node_modules/browser-resolve/node_modules/resolve/lib/async.js:44:14
    at process (/home/dodekeract/code/manta-config-engine-app/node_modules/browser-resolve/node_modules/resolve/lib/async.js:113:43)
    at /home/dodekeract/code/manta-config-engine-app/node_modules/browser-resolve/node_modules/resolve/lib/async.js:122:21
    at load (/home/dodekeract/code/manta-config-engine-app/node_modules/browser-resolve/node_modules/resolve/lib/async.js:54:43)
    at /home/dodekeract/code/manta-config-engine-app/node_modules/browser-resolve/node_modules/resolve/lib/async.js:60:22
    at /home/dodekeract/code/manta-config-engine-app/node_modules/browser-resolve/node_modules/resolve/lib/async.js:16:47
    at FSReqWrap.oncomplete (fs.js:82:15)

React is not found, yes - because it's not installed via npm to save bandwidth. However, it will be available in the browser. Not sure how you can fix this, but it should be possible somehow.

suggest: support GFM(GitHub flavored markdown) tables: https://help.github.com/articles/organizing-information-with-tables/

| Command | Description |
| --- | --- |
| `git status` | List all *new or modified* files |
| `git diff` | Show file differences that **haven't been** staged |

For instance, this is currently failing for inputs like:

<img src="" onerror="alert()">
<a href="javascript:alert()">hey</a>

How to fix that? Is/how to make this component safe enough to be used?