【手把手教你用google-code-prettify进行代码高亮】在网页开发中，为了提升代码的可读性和美观性，常常需要对代码进行高亮显示。Google Code Prettify 是一个由 Google 开发的轻量级 JavaScript 代码高亮库，支持多种编程语言，使用简单，非常适合在网页中嵌入代码块并实现语法高亮。
以下是对 Google Code Prettify 的使用方法和功能的总结，便于快速上手和查阅。
✅ 使用步骤总结
| 步骤 | 操作说明 |
| 1 | 引入 Google Code Prettify 的 JS 和 CSS 文件 |
| 2 | 在 HTML 中添加 `` 或 ` |
| 3 | 为代码块添加 `class="prettyprint"` 属性 |
| 4 | 可选：通过 `language-xxx` 类指定具体编程语言 |
| 5 | 调用 `prettyPrint()` 函数触发高亮渲染 |
📋 支持的语言（部分）
| 语言名称 | 对应类名 | 说明 |
| Java | language-java | 常见后端语言 |
| Python | language-python | 简洁易读的脚本语言 |
| JavaScript | language-js | 前端开发必备语言 |
| C++ | language-cpp | 面向对象的系统语言 |
| HTML | language-html | 网页结构语言 |
| CSS | language-css | 网页样式控制语言 |
| PHP | language-php | 动态网页开发语言 |
| Ruby | language-ruby | 优雅的脚本语言 |
💡 示例代码
```html
def hello():
print("Hello, World!")
<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/prettify.js"></script>
<script>prettyPrint();</script>
```
⚠️ 注意事项
| 问题 | 解决方案 |
| 代码未高亮 | 确保正确引入 JS/CSS 文件，并调用 `prettyPrint()` |
| 语言识别错误 | 添加 `language-xxx` 类指定语言类型 |
| 加载速度慢 | 可考虑本地部署或使用 CDN 加速加载 |
✅ 总结
Google Code Prettify 是一个简单、高效、易于集成的代码高亮工具，适合用于博客、文档、教学网站等场景。通过合理使用其提供的类名和函数，可以轻松实现多语言代码的高亮展示，提升用户体验。
如需进一步优化，还可以结合其他前端框架（如 Vue、React）进行动态加载和渲染。
