在前端开发过程中，可能会经常用到模板引擎来生成 HTML 页面。Nunjucks 是一个流行的 JavaScript 模板引擎，其可通过 npm 包的方式来使用。在此基础上，我们可以再加上一个叫做 nunjucks-highlight 的 npm 包，它提供了代码高亮的功能，让我们的模板代码更加美观易读。本文就是讲述如何使用 nunjucks-highlight.js 包的使用步骤和注意事项。
安装 nunjucks-highlight.js
首先需要先用 npm 安装两个包：nunjucks 和 nunjucks-highlight.js。
--- ------- -------- ------------------
使用 nunjucks-highlight.js
在安装了相关的包后，我们就可以在 JavaScript 中引入它们并使用。下面是一个简单的例子，用来演示如何使用 nunjucks-highlight.js。
----- -------- - --------------------
----- ---- - ----------------------------- --------------------------
-- --------- -------- -- --- ---------------------
--------------------
----------- -----
-------- -----
------ -----
-------- ----
----- -
----------- -----
--------- -----
-------------- ------
------------ ----
-
------------------------------------- --- ---------------------------在这个例子中，我们先通过 require 引入了 nunjucks 包和 hljs，这个 hljs 是通过调用 nunjucks-highlight 包里面的函数所返回的。然后，我们通过 nunjucks.configure() 函数来配置 nunjucks，同时还添加了一个用于代码高亮的扩展：HighlightExtension，这个扩展会在渲染模板的过程中进行代码高亮。
在模板中使用 nunjucks-highlight.js
在上面的例子中，我们已经将 nunjucks 配置为了支持使用 nunjucks-highlight.js，接下来我们需要修改我们的模板代码，以便支持代码高亮。我们可以通过使用 <highlight> 标签来将要高亮的代码包裹起来。以下是一个示例代码：
--------- -----
------
------
----- ----------------
------------ --------------
----- ----------------
-----------------------------------------------------------------------------------
------- -------------------------------------------------------------------------------------
-- ---------------------------- ------------- --
-------
------
---------------
----
-- --- --- -- ------- --
------ --- -------
-- ------ --
-----
-----------
-- -- -------------- - - --
---------------- - - ----------------
-- ----- --
------------
--------
------------------------------
---------
-------
-------其中，我们在 <head> 中引入了 highlight.js 的样式文件和脚本文件，紧接着是在服务器端使用 nunjucks-highlight.js 包中的 highlighters.highlight() 函数高亮代码段，这个函数取两个参数：要高亮的代码和所用的语言。然后，我们在模板中通过特定的 <highlight> 标签包裹起来要高亮的代码，这里我们只是做了一个简单的条件判断。最后，我们在页面的底部调用了 hljs.initHighlightingOnLoad() 函数来初始化高亮功能。
结论
在本文中，我们了解了如何使用 npm 包 nunjucks-highlight.js 来给 nunjucks 模板添加代码高亮功能。我们也进行了相关的示例代码演示，希望这篇文章对读者能有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60066f953d1de16d83a66caf