在前端开发中，我们经常需要在网站或博客中使用代码块来展示代码段。代码块的呈现需要使用语法高亮库，而 @iktakahiro/markdown-it-prismjs 就是一款基于 markdown-it 的语法高亮插件，可以用于美化 markdown 文档和代码块。本文将为您介绍如何使用 @iktakahiro/markdown-it-prismjs。
安装
在开始使用 @iktakahiro/markdown-it-prismjs 之前，我们需要了解如何安装它。进入项目根目录，执行如下命令：
npm install @iktakahiro/markdown-it-prismjs
上述命令会下载所需的依赖包，并安装 @iktakahiro/markdown-it-prismjs。
使用方法
安装完毕后，我们需要进行一些配置才能在 markdown 中使用 @iktakahiro/markdown-it-prismjs。我们需要在项目中导入所需的包，通过配置在 markdown 中启用 @iktakahiro/markdown-it-prismjs。
导入包
以下是在项目中导入所需包的代码示例：
import MarkdownIt from 'markdown-it'; import prismjs from 'prismjs'; import loadLanguages from 'prismjs/components/index.js'; import markdownItPrism from '@iktakahiro/markdown-it-prismjs'; import 'prismjs/themes/prism.css';
以上代码中，我们导入了 markdown-it、prismjs、prismjs/components/index.js、@iktakahiro/markdown-it-prismjs 包，它们都需要在我们的项目中进行安装。
注意：如果你使用的是重构的项目，则上述代码导入的样式会失效，此时需要从 node_modules 中引用 prism.css 文件，可以使用如下代码：
<link rel="stylesheet" href="./node_modules/prismjs/themes/prism.css">
配置
在导入所需包之后，我们需要在 markdown 中使用 markdown-it-prism。请看下面的代码示例：
-- -------------------- ---- -------
----- -- - --- ------------
---------- -------- ----- ----- -
-- ----- -- ---------------------- -
--- -
------ ----- ------------------------------ ------------------------------------------------- ------------------------ ---------------------
- ----- ---- --
-
------ ---
--
---
----------------------- -
-------- -----------------
---以上代码中，我们实例化了 MarkdownIt，并将 highlight 函数传递给它。
在 highlight 函数内部，我们首先检查传递的语言是否存在，如果语言存在，则调用 Prism.js 进行语法高亮。最后，我们将语法高亮后的代码添加到 HTML 中，并返回呈现出来。
使用 md.use(markdownItPrism, { plugins: ['line-numbers'] }); 代码，我们可以启用代码行号。
示例代码
以下是使用 @iktakahiro/markdown-it-prismjs 渲染代码块的示例代码：
```javascript
function add(a, b) {
return a + b;
}
console.log(add(2, 3)); // 5-- -------------------- ---- ------- ---- ----------------------- - -------- ---------------- --- -------------------- ------------- - -------- ------ -- - - ------ - - -- - - - - ------------------ ---- -- -
总结
在本文中，我们介绍了如何使用 @iktakahiro/markdown-it-prismjs，首先介绍了如何安装该插件。接着，我们讲解了如何导入包和配置，在最后，在一段示例代码中展示了如何使用所学知识呈现代码块。希望本文对大家的学习和工作有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005671081e8991b448e350d