如果你正在为你的 TypeScript 项目定义代码高亮，那么 brush-typescript 这个 npm 包可能会对你有所帮助。它使用 highlight.js 以使代码高亮的方式呈现 TypeScript。
安装 brush-typescript
在你的项目的根目录下你可以使用下面的npm命令安装 brush-typescript 包：
npm install brush-typescript --save-dev
你也可以像这样使用 yarn：
yarn add brush-typescript --dev
引入高亮样式
首先，你需要在你的项目中引入 highlight.js。你可以从它的 github 仓库中下载最新的CSS文件：
https://cdn.jsdelivr.net/npm/highlight.js@latest/styles/default.min.css
当你安装了 brush-typescript 包之后，你还需要在你的代码中引入 brush-typescript 的样式。你可以在你的CSS文件中使用下面的代码：
-- -------------------- ---- ------- -- - --------------- - ----------------------------- -- ------- ------------------------------------------------------------------------------- -- - -------------------- -- ------ ----------------- -------- ---------------- ------------------------- ------------- ------------------ -
在你的 TypeScript 代码里使用 brush-typescript
当你引入了高亮样式之后，你就可以在你的 TypeScript 代码里使用 brush-typescript 了。
<pre><code class="typescript"> // 你的 TypeScript 代码 </code></pre>
记得在 HTML 文件中将 <pre> 标签设置成你想要的样式。现在你的 TypeScript 代码将使用 highlight.js 的样式高亮显示。
示例代码
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------- ---------- ---------------
----- ---------------- -------------------------------------------------------------------------------
-------
----- -
----------------- --------
----------------
-------------
------------------
-
--------
-------
------
---------- -------------------
--------- ------ -
----- -------
---------- -------
-
----- --- ---------- ------ -
----- -------
---------- -------
------- ------ -
------ ----- -------
-
-
----- ----- - --- ------
---------- - ---------
--------------- - --
-------------------------- -- ---- ----- ------
-------------
------- -------------------------------------------------------------------------------------
------- ------------------------------------------------------------------------------------------------------------
--------
-- --- ------------ - ----------------
------------------------------
----------------------------------- -----------------------------
---------
-------
-------
现在你已经知道了如何在你的项目中使用 brush-typescript，现在你可以在你的 TypeScript 项目中使用它来显示好看而有条理的代码高亮！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c8accdc64669dde528b