作为前端工程师,经常会遇到需要编写文档的场景。于是,我们需要一款轻量、易用、美观的文档生成工具。而这时,docsjs 就成为了我的首选。
什么是 docsjs?
docsjs 是一款基于 Markdown 语法生成静态文档的工具。使用 docsjs 可以快速生成美观的文档页面,帮助用户更好地学习和理解。docsjs 非常易于使用,只需要几行命令即可生成文档页面。
安装
使用 docsjs 需要先安装 Node.js,然后使用 npm 安装 docsjs。
npm install -g docsjs
使用
初始化项目
在使用 docsjs 生成文档前,我们需要先初始化项目。
docsjs init
执行以上命令后,会在当前目录下生成一个 docs 目录,用于存放文档源码。
写文档
在 docs 目录下,使用 Markdown 语法编写文档。可以在文档中添加一些自定义标记,用于指定标题、子标题、代码等。下面是一些常用的自定义标记。
标题
在 Markdown 文件中,以 #
开头的行表示一级标题,以此类推。然而,docsjs 提供了更方便的方式来定义标题。
<!-- 标题 --> # My Document
子标题
docsjs 支持在 Markdown 文件中添加自定义的子标题,只需要在行首添加三个减号(---
)即可。
<!-- 子标题 --> --- ## Subtitle
代码
在 Markdown 文件中添加代码块时,需要使用 ```
包裹代码。
<!-- 代码 -->
console.log('Hello, docsjs!');
自定义内容
如果我们需要在文档中添加自定义的内容,可以使用自定义标记。
<!-- 自定义标记 --> // BEGIN-SNIPPET my-custom-content <div class="my-custom-content"> ... </div> // END-SNIPPET
生成文档
在完成文档编写后,我们可以执行以下命令生成文档。
docsjs build
生成的文档会被存放在 _docs
目录下。
预览文档
执行以下命令,可以在浏览器中预览生成的文档页面。
docsjs serve
在浏览器中输入 http://localhost:3000
,即可浏览文档页面。
示例代码
下面是一个完整的文档示例,演示了 docsjs 的基本语法和使用。
-- -------------------- ---- ------- ---- -- --- - -- -------- ---- --- --- --- -- ------------ ------- -- -- ------- --------- ---- --- -- --- -- --- --- --------------- -------- --- ----- -- -------- ---- -- ---
sayHello('World');
### `add(a: number, b: number): number` Add two numbers. <!-- 代码 -->
add(1, 2);
<!-- 自定义内容 --> // BEGIN-SNIPPET my-custom-content <div class="my-custom-content"> This is my custom content. </div> // END-SNIPPET
console.log('Hello, docsjs!');
-- -------------------- ---- ------- ---- ------- ------ - ------- ------ ------------ -------- ----------------------------------------------------------------------------- -- -- ------ ----------------------------------------------- ------ -------------------- - ------------------------------------------------------------------------------ -------- ------------------------------------------------------------------------------------------------------------------------