在反应中使用标记

Question

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

<div>{marked(mystring)}</div>

I use babel so I import marked like this:

import { marked } from 'marked';

Unfortunately the import statement does not work. marked is not defined. How do I have to import marked here, so that I can use it?

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:

// package.json
{
  dependencies: {
    react: "^17.0.0",
    marked: "^4.0.0",
  },
}

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

import { marked } from "marked";

4. Use the dangerouslySetInnerHTML approach as shown in the example below:

import React from "react";
import { marked } from "marked";

class MarkdownExample extends React.Component {
  getMarkdownText() {
    var rawMarkup = marked.parse("This is _Markdown_.");
    return { __html: rawMarkup };
  }
  render() {
    return <div dangerouslySetInnerHTML={this.getMarkdownText()} />;
  }
}

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

Alternative (Safe)

If you don't want to use dangerouslySetInnerHTML and safely render HTML. Try marked-react , which internally uses marked to render the html elements as react components

npm i marked-react

import Markdown from "marked-react";

const MarkdownComponent = () => {
  return <Markdown>{rawmarkdown}</Markdown>;
};

Another alternative is react-markdown

---

Answer 2

If you just want to import marked:

import marked from 'marked';

Then call the function in your component:

marked('# Markdown');

Answer 3

Here is another way of using marked with React Hooks:

1. Create your MarkedConverter component

import { useState } from 'react'
import marked from 'marked'

export const MarkedConverter = () => {
  const [markedVal, setMarkedVal] = useState(
    '# Welcome to my React Markdown Previewer!'
  )
  return <div dangerouslySetInnerHTML={createMarkUp(markedVal)}></div>
}

2. Create Markup function and pass the value from MarkedConverter Component

export const createMarkUp = (val) => {
 return { __html: marked(val) }
}

3. Finally you can import MarkedConverter Component to any of your Component

Answer 4

With the marked-wrapper react-marked-markdown :

import { MarkdownPreview } from 'react-marked-markdown'

export default ({ post }) => (
  <div>
    <h1>{ post.title }</h1>
    <MarkdownPreview value={ post.content }/>
  </div>
)

Answer 5

Here's an example on how to use marked with react:

1. Install marked with NPM: npm i marked

2. import it in your react app (this example is created with create-react-app), and using it example of a react component using "marked"

3. result in the browser: preview