前言
在前端开发中,经常需要将 Markdown 格式的文本渲染成 HTML,并在网页中展示。通常,我们会使用类似于 marked 的 npm 包来实现这一功能。
不过,如果我们需要将 Markdown 转换成 JSON 格式,再进行一些自定义操作,比如增加自定义属性,那么 marked 包就不能满足我们的需求了。
这时,我们可以使用 gulp-marked-json
这个 npm 包,在 gulp 构建中轻松将 Markdown 转换成 JSON 格式,并进行自定义操作。
使用方法
安装 gulp-marked-json
使用 npm
命令安装 gulp-marked-json
:
--- ------- ---------------- ----------
引入 gulp 和 gulp-marked-json
在 gulpfile.js
文件中引入 gulp 和 gulp-marked-json:
----- ---- - ---------------- ----- ---------- - ----------------------------
定义 task
定义一个 markdown
task 并使用 gulp.src()
来获取 markdown 文件:
--------------------- -------- -- - ------ ------------------------------ ------------------- ------------------------------- ---
使用 gulp-marked-json
在 gulpfile.js
中定义的 markdown
task 中,使用 gulp-marked-json
进行 Markdown 转换。
在默认情况下,gulp-marked-json
可以将 Markdown 转换为 JSON 格式。下面是一个简单的示例:
--- ------ ----- ------ ----- ---------- --- - ----- ------ ---- -- -- ----- -----
- -------- ------ -------- ------- --------------------------- ---------- ---- ------------------------ -------------------- -- -- ----- ---------- -
在上面的示例中,我们使用 YAML 头部设置了 title
和 date
属性。注意,最终输出的 Markdown 中,这些属性也被包含在了 JSON 中。同时也生成了一个 content
属性,其中包含了 Markdown 转换后的 HTML。
增加自定义属性
例如,假设我们希望为转换后的 JSON 中添加一个 slug
属性(即用于 URL 的唯一标识符),可以使用 gulp-data
来实现:
----- -------- - --------------------- --------------------- -------- -- - ------ ------------------------------ ----------------------- ------ - ------ - ----- ---------- -- ------ -------- ------------ -- --- ------------------- ------------------------------- ---
在上面的示例中,我们使用 gulp-data
为每个 Markdown 文件添加了一个 slug
属性,属性值为文件名(不带后缀)。
最终输出的 JSON 就包含了这个自定义属性:
- -------- ------ -------- ------- --------------------------- ---------- ---- ------------------------ -------------------- -- -- ----- ----------- ------- ------------- -
使用其他 marked 选项
gulp-marked-json
支持在 marked
选项中设置其他选项,以满足更多需求。
例如,下面的示例中,我们使用 marked
的 renderer
选项将所有标题转换为带有 id
属性的 HTML 元素:
----- ------ - ------------------ ----- -------- - --- ------------------ ---------------- - -------- ------ ------ - ----- ----------- - ------------------------------------- ----- ------ ----------- ----------------------------------------- -- --------------------- -------- -- - ------ ------------------------------ ------------------ --------- --------- --- ------------------------------- ---
在这个例子中,我们将 renderer
对象传入 gulp-marked-json
,从而实现了带有 id
属性的 HTML 元素的自定义渲染。
总结
本文介绍了如何使用 gulp-marked-json
将 Markdown 转换为 JSON,并进行自定义操作的方法。我们了解了 gulp-marked-json
的基本用法,并学习了如何使用其他 marked
选项,以满足更多需要。
在实际项目中,你可以根据自己的需求,自由发挥 gulp-marked-json
的功能,用它来完成更多有趣的任务。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/63127