简介
angular-highlightjs 是一个可以在 Angular 应用程序中集成 highlight.js 的 npm 包，可实现代码高亮的功能。该包提供了一种简单的方式来将代码高亮应用于 Angular 应用程序中的各种组件。
安装
首先，在你的 Angular 应用程序中安装 angular-highlightjs：
npm install angular-highlightjs --save
然后，在你的 app.module.ts 文件中添加以下代码：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ------------ - ---- ------------------
------ - ---------------- ----------------- - ---- ----------------------
-----------
-------- --------------- -----------------
------------- ---------------
---------- -
-
-------- ------------------
--------- -
-- -- ------------ -------
------ --------
-
-
--
---------- --------------
--
------ ----- --------- --通过以上代码，我们将 HighlightModule 添加到了 imports 数组中，这样就可以在 Angular 组件中使用它了。此外，我们还为 HIGHLIGHT_OPTIONS 提供了配置对象，用来设置 highlight.js 的样式。
基本用法
在模板中使用
在 Angular 模板中，为了将代码高亮应用于某个元素，我们需要添加类名 hljs 并指定所需的语言。例如：
<pre><code class="hljs javascript">{{ code }}</code></pre>上面的代码将会高亮显示 {{ code }} 中的 JavaScript 代码。
在组件中使用
为了在组件中使用 angular-highlightjs，我们需要注入 HighlightService，然后使用它提供的方法对代码进行高亮。例如：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---------------- - ---- ----------------------
------------
--------- -----------
--------- ----------- ------------------ ----------------------------------------
--
------ ----- ------------ -
---- - -------------------- -----------
------------------- ----------------- ----------------- --
----------------- -
-- ----------- --- -----
----------------------------------------------
-
-在以上代码中，我们注入了 HighlightService 并在模板中使用了 highlight 指令来高亮显示代码。同时，我们还指定了 language 属性来告知 highlight.js 我们需要高亮显示的语言。
高级用法
设置选项
angular-highlightjs 提供了一些选项可以进行配置，在 HIGHLIGHT_OPTIONS 对象中设置这些选项即可。以下是一些常见的选项：
-- -------------------- ---- -------
-
-- -- ------------ -------
------ ---------
-- ------------ --------
----- -----
-- ------------------ --------
------------- -----
-- ---------- ---------
------------ ------
-- ---------------- ---------- - -------------
----------------- -----
-- ---------------- ---------
--------- ------
-- ---------------- ---------
-------- ------
-- --- --- --------------
----------- -
----- ----------
----------- ---------------------
-
-使用其他主题
angular-highlightjs 默认提供了一些主题，如 vs2015、github 等。如果你想使用自己的主题
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/37322