npm 包 documentation-markdown-api-theme 使用教程

在前端开发中,我们经常需要编写文档以及 API 文档,而 documentation-markdown-api-theme 是一个非常优秀的 npm 包,可以实现自动生成 API 文档并可以定制主题样式,这对于开发者来说非常方便。

什么是 documentation-markdown-api-theme?

documentation-markdown-api-theme 是一个基于 documentation.js 的 API 文档生成工具,可以将 jsdoc 样式注释转换成美观的 Markdown 或者 HTML 格式的 API 文档,并且支持自定义主题样式,使得 API 文档更加美观和易读。

documentation-markdown-api-theme 安装

在使用 documentation-markdown-api-theme 之前,我们需要先安装它:

--- ------- -------------------------------- ----------

安装完成后,我们就可以开始使用这个 npm 包了。

使用教程

接下来,我们展示如何使用 documentation-markdown-api-theme 来生成自定义主题样式的 API 文档。

1. 配置文件

我们需要新建一个 documentation.json 配置文件,来配置我们需要生成的 API 文档,同时也包含主题样式。

-
  --------- -
    -------- --- ------- --- ---------------
    -------- -----------------------------------
    ----------- -
      ------ ----
    --
    --------- -
      ------------- ------------
    -
  --
  --------- -
    ----------------- -------------------
    ----------------- ----------------
    ---------- -
      -------
    -
  --
  ---------- -
    ------------------
  --
  ----------- -
    --------------- ----
  -
-
  • config.title:指定 API 文档的标题。
  • config.theme:指定使用的主题样式。
  • config.markdown:指定 Markdown 的配置,这里使用了一个自动生成的目录。
  • config.styles.stylesheet:指定自定义样式的样式表。
  • source.includePattern:指定项目中需要包含的源码路径。
  • source.excludePattern:指定项目中需要排除的源码路径。
  • source.include:指定源码路径,这里使用模块化方式,可以添加多个。
  • plugins:指定生成文档的插件,这里使用了 markdown 插件。
  • markdown.idInHeadings:指定是否在标题中包含 ID。

2. 样式表

我们需要在项目中新建一个样式表,来定义 API 文档的样式。

-- ------ --
------ -
  ---------- -----
  ------------ -----
  ----------- -------
  ----------- -----
-

-- ----- -- -------- --
---- -
  ---------- -----
  ------------ -----
-

-- ------- ----- --
--------------- -
  ---------- -----
  ------------ -----
  ----------- -----
-

-- ------ ------- --
------------- -------------- -
  ---------- -----
  ------------ -----
-

-- ------ ----------- --
------------------- -
  ---------- -----
-

3. 命令行

我们可以使用以下命令生成 API 文档:

--- ------------- ------ ---------- -- -- -- ------ -------- ------------------

命令解释:

  • npx documentation:使用 documentation 包。
  • readme:指定需要生成的 README 文件,这里使用源码文件。
  • ./src/*.js:指定读取的源码文件路径。
  • -f md:指定生成的格式为 Markdown。
  • -o ./docs:指定生成文档的输出路径。
  • --config documentation.json:指定使用的配置文件。

4. 生成效果

通过以上步骤,我们就可以生成一份自定义主题样式的 API 文档。

以下是样式效果的部分截图:

总结

documentation-markdown-api-theme 是一个非常优秀的 npm 包,可以让我们方便的生成美观且易读的 API 文档,并支持自定义主题,使得文档更具有可读性与可维护性。这篇文章介绍了使用这个工具的所有必要步骤,想要使用该工具的读者们可以进行尝试并参考本文中的配置文件和样式表,定制自己项目的 API 文档。

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/72122


猜你喜欢

  • npm 包 browserify-livescript 使用教程

    在前端领域,使用 npm 包管理器是非常常见的。而 browserify-livescript 是一个优秀的 npm 包,它提供了一种将 LiveScript 转换为 JavaScript 并在浏览器...

    5 年前
  • npm 包 jsize 使用教程

    jsize 是一个小巧而灵活的 JavaScript 库,可用于获取浏览器中 DOM 元素的尺寸和位置信息。本文将介绍 jsize 的使用方法,让你更好地利用这个 npm 包。

    5 年前
  • npm 包 happner-assets 使用教程

    简介 npm 包 happner-assets 是基于 happner 构建的一个前端资源管理模块。它可以帮助开发者更好地管理前端资源文件,并实现前后端分离的开发模式。

    5 年前
  • npm 包 happngin-assets 使用教程

    随着前端开发的进步,我们经常需要在项目中引入各种资源文件,比如图片、样式和脚本等。为了更高效地管理这些资源,npm 上已经有了很多成熟的包供我们使用。 在本文中,我们将介绍一款名为 happngin-...

    5 年前
  • npm 包 grunt-dist 使用教程

    概述 在前端开发中,打包压缩是非常必要的,以提高网站加载速度,降低服务器带宽压力,减小页面体积等目的。而 grunt-dist 就是一款能够优化打包压缩过程的 npm 包。

    5 年前
  • npm 包 g5-component 使用教程

    React 组件是现代前端开发中不可或缺的一部分。它简化了开发流程,提高了组件重用性,同时也提高了代码维护性。在组件化开发的过程中,我们经常需要使用一些 UI 组件来实现交互效果。

    5 年前
  • npm 包 tweetnacl-nodewrap 使用教程

    前言 tweetnacl-nodewrap 是一个应用于 JavaScript 的 NaCl 库。NaCl(“Networking and Cryptography library”)是由 Danie...

    5 年前
  • npm 包 happner 使用教程

    前言 在前端开发中,我们常常会使用第三方的包来提高我们的开发效率。npm 是 Node.js 的包管理工具,它可以让我们很方便地安装和卸载各种包。在这篇文章中,我们将介绍一个名为 happner 的 ...

    5 年前
  • npm 包 skellyjs 使用教程

    介绍 skellyjs 是一个轻量级的前端 MVVM 框架,底层使用了 Virtual DOM 和 JSX 技术。skellyjs 的特点在于极其简单易用,但同时也具备足够的灵活性和可定制性。

    5 年前
  • npm 包 addjs 使用教程

    介绍 在前端开发中,我们需要经常引入一些外部JS库来辅助我们完成任务。npm 是一个非常流行的包管理工具,可以用来方便地下载和使用各种 JavaScript 模块。

    5 年前
  • npm 包 webgl-classes 使用教程

    如果你是前端开发人员,你一定知道 WebGL 技术。WebGL 是 JavaScript API,可为浏览器提供硬件加速的 3D 图形渲染。它使得网页应用可以实现流畅的 3D 图形效果。

    5 年前
  • npm 包 swint-helper 使用教程

    在前端开发过程中,我们常常需要使用一些便捷的工具来简化开发流程。npm 包 swint-helper 就是这样一种工具,它提供了一系列有用的辅助工具,能够极大地提高前端开发的效率。

    5 年前
  • npm 包 swint-builder-js 使用教程

    简介 swint-builder-js 是一个基于 Node.js 的 npm 包,能够在前端项目中自动化处理 JavaScript 文件的构建、压缩等工作,使开发者更加专注于代码开发。

    5 年前
  • npm 包 rinco 使用教程

    什么是 Rinco? Rinco 是一个用于在前端开发中快速生成基础结构的脚手架工具,它可以自动生成 HTML、CSS、JS 文件,同时也可以引入各种常用库和框架,省去了手动部署与配置的时间。

    5 年前
  • npm 包 soyie 使用教程

    简介 Soyie 是一个前端常用的 npm 包,它旨在提供一种高效的函数式编程体验。它包含了常用的数组、字符串、对象等操作的函数,并提供了丰富的工具函数。在日常开发中,使用 Soyie 可以提高开发效...

    5 年前
  • npm 包 ssdom 使用教程

    随着前端技术的不断发展,我们使用的工具、技术和方法也在不断更新。其中,npm 包作为前端开发的必备工具之一,大大提高了开发效率。本文将介绍一款 npm 包 ssdom,并详细讲解如何使用它。

    5 年前
  • npm 包 rnpm-plugin-link 使用教程

    前言 rnpm-plugin-link 是一个 npm 包,它提供了一种简单的方式去链接本地依赖到 React Native 项目中,它能够让你在本地开发 React Native 库时跳过发布过程,...

    5 年前
  • npm 包 rnpm-plugin-install 使用教程

    前言 rnpm-plugin-install 是一个基于 React Native 的 npm 包,它提供了一些有用的功能来辅助 React Native 的开发。

    5 年前
  • npm 包 rnpm 使用教程

    简介 rnpm 是一个 React Native 包管理工具,它可以帮助我们快速创建、安装、链接和卸载 React Native 包。这个工具使用起来非常方便,可以大大提高我们编写 React Nat...

    5 年前
  • npm 包 envirs-react-native-cli 使用教程

    介绍 envirs-react-native-cli 是一个基于 React Native 开发的命令行工具,它提供了一些方便使用的命令来管理 React Native 项目的环境变量。

    5 年前

相关推荐

    暂无文章