markdown语法_十分钟定制自己的 Markdown 语法

前言

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


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

基本用法

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

f2666d77d6f425360aaad0591c6d193d.png

renderer对象

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


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

370ab929cac78e3828df293ea084af10.png

自定义Lexer Token

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


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

01 block对象

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

2c63ab4c2833c8352ef841e4d1df0527.png

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

02 Lexer.prototype.token

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

d71f26636fd1777f60ede8e829baaec8.png

ee08202e53973d02d6f55a34ea8adcfd.png

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

  • 入口函数

119bccfaa4cff360127e6479bde44579.png

  • Parser

0b1b577cdaad980951ff82f8340de849.png

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

03 添加自定义规则

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

举个栗子,我们希望把markdown语法里(((text)))字符串解析成text

首先我们在blocks里加上正则。(注:Lexer.token为块级解析,行内字符串规则需在inlineLexer中添加)

4da23376c3617ea0504607823a167f44.png

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

8f2839f22b5aa4f382b65d1673631b0a.png

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

5384943422a991fe4a80c2138a6a64c5.png

写在最后

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

1、如何变得更强?

扔掉手机1票25%扔掉女友2票50%扔掉头发1票25%您已投票 52ae698c62783f517ded848738f4ecab.gif

关于极光

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值