【React】react添加marked

1、安装

yarn add marked
yarn add highlight

2、配置option

// 引入markdown
import marked from 'marked'
import hljs from 'highlight.js'
import 'highlight.js/styles/monokai-sublime.css' 
marked.setOptions({
      renderer: renderer, // 你可以通过自定义的Renderer渲染出自定义的格式
      gfm: true, // 启动类似Github样式的Markdown
      pedantic: false, // 只解析符合Markdown定义的，不修正Markdown的错误
      sanitize: false, // 原始输出，忽略HTML标签
      tables: true, // 支持Github形式的表格
      breaks: false, // 支持Github换行符
      smartLists: true, // ：优化列表输出，这个填写ture之后，你的样式会好看很多
      smartypants: false,
      highlight: function (code) {
        return hljs.highlightAuto(code).value; // 自动检测代码是html还是js等
      }
    });

3、赋值

const [markdownContent, setmarkdownContent] = useState('');
let html=marked(e.target.value); // 转换
setmarkdownContent(html); // 赋值

4、html中引用

<div className="show-html"
    dangerouslySetInnerHTML = {{__html:markdownContent}}>
</div>