在前端开发过程中，我们经常需要展示一些代码片段，并对其进行高亮处理，来使代码更加清晰明了。而 brush-delphi 就是一个支持 Delphi 语言代码高亮的 npm 包，本文将介绍如何使用 brush-delphi 包。
安装
使用 npm 命令安装 brush-delphi 包：
npm install brush-delphi
使用方法
第一种方法：通过 HTML 的 style 标签设置样式
将代码片段包裹在代码块 <pre> 和 <code> 中，在 <code> 标签中添加 class="brush: delphi;" 属性，并在 HTML 的 <head> 标签中插入以下代码来引入 brush-delphi 样式：
<head> <link rel="stylesheet" type="text/css" href="./node_modules/brush-delphi/styles/shCoreDefault.css"> <script type="text/javascript" src="./node_modules/brush-delphi/scripts/shCore.js"></script> <script type="text/javascript" src="./node_modules/brush-delphi/scripts/shBrushDelphi.js"></script> </head>
然后在 <script> 标签中调用 dp.SyntaxHighlighter.HighlightAll('delphi'); 即可：
-- -------------------- ---- -------
------
-----
----- ------------- ---------
------- ------
--------- --------
-----
--------------- ---------
----
-------
------
------- -----------------------
--------------------------------------------
---------
-------第二种方法：通过 JavaScript 设置样式
在 JavaScript 文件中，先引入 brush-delphi 样式和脚本：
import 'brush-delphi/styles/shCoreDefault.css'; import * as dp from 'brush-delphi/scripts/shCore'; import 'brush-delphi/scripts/shBrushDelphi';
然后使用 dp.SyntaxHighlighter.highlight 方法来将代码高亮：
dp.SyntaxHighlighter.highlight('code', null, false, ['delphi']);示例代码：
-- -------------------- ---- -------
------
-----
------
------- ------
--------- --------
-----
--------------- ---------
----
-------
------
------- -----------------------
------ ----------------------------------------
------ - -- -- ---- ------------------------------
------ -------------------------------------
-------------------------------------- ----- ------ ------------
---------
-------结语
brush-delphi 包使得对 Delphi 代码进行高亮处理变得十分简单。但需要注意的是，在使用 brush-delphi 前，需要先引入其所依赖的样式和脚本。希望本教程能帮到前端开发者们。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c8accdc64669dde524e