为页面添加代码高亮功能

captain 1 年前代码 3 浏览 5 分钟阅读

文章目录

一、使用 Prism.js 实现代码高亮
二、自定义 Prism.js 主题
三、添加行号和高亮指定行
四、其他代码高亮库
- 1. Highlight.js
- 2. CodeMirror
五、完整示例
六、总结

为页面添加代码高亮功能可以提升代码的可读性和美观度。以下是实现代码高亮的详细步骤，使用 Prism.js（一个轻量级的代码高亮库）作为示例。

一、使用 Prism.js 实现代码高亮

1. 引入 Prism.js

在 HTML 文件的 <head> 部分引入 Prism.js 的核心 CSS 和 JS 文件，以及你需要的语言支持。

<!DOCTYPE html>
<html lang=”zh-CN”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>代码高亮示例</title>
<!– Prism.js 核心 CSS –>
<link href=”https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css” rel=”stylesheet” />
<!– Prism.js 核心 JS –>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js”></script>
<!– 语言支持（如 JavaScript、CSS 等） –>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-javascript.min.js”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-css.min.js”></script>
</head>
<body>
<h1>代码高亮示例</h1>
<pre><code class=”language-javascript”>
// JavaScript 代码示例
function greet(name) {
console.log(`Hello, ${name}!`);
}
greet(“World”);
</code></pre>

<pre><code class=”language-css”>
/* CSS 代码示例 */
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
</code></pre>
</body>
</html>

2. 使用代码高亮

在 <pre> 和 <code> 标签中包裹你的代码。
为 <code> 标签添加 class="language-xxx"，其中 xxx 是语言类型（如 javascript、css、html 等）。

示例：

<pre><code class=”language-javascript”>
// JavaScript 代码
const message = “Hello, World!”;
console.log(message);
</code></pre>

<pre><code class=”language-css”>
/* CSS 代码 */
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
</code></pre>

3. 支持的语言

Prism.js 支持多种编程语言，你可以根据需要引入对应的语言文件。以下是一些常用语言的 CDN 链接：

JavaScript：https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-javascript.min.js
CSS：https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-css.min.js
HTML：https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-html.min.js
Python：https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-python.min.js
Bash：https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-bash.min.js

二、自定义 Prism.js 主题

Prism.js 提供了多种主题，你可以根据需要更换主题。以下是一些常用主题的 CDN 链接：

默认主题：https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css
暗色主题：https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css
Coy 主题：https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-coy.min.css

更换主题只需替换 <link> 标签中的 CSS 文件即可：

三、添加行号和高亮指定行

Prism.js 支持行号和指定行高亮功能，只需引入对应的插件即可。

1. 引入插件

<!– 行号插件 –>
<link href=”https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/line-numbers/prism-line-numbers.min.css” rel=”stylesheet” />
<script src=”https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/line-numbers/prism-line-numbers.min.js”></script>

<!– 高亮指定行插件 –>
<link href=”https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/line-highlight/prism-line-highlight.min.css” rel=”stylesheet” />
<script src=”https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/line-highlight/prism-line-highlight.min.js”></script>

2. 使用行号

为 <pre> 标签添加 class="line-numbers"：

<pre class=”line-numbers”><code class=”language-javascript”>
// JavaScript 代码
const message = “Hello, World!”;
console.log(message);
</code></pre>

3. 高亮指定行

为 <pre> 标签添加 data-line 属性，指定需要高亮的行号：

<pre data-line=”2,4″><code class=”language-javascript”>
// JavaScript 代码
const message = “Hello, World!”; // 第 2 行
console.log(message); // 第 4 行
</code></pre>

四、其他代码高亮库

除了 Prism.js，还有其他流行的代码高亮库可供选择：

1. Highlight.js

特点：自动检测语言，使用简单。
CDN 链接：<link href=”https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css” rel=”stylesheet” />
<script src=”https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js”></script>
<script>hljs.highlightAll();</script>

2. CodeMirror

特点：支持代码编辑和实时高亮。
CDN 链接：

五、完整示例

以下是一个完整的 HTML 文件示例，包含 Prism.js 的代码高亮功能：

<!DOCTYPE html>
<html lang=”zh-CN”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>代码高亮示例</title>
<!– Prism.js 核心 CSS –>
<link href=”https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css” rel=”stylesheet” />
<!– Prism.js 核心 JS –>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js”></script>
<!– 语言支持 –>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-javascript.min.js”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-css.min.js”></script>
<!– 行号插件 –>
<link href=”https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/line-numbers/prism-line-numbers.min.css” rel=”stylesheet” />
<script src=”https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/line-numbers/prism-line-numbers.min.js”></script>
</head>
<body>
<h1>代码高亮示例</h1>

<h2>JavaScript 代码</h2>
<pre class=”line-numbers”><code class=”language-javascript”>
// JavaScript 代码示例
function greet(name) {
console.log(`Hello, ${name}!`);
}
greet(“World”);
</code></pre>

<h2>CSS 代码</h2>
<pre><code class=”language-css”>
/* CSS 代码示例 */
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
</code></pre>
</body>
</html>

六、总结

通过以上步骤，你可以轻松为页面添加代码高亮功能。Prism.js 是一个功能强大且易于使用的工具，适合大多数场景。如果需要更多功能（如代码编辑），可以考虑使用 CodeMirror 等更高级的库。

推荐实践：

根据项目需求选择合适的代码高亮库。
使用 CDN 引入资源，减少本地依赖。
结合行号和高亮插件，提升代码可读性。

现在，你的页面已经支持代码高亮了！🎉

辣鱼