手把手带你10分钟手撸一个简易的Markdown编辑器
前言
最近我在项目中需要实现一个 markdown编辑器 的需求，并且是以React框架为开发基础的，类似掘金这样的：
我的第一想法肯定是能用优秀的开源就一定用开源的，毕竟不能老是重复造轮子。于是我在我的前端群里问了很多群友，他们都给了甩过来一堆开源的markdown编辑器项目，但我一看全是基于Vue使用的，不符合我的预期，逛了一下github，也没看到我满意的项目，所以就想自己实现一个啦
需要实现的功能
我们自己实现的话，看看需要支持哪些功能，因为做一个初版的简易编辑器，所以功能实现得不会太多，但绝对够用：
- markdown语法解析，并实时渲染
- markdown主题css样式
- 代码块高亮展示
- 「编辑区」和「展示区」的页面同步滚动
- 编辑器工具栏中工具的实现
这里先放上我最终实现好了的效果图：
我也将本文的代码放在了 Github 仓库 (opens new window)上了，欢迎各位点个 star 支持一下
同时，我也给大家提供了一个在线体验的地址 (opens new window)，因为做的比较仓促，欢迎大家给我提意见和pr
具体实现
具体的实现也是按照我们上述列出来的功能的顺序来一一实现的
说明：本文通过循序渐进的方式讲解，所以重复代码可能有点多。并且每一部分的注释是专门用于讲解该部分的代码的，所以在看每一部分功能代码时，只需要看注释部分就好~
一、布局
import React, { } from 'react'
export default function MarkdownEdit() {
return (
)
}
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 (