简介
在前端开发过程中，文档撰写是非常重要的一环，而 Markdown 是一种轻量级的标记语言，已成为大多数开发者撰写文档的首选。而 Markdown 中引入代码块时，为了更好的展示代码，需要使用特殊标记。如果代码片段较多，而且想要设置不同的代码高亮风格，这时候 remarkable-codegroup 这个 npm 包就可以帮助我们实现。
remarkable-codegroup 是一个在 remarkable 这个 Markdown 渲染器上添加代码片段插件的库，能够同时支持多种语言的代码高亮显示，并且可以自定义风格，增强文档的可读性。
本文将详细介绍该包的使用，包括安装、引入、使用方法和几个示例。
安装
我们可以使用 npm 内置命令进行安装 remarkable-codegroup：
npm install remarkable-codegroup
引入
在使用 remarkable-codegroup 之前，我们需要先引入该库：
const Remarkable = require('remarkable');
const codegroup = require('remarkable-codegroup');使用方法
使用 remarkable-codegroup，我们需要在 Markdown 中添加特殊的标记 @@ 来标识代码块，并且使用 data-filename 属性来指定代码块的语言类型，代码高亮的样式可以在选项中进行配置。具体方法如下：
-- -------------------- ---- -------
----- -- - --- ------------
----- -----
---------- -------- ----- ----- - -- -------
-- ----- -- ----------------------- -
--- -
------ -------------------- -----------
- ----- ---- --
-
------ --- -- ---------
-
---
----------------- -
------ ---------- -- ------
------ ------ ------- ------ -- ---------
---然后我们在 Markdown 中添加代码块标记 @@，语言类型用 data-filename 属性指定：
<p>以下是示例代码：</p>
<!-- @@data-filename=js -->
```js
console.log('Hello world!');
<div class="container"> <h1>Hello world!</h1> </div>
.container {
text-align: center;
padding: 2rem;
color: #999;
}以上的 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