npm 包 markedify 使用教程

1. 什么是 markedify

markedify 是一个将 marked 渲染的 Markdown 文本转换为带 syntax highlighting 的 HTML 输出的 npm 包。

2. 安装

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

3. 使用

3.1 构建 markedify 实例

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

codeClassPrefix 是可选的,它定义了渲染出的 code block 的 CSS 类的前缀。举个例子,如果你将 codeClassPrefix 设置为 language-,那么如下的 Markdown:

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

将会被转换成这样的 HTML:

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

3.2 渲染 Markdown

使用 markedify.render 方法来渲染 Markdown。这个方法接收一个字符串作为参数,返回一个字符串。如下所示:

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

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

3.3 渲染选项

markedify 渲染的选项可以在构建 markedify 实例时传入。这里列举一些常用的选项。

3.3.1 codeClassPrefix

定义了渲染出的 code block 的 CSS 类的前缀。如上所示。

3.3.2 codeClassName

定义了渲染出的 code block 的 CSS 类的名字。

3.3.3 codeBlockRenderer

指定一个函数作为渲染 code block 的方法。这个函数接收两个参数:code 和 lang,分别表示代码和语言(可能为空)。函数返回一个字符串,即渲染后的 HTML。如下所示:

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

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

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

这个例子使用了 highlight.js 包来对代码进行 syntax highlighting。

3.4 示例代码

下面是一个完整的示例代码。它读取一个 Markdown 文件,将其渲染为带 syntax highlighting 的 HTML,然后将结果写入一个 HTML 文件中。

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

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

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

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

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

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

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

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

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

4. 总结

markedify 是一个非常有用的 npm 包,可以让我们快速地将 Markdown 文本转换为带 syntax highlighting 的 HTML,方便我们在 Web 应用中展示文本。

在使用 markedify 时,我们可以根据自己的需要配置选项或自定义渲染方法以达到想要的效果。

希望这篇文章能够让你更好地了解 markedify,也希望你能够在实践中取得更进一步的进展。

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


猜你喜欢

  • npm 包 opt-merger 使用教程

    随着前端工程化的不断发展,越来越多的开发者愿意使用 npm 包来管理项目依赖。在这些依赖中,有很多会提供一些配置选项来满足不同的需求。然而,当我们使用多个包时,这些配置选项可能会有冲突或重复,而这就需...

    4 年前
  • npm 包 Browser-Sync-SPA 使用教程

    前言 当我们开发网站或者 Web 应用时,经常需要进行本地开发,调试,测试工作。而每次修改后刷新网页是十分费时间与精力的。这时候,自动刷新整个页面的 Browser-Sync 工具便是我们的救星,它可...

    4 年前
  • npm 包 @d3fc/d3fc-series 使用教程

    什么是 @d3fc/d3fc-series @d3fc/d3fc-series 是 D3.js 库的一个扩展,它提供了一系列数据可视化图表(线性图、面积图、柱状图等),可以方便地帮助前端开发者使用 D...

    4 年前
  • npm 包 @d3fc/d3fc-shape 使用教程

    前言 @d3fc/d3fc-shape 是 D3FC 中的一个 npm 包,它提供了丰富的 D3 矢量图形组件,能够帮助开发者更加便利地完成基于 D3 的数据可视化,减少重复的工作,提高开发效率和可维...

    4 年前
  • npm 包 @d3fc/d3fc-technical-indicator 使用教程

    @d3fc/d3fc-technical-indicator 是一个用于在 JavaScript 中计算技术指标的 npm 包。它能计算多达十几种指标,包括 MACD、RSI、SMA 等等。

    4 年前
  • npm 包 @d3fc/d3fc-webgl 使用教程

    @d3fc/d3fc-webgl 是一个用于 WebGl 可视化的 npm 包,可以帮助前端工程师构建可交互视觉化图表。它基于 D3.js 和 WebGl 技术,支持数据驱动的绘制方式,能够更加高效地...

    4 年前
  • npm 包 cfonts 使用教程

    介绍 cfonts 是一个简单易用的 npm 包,它允许我们在终端中以 ASCII 字体输出文字。该包拥有众多的字体可选,并且可以自己设计字体。cfonts 可以被广泛运用在命令行工具、脚本、开发环境...

    4 年前
  • npm 包 indent-log 使用教程

    在前端开发中,日志记录是经常做的一件事情。而在记录日志的时候,保持输出信息的易读性也是非常重要的。indent-log 是一个 npm 包,它可以帮助我们在控制台输出信息时自动添加缩进,使得输出信息更...

    4 年前
  • npm 包 js-crawler 使用教程

    前言 在前端开发中,信息爬取是很常见的需求。但如何进行爬取呢?使用 JS-crawler 这个 npm 包可以帮助我们轻松地实现爬取操作。本文将对 JS-crawler 进行详细的使用教程。

    4 年前
  • npm 包 plugin-jsx 使用教程

    在前端开发中,我们经常会使用各种 npm 包来加速开发进度。其中,plugin-jsx 是一个非常流行的 npm 包,它可以用于将 JSX 语法转换为纯 JavaScript 代码。

    4 年前
  • npm 包 neo-timer 使用教程

    在前端开发中,我们常常需要进行时间计算与延时等操作,npm 包 neo-timer 是一个提供了强大计时器功能的工具库,可以帮助我们快速实现想要的操作。本文将为大家讲解 neo-timer 的详细使用...

    4 年前
  • npm 包 `func-comparator` 使用教程

    func-comparator 是一个针对多个函数比较性能的 npm 包,通过测量函数执行时间和内存消耗来分析一个函数是否更优秀。本文将会介绍该包的安装、使用方法以及应用场景,帮助读者更好地使用此工具...

    4 年前
  • npm 包 mocha-parallel-executor 使用教程

    简介 mocha-parallel-executor 是一款基于 Mocha 的 npm 包,能够以并行的方式执行测试用例,大大提升测试速度。 安装 mocha-parallel-executor 安...

    4 年前
  • NPM 包 grunt-stripcomments 使用教程

    在前端开发中,注释是一个非常重要的部分。它可以帮助我们更好地理解代码,也可以帮助其他开发人员更快地了解代码。但是,在生产环境中保留大量注释会增加网页的加载时间,还会有安全风险。

    4 年前
  • npm 包 string-selection 使用教程

    在前端开发中,字符串是最常用的数据类型之一。在处理字符串的过程中,有时需要对其进行操作和选择,这时就可以使用 npm 包 string-selection。本文将介绍 string-selection...

    4 年前
  • npm 包 input-sim 使用教程

    简介 input-sim 是一个在前端中模拟用户输入的 npm 包,它可以帮助我们在自动化测试、模拟用户行为等场景中模拟输入操作,从而提高效率和准确度。 安装 我们可以通过 npm 包管理工具来安装 ...

    4 年前
  • npm 包 jquery-textcomplete 使用教程

    简介 jquery-textcomplete 是一款jquery插件,用于为文本输入框实现自动补全功能。它支持丰富的API和事件回调,还可以定制化和扩展。 安装 可以通过npm安装jquery-tex...

    4 年前
  • npm 包 stround 使用教程

    在前端开发中,有很多字符串操作需要用到,比如对字符串进行截取、替换、转换等。为了方便开发,我们可以使用 stround 这个 npm 包来完成这些操作。 stround 是什么 stround 是一个...

    4 年前
  • npm 包 fire-native-event 使用教程

    fire-native-event 是一个可以用于前端开发的 npm 包。它可以在 JavaScript 代码中帮助我们触发原生事件。这一技术可以有很多应用场景,例如在 Web 应用中使用 JavaS...

    4 年前
  • npm 包 add-event-handler 使用教程

    add-event-handler 是一个 npm 包,其可以让我们轻松地添加事件监听器并在需要时移除它们。在前端开发中,事件监听器是非常重要的功能之一,我们经常需要为一个元素添加点击、滚动、拖拽等操...

    4 年前

相关推荐

    暂无文章