序言
在网页之中——尤其是在很多博客和技术文章——示例代码的重要性毋庸置疑。但是如果让你来思考如何增强示例代码的可读性呢？这时就可以考虑使用语法高亮插件，让代码在显示时更加易读。
本文将介绍 @11ty/eleventy-plugin-syntaxhighlight 这个npm包——一款实用的语法高亮插件。
@11ty/eleventy-plugin-syntaxhighlight 简介
@11ty/eleventy-plugin-syntaxhighlight 是Eleventy前端开发工具的插件之一。Eleventy是一款用于构建静态网站的工具，这个工具有着方便易用的API。
@11ty/eleventy-plugin-syntaxhighlight 在Eleventy基础之上增强了语法高亮效果，使得开发人员能够更加方便地优化网页体验。
安装
可以使用npm安装 @11ty/eleventy-plugin-syntaxhighlight ，使用如下命令：
npm install --save-dev @11ty/eleventy-plugin-syntaxhighlight
使用方法
使用 @11ty/eleventy-plugin-syntaxhighlight 进行语法高亮，需要进行下面的两项操作：
- 将插件作为Eleventy的插件之一，导入到Eleventy配置文件中；
- 配置插件，增强语法高亮效果。
具体而言，如下所示：
// 导入插件
const syntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight");
// 增强Eleventy的效果
module.exports = function(eleventyConfig) {
eleventyConfig.addPlugin(syntaxHighlight);
};然后，将 <pre> 代码块和 <code> 元素与语言信息关联。
例如，对于JS代码块，我们需要使用如下的格式：
<pre>
<code class="language-javascript">
// 这里放你的代码
</code>
</pre>而这时候，将 <pre> 和 <code> 中的内容作为字符串传递给语法高亮插件，就能够增强代码的可读性了。在这个例子中，<code> 元素的 class 属性就用于标明代码的语言类型。
示例代码
在下面的代码块，我们使用 @11ty/eleventy-plugin-syntaxhighlight 实现对JS代码块的高亮。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-----------------------------
-------
------
-----------------------
-----
----- ----------------------------
-------- ----------- -
------------------- -----------
-
---------------
-------
------
-------
-------这里的 console.log() 是一种特殊的方法，可以将文本输出到开发人员的控制台中。在这个例子中，我们使用 console.log() 输出了 "Hello, World!"。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedaf9db5cbfe1ea0611092