手把手带你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 (
        <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)

此时一个简单的markdown语法解析功能就实现了，来看看效果

两边确实正在同步更新，但是…看起来好像哪里不太对！其实是没问题的，被解析好的 html字符串 每个标签都被附带上了特定的类名，只是现在我们引入任何的样式文件，例如下图

我们可以打印解析出来的html字符串看看是什么样的

<h1 id="">大标题</h1>
<blockquote>
  <p>本文来自公众号：前端印象</p>
</blockquote>
<pre><code class="js language-js">let name = '零一'
</code></pre>