介绍
SyntaxHighlighter 是一个 JavaScript 库，用于在网页上添加语法高亮效果。它支持多种编程语言和风格，并可与多种前端框架集成。
本文将介绍如何使用 npm 包安装 SyntaxHighlighter 及其基本使用方法。
安装
首先需要安装 Node.js 和 npm。安装完成后，在命令行中输入以下命令进行全局安装：
npm install -g syntaxhighlighter
或者，在项目目录下输入以下命令进行本地安装：
npm install syntaxhighlighter
安装完成后，在 HTML 文件中引入 CSS 和 JavaScript 文件：
<link rel="stylesheet" href="node_modules/syntaxhighlighter/styles/shCore.css"> <script src="node_modules/syntaxhighlighter/scripts/shCore.js"></script>
使用
基本使用
要对代码段进行语法高亮，需要将代码包含在 <pre> 和 <code> 标签中，同时添加对应的 class 属性。例如：
<pre class="brush: javascript;">
<code>
const greet = (name) => {
console.log(`Hello, ${name}!`);
};
greet("World");
</code>
</pre>其中，brush: javascript; 指定了代码段的语言为 JavaScript。可以根据实际情况修改该属性的值。常见的语言包括：css、html、java、javascript、php、python、ruby 等。
高级用法
SyntaxHighlighter 还提供了丰富的配置选项和 API，可以实现更多的定制化功能。以下是一些常见的用法示例：
修改默认风格
在 HTML 文件中添加如下代码，可以将默认风格修改为 django：
<link rel="stylesheet" href="node_modules/syntaxhighlighter/styles/shCore.css"> <link rel="stylesheet" href="node_modules/syntaxhighlighter/styles/shThemeDjango.css"> <script src="node_modules/syntaxhighlighter/scripts/shCore.js"></script>
动态加载代码
可以使用 JavaScript 动态加载代码，并对其进行语法高亮。例如：
-- -------------------- ---- -------
------ ----------------- ---- --------------------
----- ---- - -
----- ----- - ------ -- -
-------------------- -------------
--
---------------
--
--------------------------------------------- -- -- -
----- --- - ------------------------------
----- ----------- - -------------------------------
-----------------------------
-------------------------------
---------------------------------------- ----- -------
--------------------- - -----
---此处使用 ES6 的模板字符串定义代码段，并将其插入到页面中。然后使用 SyntaxHighlighter 提供的 highlight 方法对其进行语法高亮。
总结
本文介绍了 SyntaxHighlighter 的安装和基本使用方法，以及一些高级用法。通过掌握 SyntaxHighlighter 的使用，可以轻松为网页添加语法高亮效果，提升页面的可读性和美观度。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/33007
