前言
在前端开发中，我们经常需要使用到语法高亮工具来为我们的文本、代码块等内容添加色彩，以便于用户阅读、理解和区分。而在使用语法高亮工具时，我们常常需要涉及到各种语言的支持，比如 JavaScript、CSS、HTML、PHP、Python 等等。
而本篇文章将要介绍的 npm 包 - prism-ejs-language，则是为我们提供了一种简单和高效的方式来支持 EJS （Embedded JavaScript Template） 的语法高亮。
简介
prism-ejs-language 是基于 prism.js 插件的一个 EJS 语法高亮 npm 包，可以很好地将 EJS 代码块渲染为高亮的 HTML 格式。使用它可以让 EJS 模板更加美观、易于阅读，并帮助我们更高效地工作。
安装
在使用 prism-ejs-language 之前，我们需要先在项目中安装它。
使用 npm 安装：
npm install prism-ejs-language --save-dev
使用
引入
将 prism-ejs-language 引入到项目中：
<link href="node_modules/prism-ejs-language/prism-ejs-language.css" rel="stylesheet"/> <script src="node_modules/prism-ejs-language/prism-ejs-language.min.js"></script>
代码块
使用 EJS 的语法书写代码块，并在代码块前添加 language-ejs 的 class 属性：
<h1>hello world</h1>
<code class="language-ejs">
<% for (let i = 0; i < arr.length; i++) {%>
<li><%= arr[i] %></li>
<% } %>
</code>初始化
在页面加载时，我们需要对 prism-ejs-language 进行初始化。使用 PrismEjsLanguage.highlightAll() 方法可以渲染所有的 EJS 代码块：
<body onload="PrismEjsLanguage.highlightAll()">
高级用法
自定义样式
可以通过覆盖 prism-ejs-language.css 的样式，自定义样式：
/* 自定义 EJS 样式 */
code[class*=language-ejs],
pre[class*=language-ejs] {
color: red;
font-size: 16px;
}自定义语法
prism-ejs-language 默认支持大部分 EJS 语法，但有些特殊的语法可能会被忽略，这时可以通过引入 ejs-language.js 来自定义语法。
引入方式：
<script src="node_modules/prism-ejs-language/ejs-language.js"></script>
使用方式：
<code class="language-ejs">
<%_ hello world _%>
</code>示例代码
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
------------------------- ------------
----- ------------------------------------------------------------- ------------------
-------
-- --- --- -- --
--------------------------
------------------------ -
------ ----
---------- -----
-
--------
-------
----- -----------------------------------------
--------- ----------
----- ---------------------
-- --- ---- - - -- - - ----------- ---- ---
------- ------ -------
-- - --
-------
----- ---------------------
--- ----- ----- ---
-------
------- -------------------------------------------------------------------------
------- ---------------------------------------------------------------
-------
-------结语
prism-ejs-language 是一款优秀的 EJS 语法高亮工具，能够为我们的 EJS 模板添加更多的色彩和美观度，让我们更高效地开发。如果您有更好的建议或意见，欢迎在评论区或 issue 中提出，谢谢！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60057c0a81e8991b448ebb24