前言
前端开发离不开文本编辑的处理,在 web 应用中常常需要将 Markdown 格式的文本转化为 HTML,此时可以使用很多开源的包来处理,其中较为流行的是 marked 包。不过,在这里我们将介绍另一种功能更加强大的包 marked3。
marked3 简介
marked3 是一个基于 marked 的扩展包,它不仅可以将 Markdown 格式的文本转化为 HTML,还可以解析 HTML 格式的标签,实现更加丰富的文档展示效果。
安装
在使用 marked3 之前,需要先进行安装。使用 npm 命令即可完成:
--- ------- ------- ------
使用
接下来,我们就可以通过引入 marked3 包来处理文本了。
普通转化
首先来看一个最基础的使用示例:
----- ------- - ------------------- ----- -------- - -- ----- -------- ----- ---- - ------------------ ------------------
运行结果:
--------- -----------
上面的代码将 markdown 字符串转化为 HTML 字符串,并打印出来。
需要注意的是,在这个例子中,我们引入了 marked3 包,并将 markdown 字符串作为 marked3 函数的参数,函数返回的是最终转化得到的 HTML 字符串。
自定义解析器
我们可以通过自定义解析器实现更加强大的效果,下面将展示如何通过解析器渲染代码块:
----- -------- - --- ------------------- ------------- - -------------- --------- - ----- ---- - ------------------------ ----- ------------- - -------------------------- - -------- - ------------ ----- ----------- - ----------------------------- ------------ ------ ----------- ----------- ----------------------------------------------- -- -------------------- --------- --- ----- -------- - ---- ---- ---------------- ------------------ --------- -------- -------------------------------
运行结果:
------------- ---------- ----------- ----------------- ---------------------------------------------- -------------------------- ---------------- -------------
在这个示例中,我们先创建了一个 Renderer 对象并重写了其中的 code 方法,然后在设置 marked3 的选项时将其传递给 marked3,从而使 marked3 在转化代码块时能够调用我们自定的方法,并根据需要渲染输出。
需要注意的是,在这个示例中,我们使用了一个叫做 highlight.js 的包来渲染代码块,并将渲染后的代码用 pre、code 标签包裹起来进行输出。
自定义语法规则
我们还可以通过自定义语法规则来实现更加复杂的解析,下面将展示如何通过解析器来处理类似于标签的自定义语法规则:
----- -------- - --- ------------------- ----- -------- - -------- ----- ------------ ------------- - -------------- - ------ ---------------------- ------ ------------------------ -- -------------------- --------- --- ----- -------- - ---- ---- ------ --------------- --------------- -------------------------------
运行结果:
------------- --------- ----- ----------------------- -----------------
在这个示例中,我们在 Renderer 中重写了 text 方法,并使用正则表达式匹配了 [Tag]... [/Tag] 的格式。在匹配到这样的文本片段时,我们将它替换为带有样式的 HTML 标签,并输出转化后的结果。需要注意的是,在这里我们使用了正则表达式的 global 选项,从而使替换操作可以一次性进行匹配结果中的所有文本片段。
结语
通过本文的介绍可以看出,marked3 比 marked 在解析 markdown 的基础上,提供了更加强大的扩展功能,为开发者提供了更加多样化的选择。在使用 marked3 时,我们可以通过自定义解析器、自定义语法规则等方式来实现更加丰富的文档效果,从而将文档的呈现能力提升到更高的层次。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/5ef211eb8c4ce90ee4ca3b4e