简介
在前端开发中，我们经常会遇到需要高亮展示代码的情况。而 markdown-it-highlightjs 就是一款能够实现代码高亮的 npm 包，它基于 highlight.js 实现了在 Markdown 文本中嵌入代码高亮的功能。
本篇文章将详细介绍如何使用 @gerhobbelt/markdown-it-highlightjs。
安装
通过 npm 安装 @gerhobbelt/markdown-it-highlightjs。
npm install @gerhobbelt/markdown-it-highlightjs --save
使用
@gerhobbelt/markdown-it-highlightjs 集成在 markdown-it 之中，因此我们需要先安装 markdown-it。在安装好 markdown-it 后，我们可以直接在项目中引入 @gerhobbelt/markdown-it-highlightjs。
-- -------------------- ---- -------
----- -- - -------------------------
----- ---- - ------------------------
----- --------------------- - -----------------------------------------------
----------------------------- ----------- ----- ----- -- -
-- ----- -- ----------------------- -
--- -
------ -------------------- -----------
- ----- ---- --
-
------ --- -- -----------------------
----我们可以通过以下代码将 markdown 转换成 html：
const result = md.render('# This is a markdown string with code samples');
console.log(result);在页面中使用时，可以将转换好的 html 直接插入到页面中即可。
配置
@gerhobbelt/markdown-it-highlightjs 提供了可定制的配置项，通过配置项我们可以对高亮展示效果进行更精细的控制。下面将介绍常用的配置项：
defaultLanguage: 默认代码语言，默认值为'auto'。autoDetect: 是否自动识别代码语言，默认值为true。codeWrap: 代码包裹元素，默认值为true。preWrap: pre 标签包裹元素，默认值为true。lineNumberStart: 首行行号，默认值为1。lineNumberClass: 行号样式名称，默认值为'line'。tabReplace: 是否将\t替换为空格，默认值为false。maxDepth: 最大语法嵌套深度，默认值为100。
下面是一个使用配置项的例子：
-- -------------------- ---- -------
----- -- - -------------------------
----- ---- - ------------------------
----- --------------------- - -----------------------------------------------
----------------------------- ----------- ----- ----- -- -
-- ----- -- ----------------------- -
--- -
------ -------------------- -----------
- ----- ---- --
-
------ --- -- -----------------------
-- ---------------- ------------- ----------- ------ --------- ------ -------- --------示例
下面是一个使用示例，展示了如何在 Markdown 文本中嵌入代码高亮：
```javascript
function add(a, b) {
return a + b;
}
console.log(add(1, 2)); // 3
```转换后的 html 代码如下：
<pre><code class="language-javascript">function add(a, b) {
return a + b;
}
console.log(add(1, 2)); // 3
</code></pre>我们可以在页面中将其展现为以下的形式：
function add(a, b) {
return a + b;
}
console.log(add(1, 2)); // 3结论
@gerhobbelt/markdown-it-highlightjs 是一款非常实用的 npm 包，它可以帮助我们在 Markdown 文本中嵌入代码高亮，提高文档的可读性和美观程度。通过本文的介绍和实际操作，相信读者们已经掌握了使用 @gerhobbelt/markdown-it-highlightjs 的技能，并能够在实际项目中灵活应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f02c870403f2923b035bd81