npm 包 tm-marked 使用教程

在现代 web 开发中,前端技术已经不再只是简单的 HTML 和 CSS,越来越多的开发者投入到了前端领域中。而在前端开发过程中,Markdown 已经成为了一种流行的文档格式。Markdown 的语法简洁易懂,用来写技术文档非常方便。在实际开发时,我们常常需要将 Markdown 文档转换成 HTML,这就需要用到一个非常好用的 npm 包:tm-marked。

tm-marked 是一个简洁高效的 Markdown 转 HTML 工具,使用方便,对开发速度和文档编写都有极大的帮助。接下来我们将详细介绍它的使用教程。

安装

使用 tm-marked 前,需要先安装依赖包 npm。以 Ubuntu 系统为例,安装 npm 可以通过以下命令:

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

安装完成后,即可使用 npm 安装 tm-marked:

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

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

基本用法

tm-marked 的基本用法非常简单,只需要引入模块,然后使用一个简单的 API 就可以将 Markdown 转换成 HTML:

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

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

上述代码中,我们使用 console.log() 显示了将 Markdown 的 # hello world 转换成的 HTML 代码结果。结果显示了 <h1> 标签和对应的文本内容 hello world

高级选项

tm-marked 还提供了一些高级选项,可以让我们更加灵活的配置 Markdown 渲染方式。以下是一些常见的高级选项:

highlight

我们可以使用 highlight 选项让 tm-marked 支持更好的代码高亮效果。具体使用方式如下:

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

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

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

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

gfm

我们可以使用 gfm 选项让 tm-marked 支持更好的 GitHub 风格的 Markdown 渲染方式:

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

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

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

tables

我们可以使用 tables 选项让 tm-marked 支持 Markdown 表格:

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

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

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

sanitize

我们可以使用 sanitize 选项让 tm-marked 渲染出来的 HTML 代码更为安全:

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

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

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

结语

tm-marked 是一个非常好用的 npm 包,可以帮助我们在前端开发过程中更快、更方便地将 Markdown 转换成 HTML。通过上述教程,你已经掌握了 tm-marked 的基本用法和一些高级选项的使用方式。相信在实际工作中,你可以灵活应用它们,提高自己的开发效率。

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


猜你喜欢

  • npm 包 treactr-canvas-knob 使用教程

    treactr-canvas-knob 是一个基于 Canvas 实现的旋钮组件,可以在 Web 应用程序中用于用户输入和交互。本文将介绍 treactr-canvas-knob 的安装、使用、属性和...

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

    简介 ng-testbedder 是一款帮助 Angular 开发人员更加便捷地编写单元测试的 npm 包。使用这个包可以更加快速地搭建 Angular 组件的测试环境,简化单元测试的编写和运行过程。

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

    本文将介绍如何使用 altiore-react 这个 npm 包来开发一个前端应用程序。 这里我们将详细说明 altiore-react 这个包的功能、如何安装该包、如何使用该包来构建一个前端应用程序...

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

    本文将介绍如何使用 npm 包 open-ui-toolbox 开发前端 UI,该包包含了众多常用的 UI 组件和工具函数,可以大大简化前端开发过程,提高代码的复用性和效率。

    2 年前
  • npm 包 stateslang 使用教程

    简介 stateslang 是一个轻量级的 npm 包,用于管理状态机状态转换。状态机是计算机科学中一个经典的概念,用于描述基于特定输入对程序执行路径的决策。使用 stateslang 可以更容易地实...

    2 年前
  • npm 包 timecafe 使用教程

    简介 在前端开发中,我们经常需要使用时间操作来完成某些功能,比如时间转换、时间间隔计算等。npm 包 timecafe 是一个简单易用的时间操作工具库,能够方便地进行时间计算和格式化,可以大大提高开发...

    2 年前
  • npm 包 gulp-json5-to-json 使用教程

    前言 在前端开发中,我们经常需要使用到 JSON 格式的数据。JSON5 是 JSON 的拓展语法,它可以支持更多的数据类型和注释,可以更方便地编写和维护 JSON 文件。

    2 年前
  • npm 包 micro-radar 使用教程

    随着前端开发的快速发展和不断拓展,前端技术栈也不断涌现出各种新的工具和库。其中,npm 包 micro-radar 作为一个轻量级的实时监测工具,被广泛地运用于前端开发领域中。

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

    简介 ca-ui-themer 是一个可定制化的 UI 风格配色方案,通过引入该 npm 包并使用其中提供的 API 和组件,可以轻松地为前端应用添加定制化主题配色与样式。

    2 年前
  • npm 包 copy-loopback-auth0-jwt 使用教程

    前言 在开发前端应用时,常常会用到认证授权等功能。而使用 Auth0 作为认证平台,可以解决这些问题。本文将介绍一个基于 Auth0 的 npm 包 copy-loopback-auth0-jwt,该...

    2 年前
  • npm 包 package-alt 使用教程

    在前端开发中,npm 是一个非常重要的工具,它可以帮助我们管理依赖、打包、发布等。在这些 npm 包中,有一个非常有用的包,叫做 package-alt,它可以帮助我们更轻松方便地进行模块化开发和代码...

    2 年前
  • npm 包 npud 使用教程

    前言 在前端开发中,我们经常需要管理我们的项目中使用到的依赖包,最常见的方式就是使用 npm。npm 是 Node.js 的包管理工具,既可以用于从 npm 仓库(npm registry)下载安装我...

    2 年前
  • npm 包 pull-flatten-deep 使用教程

    前言 在进行前端开发时,我们通常会使用到很多第三方包来提高开发效率和代码可维护性。其中,npm 是一个非常流行的包管理器,可以帮助我们方便地安装、管理以及发布代码包。

    2 年前
  • npm 包 pull-http-router 使用教程

    介绍 npm 是 Node.js 的包管理器,是 Node.js 生态系统中重要的组成部分。在 Node.js 中,模块是 Node.js 应用程序的基本组成部分之一。

    2 年前
  • npm 包 pull-offset-limit 使用教程

    在前端开发中,我们经常需要从服务器上拉取数据并显示在页面上。而在一些特殊的场景下,我们需要控制拉取数据的数量和偏移量。这时,我们可以使用 pull-offset-limit 这个 npm 包来轻松实现...

    2 年前
  • npm 包 effect-dialog 使用教程

    前言 在现代的网页开发中,弹出框是一种经常使用的组件。然而,样式和交互的实现并不是那么简单,也不是每个网页开发者都想要自己手写这些功能。于是,出现了很多优秀的弹出框组件,其中 effect-dialo...

    2 年前
  • NPM 包 Flem 使用教程

    简介 Flem 是一个基于 Node.js 的前端自动化工具,我们可以使用它来自动化地运行构建任务,增加开发效率。使用 Flem,我们可以将源码转换为生产代码,自动化执行 CSS、JavaScript...

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

    前言 在前端开发中,为了提高效率和代码质量,我们通常会使用各种第三方库和工具。其中,npm 可谓是前端开发的必备工具之一。 本文想向大家介绍一个非常实用的 npm 包——react-concurren...

    2 年前
  • npm 包 treactr-slider 使用教程

    在现代网页开发中,轮播图经常被用来展示多张图片或信息,引导用户转移焦点。本文将介绍一个轮播图组件 treactr-slider 的使用方法。 安装 treactr-slider 可以使用 npm 安装...

    2 年前
  • npm 包 wechat-connector-for-botbuilder 使用教程

    前言 微信是目前中国最流行的社交媒体之一,许多企业和开发者都在使用微信公众号来推广和提供服务。对于那些拥有大量微信用户的企业和组织来说,为微信公众号开发聊天机器人是一个有意义的选择。

    2 年前

相关推荐

    暂无文章