Using marked in react

Question

I want to use marked in reactjs as described in the reactjs docs.

{marked(mystring)}

I use babel so I import marked

Answer 1

Here's one way to use marked with React:

1. Ensure that you've installed marked
2. Include marked in your project's package.json file:

"dependencies": {
  "react": "^0.13.3",
  "marked": "^0.3.5"
},

3. Import marked in your .jsx (or related) file:

import marked from 'marked';

4. Use the dangerouslySetInnerHTML approach described in the tutorial7.js example in the React Tutorial (as noted by Janaka), or as shown in the example below:

import React from 'react';
import marked from 'marked';

class MarkdownExample extends React.Component {
  getMarkdownText() {
    var rawMarkup = marked('This is _Markdown_.', {sanitize: true});
    return { __html: rawMarkup };
  }
  render() {
    return 

  }
}

As discussed in the React Tutorial, using the dangerouslySetInnerHTML attribute gives you the ability to work with raw (HTML) markup. Make sure to take care when using this attribute, though!

---

Note: the React.Component approach in the code example in Step 4 is based on Agnew's "Hello World" example and on notes from this React.Component vs React.createClass article by Goel and Silveira.