npm 包 remarkable-codegroup 使用教程

简介

在前端开发过程中，文档撰写是非常重要的一环，而 Markdown 是一种轻量级的标记语言，已成为大多数开发者撰写文档的首选。而 Markdown 中引入代码块时，为了更好的展示代码，需要使用特殊标记。如果代码片段较多，而且想要设置不同的代码高亮风格，这时候 remarkable-codegroup 这个 npm 包就可以帮助我们实现。

remarkable-codegroup 是一个在 remarkable 这个 Markdown 渲染器上添加代码片段插件的库，能够同时支持多种语言的代码高亮显示，并且可以自定义风格，增强文档的可读性。

本文将详细介绍该包的使用，包括安装、引入、使用方法和几个示例。

安装

我们可以使用 npm 内置命令进行安装 remarkable-codegroup：

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

引入

在使用 remarkable-codegroup 之前，我们需要先引入该库：

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

使用方法

使用 remarkable-codegroup，我们需要在 Markdown 中添加特殊的标记 @@ 来标识代码块，并且使用 data-filename 属性来指定代码块的语言类型，代码高亮的样式可以在选项中进行配置。具体方法如下：

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

然后我们在 Markdown 中添加代码块标记 @@，语言类型用 data-filename 属性指定：

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

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

以上的 Markdown 源码会被渲染为如下的 HTML：

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

可以看到，remarkable-codegroup 成功将不同语言（在这个例子中分别是 JavaScript、HTML 和 CSS）的代码块进行了区分，并且使其具有不同的高亮显示。由于我们在常规的 <pre><code> 标签外部添加了一个 <div> 容器，因此可以通过定制容器样式进一步提高代码可读性。

示例

我们通过两个示例来更好的理解 remarkable-codegroup 的使用方法。

示例 1

在这个示例中，我们想要展示一个简单的导航栏的 HTML/CSS 代码，并且将其设置成橙色背景，灰色文字的风格。

Markdown 源代码如下：

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

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

使用 remarkable-codegroup 后，渲染出的 HTML 代码如下：

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

在这个示例中，可以看到，通过 remarkable-codegroup 我们成功将 HTML 和 CSS 代码分别进行了区分，并且正确的进行了高亮显示。而在 CSS 代码中，我们将导航栏设置成橙色背景和灰色文字，成功实现了代码样式的自定义。

示例 2

在这个示例中，我们将展示用于生成杨辉三角的 JavaScript 代码，并且将该代码进行了风格定制。

Markdown 源代码如下：

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

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

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

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

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

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

使用 remarkable-codegroup 后，渲染出的 HTML 代码如下：

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

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

在这个示例中，可以看到，通过支持 remarkable-codegroup 的 language 属性，我们成功的高亮了 JavaScript 中的关键字、函数和数字。而在 CSS 代码中，我们通过自定义 .hljs 样式，进一步提高了代码块的可读性。

结语

本文详细的介绍了如何使用 npm 包 remarkable-codegroup 进行代码高亮，以及如何在使用时自定义风格。通过实际应用，remarkable-codegroup 可以有效的提高 Markdown 文档的可读性和代码的可视性，促进文档的撰写和代码的阅读。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005622b81e8991b448df809

阅读全文

猜你喜欢

  • npm 包 animated-umd 使用教程

    在前端开发中，动画效果是一个非常重要的部分。为了帮助开发者更加便捷地实现动画效果，已经有很多的动画库和工具包问世。其中，npm 包 animated-umd 就是一个非常不错的选择。

    3 年前
  • npm 包 @typed/core 使用教程

    npm 是一个包管理器，可以帮助前端开发人员轻松管理包和模块。@typed/core 包是一个类型安全的函数式编程库，可以提高 JavaScript 代码的可读性和可维护性。

    3 年前
  • npm 包 angularjs-conekta 使用教程

    摘要 本文介绍了一个名为 angularjs-conekta 的 npm 包，该包可用于将 Conekta 支付集成到 AngularJS 应用程序中。本文涵盖了如何安装和配置 angularjs-c...

    3 年前
  • npm 包 node-request-wrapper 使用教程

    介绍 node-request-wrapper 是一个可以简单、方便地使用 Node.js 发送 HTTP(S) 请求的 NPM 包，它是一种基于 request 的封装，提供了更加易用的 API。

    3 年前
  • npm 包 isdc-components-test 使用教程

    在前端开发中，我们经常会用到各种 npm 包来增强代码的功能和复用性。isdc-components-test 是一个非常实用的 npm 包，它提供了一系列常用的前端 UI 组件，例如按钮、卡片、表格...

    3 年前
  • npm 包 jest-mock-object 使用教程

    前言 在前端开发中，我们会经常使用到各种各样的依赖库，以便更加高效地实现一个功能，其中 Jest 是一款非常优秀的前端测试框架，它可以帮助我们轻松地编写测试用例并进行测试。

    3 年前
  • npm 包 quarkit-mixin 使用教程

    介绍 quarkit-mixin 是一个常用于前端开发的 npm 包，它是 quarkit 中的一个模块。quarkit 是一个可重用的前端代码库，其中包含了很多实用模块，其中之一就是 quarkit...

    3 年前
  • npm 包 rapidgator 使用教程

    npm 是 Node.js 平台上的包管理程序，其中有许多优秀的第三方包可以使用。Rapidgator 是一个可以在命令行中使用的高质量图形化包装器，可以让前端工程师快速创建 Web 应用程序的图形化...

    3 年前
  • npm 包 @tessdata/bel 使用教程

    前言 在前端开发中，我们经常会用到 OCR 技术，而 tesseract-ocr 是一个广受欢迎的 OCR 引擎。但是，如果想要使用该引擎，需要一个语言文件，这个文件就是 @tessdata/bel。

    3 年前
  • NPM 包 @tessdata/ben 的使用指南

    简介 @tessdata/ben 是一个 NPM 包，提供了基于 Tesseract OCR 引擎的文本识别（OCR）能力，可以用于前端或后端的项目中。 安装 首先，需要在项目中安装 @tessdat...

    3 年前
  • npm 包 @tessdata/afr 使用教程

    前言 在计算机视觉领域，OCR（Optical Character Recognition）即光学字符识别技术，是一种将印刷体字符或手写体字符的图像文件转换成文本文件的技术。

    3 年前
  • NPM 包 @tessdata/ara 使用教程

    在前端开发过程中，有时需要用到 OCR（Optical Character Recognition，光学字符识别） 技术，将图片中的文字转化为计算机可以识别的文本。

    3 年前
  • npm 包 @tessdata/bul 使用教程

    介绍 在进行图像识别任务时，Tesseract 是一款广泛使用的 OCR 引擎。@tessdata/bul 是一个基于 Tesseract OCR 引擎所创建的 npm 包，它包含了 Tesserac...

    3 年前
  • npm 包 @tessdata/aze使用教程

    前言 近年来，机器视觉技术的发展越来越快，而实现文本检测、文本识别、OCR等应用中，文字定位是其中一个重要的过程。 @tessdata/aze 是一个 npm 包，提供了高精度（96.3%）的阿拉伯文...

    3 年前
  • npm 包 @tessdata/aze_cyrl 使用教程

    @tessdata/aze_cyrl 是一个由 Tesseract OCR 项目提供的 Aze 字符集的 Cyrillic 前端 npm 包。该包提供了该字符集的训练数据和语言文件，使得前端项目可以使...

    3 年前
  • npm 包 @tessdata/bod 使用教程

    在计算机视觉领域，OCR（Optical Character Recognition，光学字符识别）是一个非常重要的技术，可以将图像中的文本转换为可编辑的文本。Tesseract 是一个功能强大的 O...

    3 年前
  • npm 包 @tessdata/bos 使用教程

    前言 随着越来越多的人开始关注文本识别领域，Tesseract 成为了最为受欢迎的开源 OCR 引擎之一。而她的一个重要组成部分就是训练数据（Tessdata）。Tessdata 中包含了 Tesse...

    3 年前
  • npm 包 @tessdata/chi_tra 使用教程

    什么是 @tessdata/chi_tra？ @tessdata/chi_tra 是一个基于 Tesseract 的 OCR（光学字符识别）模块，用于识别繁体中文字符。

    3 年前
  • npm 包 @tessdata/ces 使用教程

    前言 在前端开发中，图像识别技术日益成熟，OCR（Optical Character Recognition，光学字符识别）也是其中之一，可以将图片中的文字转换为可编辑的文本。

    3 年前
  • npm 包 @tessdata/chi_sim 使用教程

    介绍 @tessdata/chi_sim 是一个用于 OCR（ optical character recognition，光学字符识别）的 npm 包。该包提供了一个中文语言包 @tessdata/...

    3 年前

相关推荐

    暂无文章