npm 包 nk-md 使用教程

介绍

nk-md 是一个基于 Node.js 的 Markdown 解析工具,可以让你将 Markdown 格式的文本转换为 HTML 代码。它提供了一系列的 API,方便你使用自定义的特性和扩展功能。

安装 nk-md

使用 npm 安装 nk-md:

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

安装完成后,你可以在你的项目中使用 nk-md。

使用 nk-md

基本使用

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

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

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

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

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

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

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

将会输出以下内容:

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

使用 nk-md 只需要创建一个 Markdown 实例,并使用 render 方法将 Markdown 格式的文本转换为 HTML 代码。你也可以添加一些自定义的特性和扩展功能,后面会讲到。

使用默认配置

尽管 nk-md 提供了许多自定义的配置项,但是在大多数情况下,你可以直接使用默认配置,无需进行任何配置:

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

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

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

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

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

自定义配置

Markdown 构造函数中,你可以传递一个配置对象,用来配置 Markdown 实例的行为。

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

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

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

- ---
- ---
--

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

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

配置项说明:

  • highlight:自定义高亮器,可以使用 highlight.js 等库实现。

  • smartLists:智能列表,可以自动识别有序列表和无序列表。例如,- 无序列表1. 有序列表

  • smartypants:智能引号和破折号转换。例如,-- 转换为 "foo" 转换为 “foo”

  • tables:表格支持。例如:

    - ---- - --- - ------ -
    - ---- - --- - ------ -
    - ---  - --  - ----   -
    - ---- - --  - ------ -
  • emoji:Emoji 支持。例如,:smile: 转换为 😄。

  • footer:页脚支持。

  • footnote:脚注支持。例如,[^1] 转换为脚注。

使用 nk-md 扩展

除了可以自定义配置,nk-md 还提供了许多扩展功能,可以在 Markdown 编辑器中使用。

以下是一些常用扩展:

Math

用于在 Markdown 中渲染数学公式。

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

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

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

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

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

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

Task List

用于在 Markdown 中添加任务清单。

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

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

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

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

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

Mermaid

用于在 Markdown 中绘制流程图、时序图等。

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

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

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

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

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

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

在使用 Mermaid 时,需要在浏览器中引入 Mermaid 库:

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

示例代码

完整代码:

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

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

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

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

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

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

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

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

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

你可以在这里 http://jsfiddle.net/fawno/3ajmc1qn/ 查看示例代码的效果。

总结

通过本文,你已经了解了如何使用 nk-md,以及 nk-md 的一些特性和扩展,希望这能对你在前端开发中使用 Markdown 有所帮助。

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


猜你喜欢

  • npm 包 frkskyweb 使用教程

    介绍 frkskyweb 是一款基于 Vue.js 的 UI 组件库,它具有高度可定制的特点,不仅提供了一些基础组件,还提供了丰富的样式和功能组件,非常方便前端开发人员快速搭建漂亮的界面。

    2 年前
  • npm 包 babel-preset-es2015-ie-native-modules 使用教程

    随着前端技术的发展,越来越多的开发者开始使用 ES6 语法。然而,由于不同浏览器对 ES6 语法支持不同,有些浏览器只支持 ES5 语法,这就导致了开发者需要对代码进行转换,以确保代码能够在各种浏览器...

    2 年前
  • npm 包 sequelize-paper-trail-scalio 使用教程

    简介 sequelize-paper-trail-scalio 是一个用于 Sequelize ORM 的数据库历史版本管理工具。它可以记录每次数据库操作的修改历史,并提供查询历史记录的接口,以便于追...

    2 年前
  • npm 包 cooking-apicloud-command 使用教程

    在前端开发中,常常需要使用一些工具来提高开发效率和代码质量。而 npm 包成为了前端开发者们最常使用的工具,其中 cooking-apicloud-command 是一个非常实用的 npm 包,它可以...

    2 年前
  • npm 包 ng-auto-validate 使用教程

    前言 在前端开发中,表单验证是必不可少的一个环节。有时候为了达到好的用户体验,我们需要在用户填写的时候及时提醒其填写错误的地方,这就需要我们用到动态验证。ng-auto-validate 是一个 An...

    2 年前
  • npm 包 extplug-autowoot 使用教程

    如果你在开发扩展插件或用户脚本的时候需要自动点赞功能,那么 extplug-autowoot 这个 npm 包会非常方便。它可以在插件中自动化处理点赞并提供额外的 API。

    2 年前
  • npm 包 extplug-chat-images 使用教程

    在前端开发中,我们经常需要在页面中展示图片。而当我们需要在聊天室等交互场景中进行图片展示时,我们通常需要借助一些工具来实现。extplug-chat-images 就是一个解决聊天室图片展示问题的 n...

    2 年前
  • npm 包 ui-listview 使用教程

    介绍 ui-listview 是一个基于 React 开发的可定制列表组件。它可以帮助开发者快速构建美观、高度定制化的列表,例如产品分类、商品列表、购物车等。 安装 您可以通过 npm 安装 ui-l...

    2 年前
  • npm 包 auv 使用教程

    介绍 AUV (Another Utility Library) 是一个轻量级的 JavaScript 工具库,它包含了大量的实用方法和函数,简化了前端开发的许多操作。

    2 年前
  • npm 包 kayo 使用教程

    简介 kayo 是一个基于 React 的组件库,提供了一些常用的 UI 组件,如按钮、表单、弹窗、抽屉等。使用 kayo 可以快速开发一个漂亮的前端界面,提高开发效率。

    2 年前
  • npm 包 machete-framework 使用教程

    在前端开发中,怎么能少得了不同的框架和工具呢?而其中一个不可或缺的工具就是 npm 包。在本篇文章中,我们将会介绍一个常用的 npm 包,即 machete-framework。

    2 年前
  • NPM 包 zonk 使用教程

    简介 zonk 是一款能够帮助前端工程师更好地处理错误的工具,它支持按照指定的条件对错误信息进行处理、上报和分析。这个工具的价值在于,能够让我们更迅速地找到问题并解决问题,从而提高开发效率。

    2 年前
  • npm 包 angular-terminal 使用教程

    介绍 angular-terminal 是一个基于 Angular 框架开发的命令行终端,它提供了一个交互式的 UI 界面,让用户可以像操作命令行一样在网页上使用一些基本的命令,如 ls 、cd、 m...

    2 年前
  • npm 包 inferno-datatable 使用教程

    在前端开发过程中,表格是一个非常常见的组件,而如何快速地构建出一个表格通常是一个必须要解决的问题。inferno-datatable 是一个使用 Inferno 框架开发的表格组件,它可以通过 npm...

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

    react-view-controller 是一款 React 组件库,它提供了一个可插拔的页面视图控制器,使得开发者可以更加便捷地管理和切换不同的页面视图。 在本篇文章中,我们将会详细介绍 reac...

    2 年前
  • NPM 包 27MHz 使用教程

    在前端开发中,我们经常会使用各种 NPM 包来辅助我们开发。今天我们要介绍的就是一个名叫 27MHz 的 NPM 包。 什么是 27MHz 27MHz 是一个用于前端开发的 NPM 包。

    2 年前
  • npm包 node-js-info-bubble 使用教程

    什么是node-js-info-bubble? node-js-info-bubble是一个基于Node.js的开源JavaScript库,它可以为网页中的元素弹出带有提示信息的气泡。

    2 年前
  • npm 包 mit-city-select 使用教程

    前言 现今,在前端开发中,好的工具包可以极大地提高工作效率。而 npm 包 mit-city-select 就是一款优秀的地区选择插件,它支持多种场景下的使用,可以帮助前端工程师快速构建地区选择功能。

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

    前言 Node.js 是现在前端领域非常流行的技术,它可以让我们开发出高效、稳定的 web 应用。而 npm 包则是 Node.js 世界的核心元素之一,它可以帮助我们在自己的项目中高效地管理和使用各...

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

    前言 React 是一个快速流行的前端框架,它让开发者更加方便快捷地构建复杂的 Web 应用程序。而 npm 是 JavaScript 包的默认包管理器,它可以轻松获取各种开源的 JavaScript...

    2 年前

相关推荐

    暂无文章