十分钟定制自己的 Markdown 语法

前言

作为一门易读易写的语音，markdown 的应用越来越广，对 markdown 语法解析规则进行特殊扩展的场景诉求也越来越多。

本文为大家简单介绍以marked.js为基础的 markdown 语法扩展。

基本用法

marked.js 是一款性能不错的前端 markdown 解析库，它的用法非常简单 marked.js  readme：

renderer对象

marked.js的所有输出基本都依赖renderer对象，并且这个 renderer 我们是可以自定义规则的。

比如我们希望图片后面带上图片的说明：

自定义Lexer Token

通过自定义renderer对象的方式我们已经可以满足大部分自定义场景的诉求了。

什么？你说renderer只能自定义规则的输出，你还要加自己的解析规则？没关系，接着往下看。

01

block对象

打开 marked.js 源码，映入眼帘的就是一个包裹着一大堆正则的block对象:

可以猜测这应该是块级 markdown 语法的解析规则。

02

Lexer.prototype.token

接着往下看你会发现这么一段代码，block 里的正则用于校验lexer（层），并返回相应的 token ：

我们再来看一下 marked 入口函数以及 return 的Parser对象：

• 入口函数

• Parser

markdown 字符串首先按 blocks 中的正则解析成 tokens 队列，然后按照 token 输出不同的字符串。

03

添加自定义规则

看到这里我们也发现了，要想自定义规则就需要添加token也就需要重写Lexer.token方法。那只能 copy 过来改源码了。

举个栗子，我们希望把markdown语法里(((text)))字符串解析成<button>text</button>

首先我们在blocks里加上正则。（注：Lexer.token为块级解析，行内字符串规则需在inlineLexer中添加）

然后在Lexer.prototype.token方法中加上我们的token：

最后在Parser.prototype.tok方法中加上我们要输出的字符串：

写在最后

最后咱们来体验一下投票功能吧：

1、如何变得更强？

扔掉手机

1票

25%

扔掉女友

2票

50%

扔掉头发

1票

25%

关于极光

极光（Aurora Mobile，纳斯达克股票代码：JG）成立于2011年，是中国领先的开发者服务提供商。极光专注于为移动应用开发者提供稳定高效的消息推送、即时通讯、统计分析、极光分享、短信、一键认证、深度链接等开发者服务。截止到2019年12月份，极光已经为超过50万移动开发者和145.2万款移动应用提供服务，其开发工具包（SDK）安装量累计336亿，月度独立活跃设备13.6亿部。同时，极光持续赋能开发者和传统行业客户，推出精准营销、金融风控、市场洞察、商业地理服务产品，致力于为社会和各行各业提高运营效率，优化决策制定。