本文将会介绍如何在 Angular 2 中使用 Angular2-highlight-js 这个 NPM 包来增强代码高亮度。
Angular2-highlight-js
Angular2-highlight-js 是一个基于 highlight.js 的程序库，它可以很方便地为 Angular 2 应用程序设置代码区域高亮度。
要使用 Angular2-highlight-js，需要首先安装它：
npm install angular2-highlight-js --save
配置 Angular2-highlight-js
安装后，需要在 AppModule 中导入 Angular2-highlight-js 模块，并将其添加到 imports 数组中：
-- -------------------- ---- -------
------ ---------- ---- ----------------
------ --------------- ---- ----------------------------
------ ------------------- ---- ------------------------
------ -------------- ---- ------------------
-----------
------------- -
------------
--
-------- -
--------------
-----------------
--
---------- ---
---------- --------------
--
------ ----- --------- - -使用 Angular2-highlight-js
一旦安装并配置完成后，就可以在模板中使用 Angular2-highlight-js 了。
首先需要使用 ngAfterViewInit 生命周期钩子来调用 initHighlightJs() 方法以初始化高亮特性：
-- -------------------- ---- -------
------ ----------- -------------- ---- ----------------
------ -------------------- ---- ------------------------
------------
--------- -----------
--------- -
---------- ------------------- -- ---- ---- -------------
-
--
------ ----- ------------ ---------- ------------- -
------------------- ------------------ ------------------- - -
----------------- -
------------------------------------------
-
-在代码块中，可以使用 highlight.js 中支持的任何类名称来指定代码块的语言，例如 class="typescript"。
高级用法
可配置的 highlight.js
可以使用 HighlightJsService 的配置选项来自定义 highlight.js 的高亮设置。例如可以调整代码块的背景颜色、字体大小和字体颜色：
-- -------------------- ---- -------
------ ----------- -------------- ---- ----------------
------ -------------------- ---- ------------------------
------------
--------- -----------
--------- -
---------- ------------------- -- ---- ---- -------------
-
--
------ ----- ------------ ---------- ------------- -
------- -------- --- - -
----------- - --
------------ --------
------ ------
---------- -------------- -------------
--
------------------- ------------------ ------------------- - -
----------------- -
------------------------------------------------
-----------------------------------------------
------------------------------------------
-
-动态加载代码
可以使用 HighlightJsService 的 highlightBlock() 方法来高亮动态加载的代码。例如，在加载数据后呈现的代码块就可以采用这种技术。
-- -------------------- ---- -------
------ ----------- -------------- ---- ----------------
------ -------------------- ---- ------------------------
------------
--------- -----------
--------- -
---- ---------------
--------------------------------
------
-
--
------ ----- ------------ ---------- ------------- -
------- ------- - ------
----- -------
------------------- ------------------ ------------------- - -
---------- -
--------- - -------------------- -----------
------------- -- -
----------------------------------------------------------------------
----------- - -----
-- -----
-
-总结
Angular2-highlight-js 是一个很好的 NPM 包，可以用于为 Angular 2 应用程序的代码块提供高亮度特性。本文介绍了它的安装、配置、使用和高级用法。
通过本文的学习，您可以为自己的 Angular 2 应用程序增加专业的代码高亮度效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65728