Google Code Prettify 代码高亮工具使用指南

平依佩Ula

于 2025-06-07 09:20:55 发布

阅读量283

点赞数 4

版权

Google Code Prettify 是一款轻量级的代码语法高亮工具，它能够自动识别多种编程语言，并为网页中的代码块添加美观的语法高亮效果。该工具通过简单的 JavaScript 和 CSS 实现，无需复杂的配置即可集成到任何网页中。

最简单的方式是使用 CDN 引入自动加载脚本：

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

这个脚本会自动加载所有必要资源，并在页面加载完成后自动处理标记的代码块。

在 HTML 中，使用 <pre> 或 <code> 标签，并添加 prettyprint 类：

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

通过 URL 参数可以配置加载行为：

<script src="run_prettify.js?lang=css&skin=sunburst"></script>

常用参数包括：

如需本地部署，需要下载并引入两个核心文件：

<link rel="stylesheet" href="prettify.css">
<script src="prettify.js"></script>

然后在页面加载完成后手动调用：

<body onload="PR.prettyPrint()">

虽然工具能自动识别大多数常见语言，但为获得最佳效果，建议明确指定语言：

<pre class="prettyprint lang-java">
public class Main {
  public static void main(String[] args) {
    System.out.println("Hello");
  }
}
</pre>

或者使用处理指令方式：

<?prettify lang=python?>
<pre>
def greet():
    print("Hello from Python")
</pre>

添加 linenums 类可显示行号：

<pre class="prettyprint linenums">
function test() {
  return "This is line 2";
}
</pre>

如需从特定行号开始，可使用 linenums:10 这样的格式。

工具本身只添加类名，不定义具体样式。您可以通过以下方式自定义外观：

建议保留以下基本类别的样式定义：

通过以上配置，您可以在网站中轻松实现专业级的代码高亮效果，提升技术文档的可读性和美观度。

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考