在前端开发中，我们常常需要将一些数据以文档的形式呈现出来。手写文档无疑是一个力度颇大的工作。因此，我们可以使用npm包json2md将数据转换为Markdown格式的文档，从而方便地展示数据。
安装
我们可以通过命令行安装:
npm install json2md --save
使用
在使用json2md之前，我们需要构造一个数据结构，以表示我们要展示的数据。这个数据结构通常是一个数组，其中的每个元素表示一个需要呈现的块。每个块都有一个type属性，描述它的类型，以及一些额外的属性，用来描述这个块的具体内容。接下来，我们通过一个简单的例子来演示如何使用json2md。
例子
假设有一个简单的任务清单，我们需要将它以Markdown格式展现出来:
- 任务1
- 描述1
- 描述2
- 任务2
- 描述1
- 描述2
-- -------------------- ---- -------
----- ------- - -------------------
----- ---- - -
- ----- ----- ----- ------ --
-
----- -----
----- -
-
----- -----
----- -
- ----- ------- ----- ----- --
-
----- -----
----- -
- ----- ----- ----- ----- --
- ----- ----- ----- ----- --
--
--
--
--
-
----- -----
----- -
- ----- ------- ----- ----- --
-
----- -----
----- -
- ----- ----- ----- ----- --
- ----- ----- ----- ----- --
--
--
--
--
--
--
--
----- ----------- - --------------
-------------------------我们先引入json2md模块，然后构造了一个数据结构data。其中，第一个元素表示了一个一级标题，用h1这个type表示；第二个元素表示了一个有序列表，用ol表示，其中每个元素用li表示。
最后，我们调用json2md并传入数据，即可得到Markdown格式的文档:
# 任务清单 1. 任务1 - 描述1 - 描述2 2. 任务2 - 描述1 - 描述2
常见类型
下面列举了一些常见的类型及其用法：
h1-h6
一级标题到六级标题:
const data = [
{ type: 'h1', text: '标题1' },
{ type: 'h2', text: '标题2' },
{ type: 'h3', text: '标题3' },
{ type: 'h4', text: '标题4' },
{ type: 'h5', text: '标题5' },
{ type: 'h6', text: '标题6' },
];text
文本:
const data = [
{ type: 'text', text: '这是一段文本' },
];p
段落:
const data = [
{ type: 'p', text: '这是一段文本' },
];ul/ol
无序列表和有序列表:
-- -------------------- ---- -------
----- ---- - -
-
----- -----
----- -
- ----- ----- ----- ------ --
- ----- ----- ----- ------ --
--
--
-
----- -----
----- -
- ----- ----- ----- ------ --
- ----- ----- ----- ------ --
--
--
--代码块
const data = [
{
type: 'code',
text: `console.log('hello world');`,
},
];更多类型
更多类型的用法可以参考官方文档。
结语
通过使用json2md，我们可以方便地将数据转换为Markdown格式的文档，从而简化了开发工作。随着我们深入学习json2md，相信对于文档展示方面的工作也会变得更加得心应手。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedab2fb5cbfe1ea0610697