序言
在网页之中——尤其是在很多博客和技术文章——示例代码的重要性毋庸置疑。但是如果让你来思考如何增强示例代码的可读性呢？这时就可以考虑使用语法高亮插件，让代码在显示时更加易读。
本文将介绍 @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 ，使用如下命令：
--- ------- ---------- -------------------------------------
使用方法
使用 @11ty/eleventy-plugin-syntaxhighlight 进行语法高亮，需要进行下面的两项操作：
- 将插件作为Eleventy的插件之一，导入到Eleventy配置文件中；
- 配置插件，增强语法高亮效果。
具体而言，如下所示：
-- ---- ----- --------------- - ------------------------------------------------- -- ------------- -------------- - ------------------------ - ------------------------------------------ --
然后，将 <pre> 代码块和 <code> 元素与语言信息关联。
例如，对于JS代码块，我们需要使用如下的格式：
-----
----- ----------------------------
-- -------
-------
------而这时候，将 <pre> 和 <code> 中的内容作为字符串传递给语法高亮插件，就能够增强代码的可读性了。在这个例子中，<code> 元素的 class 属性就用于标明代码的语言类型。
示例代码
在下面的代码块，我们使用 @11ty/eleventy-plugin-syntaxhighlight 实现对JS代码块的高亮。
--------- -----
------
------
----- ----------------
-----------------------------
-------
------
-----------------------
-----
----- ----------------------------
-------- ----------- -
------------------- -----------
-
---------------
-------
------
-------
-------这里的 console.log() 是一种特殊的方法，可以将文本输出到开发人员的控制台中。在这个例子中，我们使用 console.log() 输出了 "Hello, World!"。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5eedaf9db5cbfe1ea0611092