什么是 kramed
kramed 是一个 JavaScript 库，它可以把 markdown 文本渲染成 HTML 页面。kramed 被广泛使用于前端项目中，尤其是将 markdown 文档展示在页面中。
如何安装 kramed
安装 kramed 很简单，只需在命令行中输入以下命令即可：
--- ------- ------
如何使用 kramed
首先，在你的 HTML 文件中引入 kramed：
------- ---------------------------------
接下来，在你的 JavaScript 文件中使用 kramed 来把 markdown 文本转换成 HTML 代码：
--- ------------ - -- ---- -- - --------------- -- - ------------ --- -------- - ---------------------
此时，htmlText 的值为：
-------- -- - ------------ ------- -- - --------------
在上面的例子中，我们使用了 kramed 的最基本用法。但是 kramed 还提供了各种配置和扩展，可以让我们更加灵活地控制渲染结果。
kramed 的配置和扩展
配置 kramed
kramed 的配置通过一个对象来实现。以下是一些常用的配置项：
gfm：启用 GitHub 风格的 markdown。tables：启用表格支持。breaks：启用换行符的支持。允许我们在行尾插入一个空格来实现换行。smartypants：启用智能标点转换，使得一些特殊字符例如'、"、-等等可以方便的被渲染，并且在输入latex数学公式过程中非常具有帮助。
我们把配置项传递给 kramed 的构造函数即可。例如：
--- ------- - - ---- ----- ------- ----- ------- ----- ------------ ----- -- --- ------------ - -- ---- -- - --------------- -- - ------------ --- -------- - -------------------- ---------
扩展 kramed
kramed 还提供了各种扩展选项，我们可以通过这些选项来扩展 kramed 的功能，以下是一些常用的扩展选项：
渲染器
渲染器用于把 Markdown 格式的文本渲染成 HTML 代码。kramed 默认提供了两种渲染方式：基本渲染器和 GFM 渲染器。基本渲染器对 Markdown 的解析比较简单，只支持一些基本的语法；而 GFM 渲染器更加强大，支持更多的语法扩展。
我们可以自己定义渲染器来实现更加复杂的渲染功能。例如，下面的代码定义了一个新的渲染器，它可以把 Markdown 中的 ## 变成 HTML 的标题：
--- -------- - --- ------------------ ---------------- - -------- ------ ------ - ------ ---- - ----- - ---- ------- - ---- - ---- - ---- - --------- - ----- - ---- -- --- ------------ - --- ---- -- - --------- --- -------- - -------------------- - --------- -------- ---
Lexer
Lexer 用于将 markdown 文本解析成 tokens，这些 tokens 最终会被渲染成 HTML 代码。我们可以通过修改 Lexer 来实现自己的语法解析。
例如，下面的代码通过重写 Lexer 中的 rules.checkbox 方法来实现了对复选框的支持：
--- ----- - --- --------------- -------------------- - -- ------ --- --- --- ------------ - -- --- ---- -- - ------- ----------- - - ---- -- -- --------- ------------ --- -------- - -------------------- - ------ ----- ---
解析器
解析器负责根据 tokens 生成 HTML 代码。我们可以通过自定义解析器来实现更加灵活的 HTML 生成。
例如，下面的代码通过定义一个自定义的解析器来实现了表格中的背景色渲染：
--- ------------- - --- ------------------ ----------------------- - -------- --------- ------ - --- --------------- - ------------ - ------ - -------- ------ ---- ------------------------ - - --------------- - ----- - ------- - -------- -- --- ------------ - -- ------ - - ------ - ---- -------- - -------- ---- ------- - - ------- - --- --- -------- - -------------------- - --------- ------------- ---
结语
通过上面的介绍，我们已经了解了 kramed 的基本用法、配置选项以及扩展机制。希望本文对大家有所帮助，如果对于 kramed 的使用还有疑问，可以参考 kramed 的官方文档（https://github.com/GitbookIO/kramed）或者在社区中寻求帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5ef71fad403f2923b035b8f1