在前端开发中，我们有时需要将代码高亮显示。如果使用纯手工方式，可能会比较耗时且重复劳动。
在这种情况下，我们可以使用现成的 npm 包例如 ng-highlight 来解决这个问题。ng-highlight 可以自动将代码高亮，并可以选择不同的主题和语言。
安装方式
在安装之前，请确保已经安装了 npm 包管理工具。如果没有安装，可以通过以下命令在终端中安装：
$ npm install npm -g
接下来，我们可以通过以下命令在终端中安装 ng-highlight：
$ npm install ng-highlight --save
这个命令会将 ng-highlight 安装在项目的 node_modules 目录中，并将其添加到 package.json 文件中。
ng-highlight 的基本用法
安装完 ng-highlight 之后，我们可以在 Angular 应用中使用其提供的指令来高亮代码。
为了使用 ng-highlight，我们需要在组件的模板中引入它，并通过 [ngCssClass] 属性传递 CSS 类名。例如：
<pre [ngCssClass]="'language-javascript'">
<code>
// 这里是 JavaScript 代码
</code>
</pre>在这个例子中，我们使用了 pre 和 code 标签来包裹 JavaScript 代码块，并使用语言类名来告诉 ng-highlight 接下来要高亮哪一种代码。
但我们没有在组件中声明语言类名。这时候，我们需要引入 Prism.js 库，该库提供了所有可用的语言类名。
我们可以通过以下方式来引入 Prism.js：
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/components/prism-core.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/plugins/autoloader/prism-autoloader.min.js"></script>
在这个例子中，我们加载了 Prism.js 核心模块和自动加载模块。
ng-highlight 的更高级用法
ng-highlight 除了可以高亮代码块外，还可以对内联代码进行高亮。我们可以在组件中使用 ng-highlight 指令，并将代码块内容作为指令的输入参数来高亮内联代码。例如：
<span ng-highlight [content]='"var foo = 42;"'></span>
在这个例子中，我们使用 ng-highlight 指令并传入代码块作为参数，同时使用 content 属性来描述内容。
ng-highlight 还支持更多功能，例如多字节字符支持、自定义主题、文件路径高亮等。详情可参考官方文档。
总结
本文详细介绍了如何使用 npm 包 ng-highlight 高亮代码。我们首先介绍了 ng-highlight 的安装方式，随后讨论了基本用法和更高级用法。最后，我们介绍了 ng-highlight 的更多功能，并鼓励使用者查阅官方文档以了解更具深度的内容。
示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------------- ----------
----- ---------------- --------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------- ----------------------- ---------------------------- --
-------
------
------- ------------------------------------------------------------------------------------------------
------- --------------------------------------------------------------------------------------------------------------
---------------- -------
-------------
---- -------------------------------------
------
-- --- ---------- --
-------
------
-------------
----- ------------ --------------- --- - -------------
-------
-------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055b6f81e8991b448d8f4d