npm 包 remark-outline 使用教程

AI 编程助手,豆包旗下的编程助手,提供智能补全、智能预测、智能问答等能力,节省开发时间,释放脑海中的创造力,支持 VSCode,点击体验 AI

前言

在前端开发中,常常需要写文档或者笔记,而 markdown 是一种简洁、清晰、易于书写和阅读的文本格式,因此在编写文档或笔记时广泛应用。同时,由于 markdown 的结构相对简单,它很容易被转换成其他格式的文档,例如 HTML 或 PDF。因此,很多时候我们需要将 markdown 转换成其他格式的文档,这就需要涉及到 markdown 解析器。

在前端领域,有很多优秀的 markdown 解析器,例如 markedmarkdown-it 等,它们都非常强大,但在某些情况下,我们可能需要一些更加特殊化的功能。本文要介绍的 npm 包 remark-outline 就是一个这样的 npm 包,它可以帮助我们将 markdown 文档中的标题提取出来,生成一个文档大纲。

安装

首先,我们需要在项目中安装 remark-outline

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

使用

基本使用

remark-outline 的使用非常简单,它只提供了一个 Unified 插件,我们只需要在 markdown 解析过程中启用这个插件就可以了。

先看一个基本的示例:

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

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

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

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

输出:

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

可以看到,remark-outline 提取出了 markdown 文档中所有的标题,并生成了一个标题树形结构,其中每个标题都包括一个标题文本值(value)和标题层级(depth),同时每个标题还包括若干个子标题,其下标的层级比当前标题的层级深 1 级。

配置选项

remark-outline 提供了几个可选配置选项,可以根据实际需求来调整生成的大纲的效果。

maxDepth

指定大纲中标题的最大层级。默认为 6,即只提取出 1~6 级的标题。

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

输出:

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

可以看到,这里只提取出了 1~3 级的标题。

slug

指定是否在大纲中包含标题的 slug。默认为 false,即不包含 slug。

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

输出:

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

可以看到,在包含了 slug 之后,标题对象多了一个 slug 属性,值为标题的 slug 值。

prefix

指定大纲中标题的前缀。默认为空字符串 ''

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

输出:

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

可以看到,在添加了 prefix 之后,大纲中的每个标题都是以 prefix 拼接上原标题文本值得到的。

clean

指定大纲中标题文本是否需要去掉 Markdown 内联代码和链接中的内容。默认为 false,即标题文本会保留内联代码和链接中的内容。

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

- ---
-

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

输出:

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

可以看到,这里的大纲中标题文本中包含了链接和内联代码。

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

输出:

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

在添加了 clean: true 之后,大纲中的标题文本已经去掉了内联代码和链接中的内容。

总结

remark-outline 是一个非常实用的 npm 包,在前端开发中,用它生成文档大纲可以大大提高我们编写文档的效率,同时还能使整个文档结构更加清晰易懂。本文通过实际的代码示例介绍了 remark-outline 的安装和使用方法,同时也介绍了一些可选的配置选项,供读者调整生成的大纲的效果。希望本文对读者有所启发和帮助。

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


猜你喜欢

  • npm 包 oanda-adapter-v20 使用教程

    介绍 oanda-adapter-v20 是一个用于连接 OANDA V20 API 的 npm 包。它提供了一些有用的方法来访问 OANDA 提供的财务数据。在这篇文章中,我们将介绍如何安装和使用这...

    2 年前
  • npm 包 vm-log 使用教程

    前言 在前端开发中,我们经常需要在程序运行时进行调试和输出调试信息。如果这些信息不能有效地输出和记录,那么在调试程序时会变得非常困难。 幸运的是,有一个 npm 包叫做 vm-log,可以帮助我们在前...

    2 年前
  • npm 包 ng-dom-to-pdf 使用教程

    ng-dom-to-pdf 是一个简单易用的 npm 包,可以将 Angular 应用中的 DOM 元素转换为 PDF 文件。使用这个包可以在不改变页面布局的情况下,让用户方便地将页面保存为 PDF ...

    2 年前
  • npm 包 grunt-zino 使用教程

    前言 在前端开发中,为了提高开发效率和代码质量,我们经常会使用各种工具和框架。而 npm 作为世界上最大的开源软件库,提供了丰富的包供我们使用,其中就包括 grunt-zino,这是一个提供构建 Zi...

    2 年前
  • npm 包 upper-dot-case 使用教程

    在前端开发中,我们常常需要将字符串转换成特定的命名格式。upper-dot-case 是一个 npm 包,它可以将字符串转换成大写点连接的格式。本文将介绍该 npm 包的使用方法,并提供相关示例代码和...

    2 年前
  • npm 包 gulp-rev-change 使用教程

    介绍 gulp-rev-change 是一款基于 gulp 和 vinyl-fs 的 npm 包,用于解决前端项目中静态资源更新后缓存问题。通过给文件名添加 hash 值,可以使每个文件变得唯一,防止...

    2 年前
  • npm 包 Whirlwinds 使用教程

    什么是 Whirlwinds? Whirlwinds 是一个可以帮助前端开发者通过一系列简单的命令来生成可复用的组件的 npm 包。它的设计初衷是为了提高前端工作效率和减少重复性的工作。

    2 年前
  • npm 包 redis-lister 使用教程

    1. 前言 Redis 是一种开源的 Key-Value 存储系统,通常用于缓存、消息队列、会话管理等场景。 redis-lister 是一种基于 Node.js 的 Redis 订阅/发布工具,可以...

    2 年前
  • npm 包 promise-walk 使用教程

    前言 在开发前端应用程序时,我们经常遇到异步操作。异步操作是为了防止长时间的等待而设计的。在 JavaScript 中,Promise 是一种实现异步操作的工具。然而,当我们需要执行某些简单操作时,我...

    2 年前
  • npm 包 @ewancoder/angular-http 使用教程

    npm包@ewancoder/angular-http使用教程 本文将介绍如何使用 npm 包 @ewancoder/angular-http,该包为 Angular HTTP 模块的扩展,提供了...

    2 年前
  • npm 包 intern-dev 使用教程

    简介 Intern-dev 是一个 npm 包,用于在开发前端应用时进行单元测试、集成测试以及功能测试。它是基于 Intern 4 框架的增强版,为前端开发者提供了一个简单易用的测试框架。

    2 年前
  • npm 包 klayjs-noflo-npm 使用教程

    如果你是一名前端开发者,并且有一定的图形布局需求,那么 klayjs-noflo-npm 可能是你不错的选择。本文将详细介绍 klayjs-noflo-npm 的使用方法及使用实例。

    2 年前
  • npm 包 trowel-covers 使用教程

    trowel-covers 是一个前端开发中常用的 npm 包,它可以帮助我们快速创建 UI 组件的样式。在本篇文章中,我们将详细介绍 trowel-covers 的使用方法,并提供一个简单的示例代码...

    2 年前
  • npm 包 easy-tesseract-ocr 使用教程

    前言 在使用 OCR 技术进行图片、文字识别时,有时候会遇到困难,例如需要资源消耗大或者需要进行大量的样本训练,此时可以考虑使用现成的 npm 包来解决这些问题。而 easy-tesseract-oc...

    2 年前
  • npm 包 nayuta 使用教程

    简介 nayuta 是一个基于 React Native 的前端组件库。它提供了一些常用的 UI 组件和工具函数,帮助开发者更快速、简单地构建移动应用。 安装 可以通过 npm 或 yarn 安装: ...

    2 年前
  • npm 包 react-clipper 使用教程

    React-clipper 是一个方便图片裁剪的 npm 包,它提供了一个简洁易用的组件 ReactClipper,可以快速实现常见的图片裁剪功能。本文将详细介绍 ReactClipper 的使用方法...

    2 年前
  • npm 包 swagger-jsblade-json-schema-ref-parser 使用教程

    在前端开发中,我们经常需要与服务器端进行数据交互,而 Swagger 是一种很流行的 API 文档规范,可以方便地描述 API 的参数、返回值等信息,为前后端协作提供了很好的支持。

    2 年前
  • npm 包 wix-style-variables 使用教程

    在前端开发中,使用 CSS 变量能帮助我们更加方便地管理样式,同时提高代码复用性。wix-style-variables 就是一个用于定义 CSS 变量的 npm 包,它提供了许多预定义好的变量,可以...

    2 年前
  • npm 包 stylebuddy 使用教程

    什么是 stylebuddy? stylebuddy 是一个 npm 包,它提供了一些工具函数和 CSS 样式片段,以帮助前端开发者更快地开发出漂亮且易于维护的网页样式。

    2 年前
  • npm包jvalidator使用教程

    什么是jvalidator jvalidator是一个Javascript表单验证工具,它提供了一种轻量级的、简单、易于维护和扩展的方式来验证表单数据。 jvalidator的安装 使用npm命令即可...

    2 年前

相关推荐

    暂无文章