在前端开发中，常常需要在页面中展示代码，而展示代码最常用的方式就是高亮显示。@gerhobbelt/markdown-it-highlighted 是一款基于 markdown-it 的代码高亮插件。本文将详细介绍如何使用该插件，并提供示例代码。
安装与引入
首先，需要使用 npm 安装 @gerhobbelt/markdown-it-highlighted：
npm install @gerhobbelt/markdown-it-highlighted
然后，需要引入该插件并与 markdown-it 绑定：
import MarkdownIt from 'markdown-it' import highlightPlugin from '@gerhobbelt/markdown-it-highlighted' const md = new MarkdownIt() md.use(highlightPlugin)
通过上述代码，@gerhobbelt/markdown-it-highlighted 插件就已经成功引入并与 markdown-it 绑定了。
使用方式
使用 @gerhobbelt/markdown-it-highlighted 插件的方式非常简单，只需要在代码块的前面加上类似 ::: lang 的语法，即可实现代码高亮。
:::javascript
console.log('Hello, world!')上面的语法表示将 console.log('Hello, world!') 这段代码用 javascript 进行高亮显示。
除了 javascript，@gerhobbelt/markdown-it-highlighted 插件还支持其他语言的高亮显示，例如：typescript、css、html、xml、json、bash、graphql、nginx 等。
示例代码
下面是一个完整的使用示例代码：
-- -------------------- ---- -------
------ ---------- ---- -------------
------ --------------- ---- -------------------------------------
----- -- - --- ------------
---------- -------- ----- ----- -
-- ----- -- ----------------------- -
--- -
------ ----- ----------------------------------------- ---- --------------------------
- ----- ---- --
-
------ ----- ------------------------------------------------------------
-
--
-----------------------需要注意的是，如果需要使用上述代码，请先安装 highlight.js：
npm install highlight.js
总结
@gerhobbelt/markdown-it-highlighted 是一款非常方便的代码高亮插件，使用起来非常简单。本文中详细介绍了该插件的安装与引入、使用方式以及示例代码，希望能帮助大家更好地使用该插件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f02c870403f2923b035bd80