前言

因为之前写过一个自己的博客，其中编辑文章使用的是富文本编辑器，后来用到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