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