在前端开发中，Markdown 是一种常用的文本格式，而且模板语法简单，所以在编辑 README 文件或个人博客的时候也比较普遍，但是 Markdown 中无法直接对代码进行高亮处理，这时候就需要借助一个 npm 包——markdown-highlight-html。
在本文中，我们将会介绍如何在前端应用中使用 markdown-highlight-html 包，以及如何在你的 Markdown 文章中使用代码高亮。
markdown-highlight-html 详解
markdown-highlight-html 支持多种语言的代码高亮，同时还支持自定义样式。
语言支持：
- javascript
- css
- html
- python
- ruby
- C#
- bash
- sql
- markdown
样式
- 默认样式：github
- 支持自定义
使用教程
我们将使用 webpack 构建一个简单的前端项目并引入 markdown-highlight-html 包。首先，我们需要在项目中安装 markdown-highlight-html 包。在终端输入以下命令：
npm install markdown-highlight-html --save
安装完成后，我们需要在 webpack 中配置规则，以便让 webpack 能够识别和解析 markdown 文件，同时还要对代码片段进行高亮处理。
-- -------------------- ---- -------
-------------- - -
-- ----------
------- -
------ -
-
----- -------- -- -- --- --
------- ---------------------------------
-------- -
-- ------ --
--
--
-
----- ----------------
---- -
---------------
-
------- -------------
-------- -
-------------- --
--
--
-----------------
--------------
--
--
--
--
--我们需要通过 webpack 的 loader 规则来将 markdown 文件转化成 html 格式，并且高亮显示其中的代码片段。其中，markdown-highlight-html-loader 用于将 markdown 文件转换为包含代码高亮的 html 文件，我们需要在 webpack 中安装此 loader：
npm install markdown-highlight-html-loader --save-dev
在以上配置中，除了 test 属性用于匹配 .md 文件外，还可以配置多种自定义参数，用于指定生成的 html 标签和样式名等等。具体语法可以在 markdown-highlight-html-loader 官网中查看。
Markdown 整合代码高亮
现在我们已经成功引入了 markdown-highlight-html 包并在 webpack 中配置了相关规则，下面我们将介绍如何在 markdown 文章中使用代码高亮。
我们以 javascript 代码块的高亮为例。使用 markdown 原生语法以及高亮标记，如下所示：
```javascript
console.log("hello markdown-highlight-html");经过以上语法转换后，我们得到一个由 markdown-highlight-html 自动生成的 html 网页，并且代码片段已经被高亮处理：
<pre class="markdown-highlight-js"><code> <span class="hljs-built_in">console</span>.log(<span class="hljs-string">"hello markdown-highlight-html"</span>); </code></pre>
最后在放入你的 web 页面中即可。
总结
markdown-highlight-html 提供了非常简单优美的解决方案，能够让我们轻松地在 markdown 中使用代码高亮。同时，它还提供多种语言的代码高亮，并支持自定义样式。
希望这篇文章能够对你有所指导，如果你在使用 markdown-highlight-html 过程中遇到问题，也欢迎来尝试本文提供的解决方案。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055b1281e8991b448d8bc4