Google Code Prettify 代码高亮插件使用

封面图 • 2025-10-21 • JavaScript

Google Code Prettify 是一个由 Google 开发的轻量级 JavaScript 代码高亮库，可以用于在网页中对代码进行语法高亮显示。它支持多种编程语言（如 HTML、CSS、JavaScript、Python、Java 等），并且不需要复杂的配置。

---

## 🧩 一、基本使用方法

### 1. 引入 Google Code Prettify 的 JS 和 CSS 文件

你可以在 HTML 页面中通过 CDN 引入：

```html

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/prettify.css">

<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/prettify.js"></script>
```

> 注意：有些 CDN 可能会失效，建议使用以下更稳定的版本：

```html

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/google-code-prettify@1.0.5/loader/prettify.css">
<script src="https://cdn.jsdelivr.net/npm/google-code-prettify@1.0.5/loader/prettify.js"></script>
```

---

### 2. 在 HTML 中添加 `<pre>` 或 `<code>` 标签包裹代码

```html
<pre class="prettyprint">
function helloWorld() {
    console.log("Hello, world!");
}
</pre>
```

或者使用 `<code>` 标签：

```html
<code class="prettyprint lang-js">
function helloWorld() {
    console.log("Hello, world!");
}
</code>
```

> `lang-js` 表示这是 JavaScript 代码，其他语言可以用 `lang-html`、`lang-css`、`lang-python` 等。

---

### 3. 初始化代码高亮

在页面加载完成后，调用 `prettyPrint()` 函数来初始化高亮：

```html
<script>
  window.onload = function() {
    prettyPrint();
  };
</script>
```

---

## 📦 二、常用语言标签

| 语言 | 类名 |
|------|------|
| JavaScript | `lang-js` |
| HTML | `lang-html` |
| CSS | `lang-css` |
| Python | `lang-py` |
| Java | `lang-java` |
| C++ | `lang-cpp` |
| PHP | `lang-php` |
| Ruby | `lang-rb` |

---

## 💡 三、进阶用法

### 1. 自动识别语言（不推荐）

Code Prettify 默认不会自动识别语言，需要手动指定类名。如果你希望自动识别，可能需要结合其他工具（如 [Prism.js](https://prismjs.com/)）。

---

### 2. 高亮特定代码块

如果你有多个代码块，可以使用 `prettyPrint()` 来处理它们：

```html
<script>
  window.onload = function() {
    prettyPrint();
  };
</script>
```

---

### 3. 指定某个元素进行高亮

你可以通过 `prettyPrintOne()` 指定某个元素进行高亮：

```html
<script>
  window.onload = function() {
    var codeBlock = document.getElementById('my-code');
    prettyPrintOne(codeBlock);
  };
</script>
```

---

## ⚠️ 四、注意事项

- **不支持所有语言**：虽然支持很多语言，但不是所有语言都有完整的语法高亮。
- **性能问题**：如果页面中有大量代码块，可能会导致性能下降。
- **兼容性**：Code Prettify 对现代浏览器兼容性良好，但在旧版浏览器上可能表现不佳。

---

## ✅ 五、完整示例

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Code Prettify 示例</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/google-code-prettify@1.0.5/loader/prettify.css">
</head>
<body>

<h2>JavaScript 示例：</h2>
<pre class="prettyprint lang-js">
function greet(name) {
    return "Hello, " + name + "!";
}

console.log(greet("World"));
</pre>

</body>
</html>
```

---

## 📚 六、参考链接

- [Google Code Prettify 官方文档](https://github.com/google/code-prettify)
- [CDNJS - Code Prettify](https://cdnjs.com/libraries/google-code-prettify)

---

如果你是用 Vue、React、Angular 等框架，也可以使用插件或组件封装 Code Prettify，比如 [vue-code-highlight](https://www.npmjs.com/package/vue-code-highlight) 或 [react-code-prettify](https://www.npmjs.com/package/react-code-prettify)。

需要我帮你写一个基于 React 的示例吗？