简介
当我们在设计网页时，经常会需要在页面中呈现代码片段或者代码区域。bespoke-highlightjs 是一个帮助我们通过高亮显示呈现代码的 npm 包。它基于 highlight.js，允许使用多个风格和语言对代码进行高亮显示和呈现。
本文将提供详细的使用教程，让你快速掌握该 npm 包的使用方法，并让你了解其深入内部的工作机理。
安装
使用 npm 包管理工具安装 bespoke-highlightjs。
npm install bespoke-highlightjs --save-dev
使用
引入
在 HTML 文件中引入 highlight.js 和 bespoke-highlightjs 的 CSS 文件和 JS 文件。
<link rel="stylesheet" href="node_modules/highlight.js/styles/default.css"> <link rel="stylesheet" href="node_modules/bespoke-highlightjs/dist/bespoke-highlightjs.min.css"> <script type="text/javascript" src="node_modules/highlight.js/lib/highlight.js"></script> <script type="text/javascript" src="node_modules/bespoke-highlightjs/dist/bespoke-highlightjs.min.js"></script>
使用
bespoke-highlightjs 需要结合 bespoke.js，使用它来高亮呈现我们想要的代码区域。
var highlight = bespoke.plugins.highlight();
bespoke.from('#presentation', [
highlight
]);在 bespoke.js 中使用 bespoke-highlightjs 的代码非常简单。首先我们需要定义一个 highlight 对象，然后将其传入 bespoke.js。highlight 对象会从 HTML 文件中获取所有代码块，并对其进行高亮处理。
配置
下一步，我们可以配置 bespoke-highlightjs 的属性以满足我们的需求。
在 HTML 文件中，我们可以像下面这样配置 bespoke-highlightjs：
<div class="bespoke-highlightjs"> <pre><code class="language-javascript">CODE HERE</code></pre> </div>
当我们使用 bespoke.plugins.highlight() 时，bespoke-highlightjs 会自动扫描 HTML 文件中的 .bespoke-highlightjs 类型对象并将其从 pre 片段中提取出来，对其中的代码进行高亮处理。
在 JavaScript 文件中，我们可以这样配置 bespoke-highlightjs：
var highlight = bespoke.plugins.highlight({
// 要使用的高亮风格
style: 'tomorrow-night-eighties',
// 要高亮的代码语言
language: 'javascript'
});我们可以根据自己的需要来配置 style 和 language 属性。style 属性会在多个 highlight.js 风格中选择一个风格来高亮显示我们的代码，language 属性则选择要高亮显示的代码的语言种类。
我们也可以使用以下方法来管控配置：
bespoke.highlight.style('tomorrow-night-eighties');
bespoke.highlight.language('javascript');示例
有关如何使用 bespoke-highlightjs 的示例代码如下：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
--------------------
----- ---------------- ----------------------------------------------------
----- ---------------- -------------------------------------------------------------------------
------- ---------------------- ----------------------------------------------------------
------- ---------------------- --------------------------------------------------------------------------------
------- ---------------------- -----------------------------------------------------------
-------
------
---- ----------------------------
---------- ---------------------------------------------- ----------------------
------
--------
--- --------- - ---------------------------
------ --------------------------
--------- ------------
---
----------------------------- -
---------
---
---------
-------
-------结束语
bespoke-highlightjs 是一个非常优秀的 npm 包，让我们不需要手动调整代码高亮显示的样式，而将其作为插件使用会让代码显示更加清晰，增强代码的可读性和可维护性。希望能更好地运用这个插件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f89238a385564ab6d9f