在 Web 开发中，我们经常需要对代码进行高亮展示。这种高亮展示不仅能让代码更加清晰明了，还可以使网站更加美观。而本文所介绍的 npm 包 ember-highlightjs-shim 就是一个解决高亮展示问题的工具。
什么是 ember-highlightjs-shim
ember-highlightjs-shim 是一个针对 Ember.js 前端框架的一个 npm 包，它提供了一种轻量级的方式来使用 highlight.js 库，帮助我们实现代码高亮显示。
highlight.js 是一种非常流行的语法高亮库，它支持几乎所有流行的编程语言和数据格式。同时，它还支持可自定义的 CSS 样式。
ember-highlightjs-shim 不仅提供了对 highlight.js 的封装和集成，还提供了 Ember.js 组件和辅助函数，更便于我们在 Ember.js 中实现代码高亮展示。
安装
首先，我们需要在项目中安装 ember-highlightjs-shim 包。可以使用 npm 命令进行安装：
npm install ember-highlightjs-shim --save-dev
注意，这里我们加了 --save-dev 的参数，因为该包只用于开发环境，不需要在生产环境的构建中使用。
安装完成之后，我们需要将 highlight.js 的 CSS 样式文件引入到项目中。你可以从 highlight.js 官方网站 下载使用，也可以使用 CDN 引入：
<!-- 引入样式文件 --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@10.5.0/styles/default.min.css">
使用
ember-highlightjs-shim 提供了两种使用方法。下面我们将分别介绍这两种用法及其使用方法。
方法一：使用组件方式
在使用组件方式时，我们需要在模板文件中使用 {{highlight-js}} 组件：
{{!-- 模板文件 --}}
{{highlight-js language='javascript'}}
console.log('Hello, world!');
{{/highlight-js}}这个例子展示了如何使用 {{highlight-js}} 组件来实现代码高亮，它会将 console.log('Hello, world!'); 这行代码高亮显示。
你可以通过将 language 参数设置为你所需要的编程语言，让 ember-highlightjs-shim 知道该如何进行高亮。
方法二：使用辅助函数方式
在使用辅助函数方式时，我们需要在模板文件中使用 highlight-js 辅助函数：
{{!-- 模板文件 --}}
<pre><code class="javascript">{{highlight-js "console.log('Hello, world!');"}}</code></pre>这个例子展示了如何使用 highlight-js 辅助函数来实现代码高亮，它和 {{highlight-js}} 组件有着同样的效果。其中 highlight-js 辅助函数的第一个参数为需要高亮的代码字符串。
更多配置
ember-highlightjs-shim 可以根据你的需要进行配置。你可以在你的 config/environment.js 配置文件中设置 highlightjs 属性，包括 language，theme，showLineNumbers 等选项。
例如：
-- -------------------- ---- -------
-- ---------------------
-------------- - --------------------- -
--- --- - -
-- ---
------------ -
--------- -------------
------ -----------------
---------------- ----
-
--
-- ---
--使用上面这个配置文件，我们可以将默认语言设置为 javascript，默认配色方案设置为 tomorrow-night，同时显示行号。
示例代码
最后，我们来看一下一个完整的代码高亮展示的示例代码：
-- -------------------- ---- ------- ----- ---- ---- ----- ---------- ---------- --------------------------------- ------------------- ------- ------- ---- ------- ------------------ ---- -------- ----- ----- ----- ------- ---------
-- -------------------- ---- -------
-- -- --
------ --------- ---- ---------------------
------ - ------- - ---- --------------------
------ - ------ - ---- ----------------
------ ------- ----- ----------- ------- --------- -
-------- -------- - ------
-------
------------ -
------------- - ---------------
-
--- ---------- -
------ ------------------ -- -------------
-
--- ------ -
------ -------------- -- ---
-
-以上代码展示了如何在 Ember.js 中实现一个代码高亮展示组件，并可以动态地隐藏或显示代码。其中使用的 {{highlight-js}} 组件和 highlight-js 辅助函数就是 ember-highlightjs-shim 提供的工具。
总结
ember-highlightjs-shim 提供了一种方便、灵活、易用的方式来实现代码高亮展示。通过学习本文介绍的内容，你已经可以在你的项目中集成该工具，并实现各种形式的代码高亮。
在使用过程中，还需要注意一些细节问题，例如 highlight.js 库的版本，样式文件的引入方式等等。但是只要你掌握了基本知识，这些问题都不会成为难题。祝你代码高亮展示愉快！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005672981e8991b448e3ab0