前言
在前端开发中，经常需要将 Markdown 格式的文本渲染成 HTML，并在网页中展示。通常，我们会使用类似于 marked 的 npm 包来实现这一功能。
不过，如果我们需要将 Markdown 转换成 JSON 格式，再进行一些自定义操作，比如增加自定义属性，那么 marked 包就不能满足我们的需求了。
这时，我们可以使用 gulp-marked-json 这个 npm 包，在 gulp 构建中轻松将 Markdown 转换成 JSON 格式，并进行自定义操作。
使用方法
安装 gulp-marked-json
使用 npm 命令安装 gulp-marked-json：
npm install gulp-marked-json --save-dev
引入 gulp 和 gulp-marked-json
在 gulpfile.js 文件中引入 gulp 和 gulp-marked-json：
const gulp = require('gulp');
const markedJSON = require('gulp-marked-json');定义 task
定义一个 markdown task 并使用 gulp.src() 来获取 markdown 文件：
gulp.task('markdown', function () {
return gulp.src('src/markdowns/*.md')
.pipe(markedJSON())
.pipe(gulp.dest('dist/jsons'));
});使用 gulp-marked-json
在 gulpfile.js 中定义的 markdown task 中，使用 gulp-marked-json 进行 Markdown 转换。
在默认情况下，gulp-marked-json 可以将 Markdown 转换为 JSON 格式。下面是一个简单的示例：
--- title: Hello World! date: 2022-01-01 --- # Hello World! This is my first post.
{
"title": "Hello World!",
"date": "2022-01-01T00:00:00.000Z",
"content": "<h1 id=\"hello-world\">Hello World!</h1>\n<p>This is my first post.</p>"
}在上面的示例中，我们使用 YAML 头部设置了 title 和 date 属性。注意，最终输出的 Markdown 中，这些属性也被包含在了 JSON 中。同时也生成了一个 content 属性，其中包含了 Markdown 转换后的 HTML。
增加自定义属性
例如，假设我们希望为转换后的 JSON 中添加一个 slug 属性（即用于 URL 的唯一标识符），可以使用 gulp-data 来实现：
-- -------------------- ---- -------
----- -------- - ---------------------
--------------------- -------- -- -
------ ------------------------------
----------------------- ------ -
------ -
----- ---------- -- ------ -------- ------------
--
---
-------------------
-------------------------------
---在上面的示例中，我们使用 gulp-data 为每个 Markdown 文件添加了一个 slug 属性，属性值为文件名（不带后缀）。
最终输出的 JSON 就包含了这个自定义属性：
{
"title": "Hello World!",
"date": "2022-01-01T00:00:00.000Z",
"content": "<h1 id=\"hello-world\">Hello World!</h1>\n<p>This is my first post.</p>",
"slug": "hello-world"
}使用其他 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