React中使用Markdown编辑器

前言

因为之前写过一个自己的博客，其中编辑文章使用的是富文本编辑器，后来用到Markdown编辑，感觉要比富文本更好用，这里简单记录一下如何在React中添加Markdown编辑器。

一 安装

这里我们选择安装以下几个插件

npm install marked // 解析Markdown为HTML
npm install for-editor // Markdown编辑器
npm install highlight.js // 代码高亮

二 使用

marked.setOptions({
    renderer: new marked.Renderer(),
    highlight: function(code, lang) {
      const language = hljs.getLanguage(lang) ? lang : 'plaintext';
      return hljs.highlight(code, { language }).value;
    },
    langPrefix: 'hljs language-', // highlight.js css expects a top-level 'hljs' class.
    pedantic: false,
    gfm: true,
    breaks: false,
    sanitize: false,
    smartLists: true,
    smartypants: false,
    xhtml: false
});

const [mdContent, setMdContent] = useState('')
function handleEditorChange(value) {
  setMdContent(value)
}
<Editor value={mdContent} onChange={handleEditorChange}  />

三 保存

 代码保存时，转义为HTML

marked.parse(mdContent)

最后

详细内容请查看我博客详情

博客使用Markdownhttps://www.cikayo.com/article/124