[HTML] Prettify 代码高亮使用总结 实例代码

HTML中的Prettify是一款强大的代码高亮工具，尤其在网页中展示源代码时，它可以将代码格式化并突出显示关键部分，使得代码更易读、更美观。Prettify是Google开发的一个开源项目，它支持多种编程语言的语法高亮，并且在网页中使用非常简单。 1. **Prettify简介** Prettify是一个JavaScript库，通过添加CSS样式来实现代码的高亮显示。它的主要优点包括轻量级、高效以及对多种编程语言的支持。Prettify不依赖任何外部库，如jQuery，因此在页面加载速度方面具有优势。 2. **安装与引入** 要在HTML页面中使用Prettify，首先需要从GitHub或Google Hosted Libraries下载Prettify的JavaScript和CSS文件。通常，会包含`prettify.js`和一个CSS样式文件，如`prettify.css`。然后，将这两个文件引入到HTML头部： ```html <link rel="stylesheet" type="text/css" href="path/to/prettify.css"> <script src="path/to/prettify.js"></script> ``` 3. **使用Prettify** Prettify通过查找带有特定类名的`<pre>`或`<code>`标签来识别需要格式化的代码段。默认情况下，使用`prettyprint`类即可： ```html <pre class="prettyprint lang-js"> // JavaScript代码 </pre> ``` 如果需要指定代码的编程语言，可以使用`lang-`前缀加上语言名称，如`lang-js`表示JavaScript，`lang-css`表示CSS。 4. **代码块自动格式化** Prettify提供了一个全局函数`PR.prettyPrint()`，可以在页面加载完成后调用，自动处理页面中的所有代码块。例如： ```html <script> window.onload = function() { PR.prettyPrint(); } </script> ``` 5. **自定义样式** Prettify默认提供了基础的高亮样式，但可以通过自定义CSS覆盖或扩展这些样式，以满足特定的视觉需求。在`prettify.css`文件中，可以找到各种代码元素的类名，如`pln`（普通文本）、`kwd`（关键字）和`com`（注释）等，根据需要进行修改。 6. **扩展与优化** Prettify虽然支持多种编程语言，但可能不涵盖所有小众语言或特定语法。开发者可以通过添加额外的解析器（parser）来扩展其功能。此外，还可以与其他库（如Prism.js）结合，以获得更丰富的特性，如行号显示、复制代码按钮等。 7. **其他相关资源** - 官方GitHub仓库：https://github.com/google/code-prettify - CSDN博客文章：http://blog.csdn.net/qiujuer/article/details/41413059 (该链接可能已失效，建议直接参考官方文档) - 示例代码：通常在`Prettify`压缩包中会包含示例代码，帮助理解如何在实际项目中应用。 Prettify是一个简单易用、高效可靠的代码高亮工具，适合网页开发者用于提升代码展示的质量。通过合理的配置和定制，可以满足各种代码高亮需求。