前言
当我们写技术文章时，代码的展示是非常重要的一部分。Markdown 虽然可以展示代码，但是默认的样式十分朴素，不能让代码焕发生机和美感。为了解决这个问题，我们可以使用 npm 包 markdown-code-highlighting，它可以对代码进行语法高亮，让代码更加美观易读。
安装
在使用 npm 包 markdown-code-highlighting 之前，我们需要先安装它。可以通过以下命令进行安装：
npm install markdown-code-highlighting
使用
安装完成后，我们就可以在 Markdown 中使用这个包了。在引入 Markdown 时，需要加入样式表和 JavaScript 文件。
<head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js/styles/atom-one-light.min.css"> <script src="https://cdn.jsdelivr.net/npm/highlight.js/lib/highlight.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/markdown-code-highlighting/dist/index.min.js"></script> </head>
引入样式表和 JavaScript 文件后，我们就可以在 Markdown 中使用代码高亮了。在展示代码时，需要在代码块的起始标签后加入语言类型的类名。例如，展示 JavaScript 代码时，可以在代码块的起始标签后加入类名“lang-js”。
```lang-js // JavaScript 代码
-- -------------------- ---- ------- --- ---------- ------------------------------------- -- ---- --------------- -------------------------- -------------- ---------- -------------------------------------- ----------- ---------- -- -- ---------- --- ------------------ ---------
效果：
```javascript
// 这是 JavaScript 代码块
console.log("Hello World!");总结
markdown-code-highlighting 包提供了非常便捷的代码高亮方法，让我们能够展示美观易读的代码。在使用时，只需要引入样式表和 JavaScript 文件，以及在代码块起始标签后加入语言类型的类名即可。希望这篇文章对大家学习前端技术有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60033