前言
最近我在项目中需要实现一个 「markdown编辑器」 的需求，并且是以React框架为开发基础的，类似掘金这样的：
我的第一想法肯定是能用优秀的开源就一定用开源的，毕竟不能老是重复造轮子。于是我在我的前端群里问了很多群友，他们都给了甩过来一堆开源的markdown编辑器项目，但我一看全是基于Vue使用的，不符合我的预期，逛了一下github，也没看到我满意的项目，所以就想自己实现一个啦
需要实现的功能
我们自己实现的话，看看需要支持哪些功能，因为做一个初版的简易编辑器，所以功能实现得不会太多，但绝对够用：
- markdown语法解析，并实时渲染
- markdown主题css样式
- 代码块高亮展示
- 「编辑区」和「展示区」的页面同步滚动
- 编辑器工具栏中工具的实现
这里先放上我最终实现好了的效果图：
我也将本文的代码放在了 Github 仓库 (opens new window)[1]上了，欢迎各位点个 ⭐️ 「star」 支持一下
同时，我也给大家提供了一个在线体验的地址 (opens new window)[2]，因为做的比较仓促，欢迎大家给我提意见和pr
具体实现
具体的实现也是按照我们上述列出来的功能的顺序来一一实现的
说明：本文通过循序渐进的方式讲解，所以重复代码可能有点多。并且每一部分的注释是专门用于讲解该部分的代码的，所以在看每一部分功能代码时，只需要看注释部分就好~
一、布局
import React, { } from 'react' export default function MarkdownEdit() { return ( <div className="markdownEditConainer"> <textarea className="edit" /> <div className="show" /> </div> ) }
css样式我就不一一列举了，整体就是左边是「编辑区」，右边是「展示区」，具体样式如下：
二、markdown语法解析
接下来就需要思考如何将 「「编辑区」」 输入的markdown语法解析成html标签并最终渲染在 「「展示区」」
查找了一下目前比较优秀的markdown解析的开源库，常用的有三个，分别是Marked、Showdown、markdown-it ，并借鉴了一下其它大佬的想法，了解了一下这三个库的优缺点，对比如下：
| 库名 | 优点 | 缺点 |
| Marked | 性能好，正则解析（中文支持比较好） | 扩展性较差 |
| Showdown | 扩展性好、正则解析（中文支持好） | 性能较差 |
| markdown-it | 扩展性好、性能较好 | 逐字符解析（中文支持不好） |
刚开始我选择了showdown这个库，因为这个库使用起来特别方便，而且官方已经在库中提供了很多扩展功能，只需要配置一些字段即可。但是后来我又分析了一波，还是选用了markdown-it，因为之后可能需要做更多的语法扩展，showdown的官方文档写的比较生硬，而且markdown-it使用的人也多，生态比较好，虽然其官方没有支持很多扩展的语法，但是已经有很多基于makrdown-it的功能扩展插件了，最重要的是markdown-it的官方文档写得好啊（而且有中文文档）！
接下来写一下markdown语法解析的代码吧（其中步骤1、2、3表示的是markdown-it库的用法）
import React, { useState } from 'react' // 1. 引入markdown-it库 import markdownIt from 'markdown-it' // 2. 生成实例对象 const md = new markdownIt() export default function MarkdownEdit() { const [htmlString, setHtmlString] = useState('') // 存储解析后的html字符串 // 3. 解析markdown语法 const parse = (text: string) => setHtmlString(md.render(text)); return ( <div className="markdownEditConainer"> <textarea className="edit" onChange={(e) => parse(e.target.value)} // 编辑区内容每次修改就更新变量htmlString的值 /> <div className="show" dangerouslySetInnerHTML={{ __html: htmlString }} // 将html字符串解析成真正的html标签 /> </div> ) }
对于将 「html字符串」 转化为 「真正的html标签」 的操作，我们借助了React提供的dangerouslySetInnerHTML属性，详细的使用可以看React 官方文档(opens new window)[3]
此时一个简单的markdown语法解析功能就实现了，来看看效果
两边确实正在同步更新，但是.....看起来好像哪里不太对！其实是没问题的，被解析好的 html字符串 每个标签都被附带上了特定的类名，只是现在我们引入任何的样式文件，例如下图
我们可以打印解析出来的html字符串看看是什么样的
<h1 id="">大标题</h1> <blockquote> <p>本文来自公众号：前端印象</p> </blockquote> <pre><code class="js language-js">let name = '零一' </code></pre>
三、markdown主题样式
接下来我们可以去网上找一些markdown的主题样式css文件，例如我用一个最简单Github主题的markdown样式。另外我还是很推荐Typora Theme (opens new window)[4]，上面有很多很多的markdown主题
因为我这个样式主题是有一个前缀id write（Typora上的大部分主题前缀也是#write），所以我们给展示区的标签加上该类id，并引入样式文件
import React, { useState } from 'react' import './theme/github-theme.css' // 引入github的markdown主题样式 import markdownIt from 'markdown-it' const md = new markdownIt() export default function MarkdownEdit() { const [htmlString, setHtmlString] = useState('') const parse = (text: string) => setHtmlString(md.render(text)); return ( <div className="markdownEditConainer"> <textarea className="edit" onChange={(e) => parse(e.target.value)} /> <div className="show" id="write" // 新增write的ID名 dangerouslySetInnerHTML={{ __html: htmlString }} /> </div> ) }
再来看看加入样式后的渲染结果图
