如何使用Code Prettify CDN来美化代码显示？

Code Prettify 是一个用于美化代码的 JavaScript 库，可以通过 CDN 快速引入，提升网页中代码块的可读性和展示效果。

使用 Code Prettify CDN

在现代网络开发中，代码高亮显示是一种常见的实践，它不仅可以提升代码的可读性和美观性，还能帮助开发者更容易地识别和调试代码，Google-code-prettify 是一个由 Google 开发的 JavaScript 库，专门用于网页中的代码展示美化，通过使用内容分发网络（CDN）引入该库，可以显著提高页面加载速度和性能。

什么是 Code Prettify？

Code Prettify 是 Google 提供的一个开源项目，旨在为网页中的代码片段添加语法高亮功能，它支持多种编程语言，包括但不限于 JavaScript、CSS、HTML、PHP 等，该库提供了完整版和精简版两个版本，以满足不同需求，完整版包含了所有功能，适合需要全面支持的项目；而精简版则专注于核心功能，适用于对性能要求较高的场景。

选择合适的版本

根据具体需求选择合适的版本非常重要：

完整版：提供完整的功能集，包括代码高亮、行号显示以及代码块折叠等功能，适用于项目初期或演示用途，因为它不需要额外的配置即可使用，完整版还提供了更好的旧版浏览器兼容性。

精简版：移除了一些非核心功能以减小文件大小，从而加快加载速度，适合那些对页面加载时间非常敏感的应用，例如移动设备上的在线文档阅读或者性能受限的环境中。

引入库文件的方式

1、通过 CDN 引入：这是最简单快捷的方式，以下是使用 Cloudflare CDN 引入 run_prettify.js 和 prettify.css 的示例代码：

   <!DOCTYPE html>
   <html>
   <head>
       <link href="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.css" type="text/css" rel="stylesheet">
   </head>
   <body>
       <pre class="prettyprint linenums">
           function helloWorld() {
               console.log('Hello, world!');
           }
           helloWorld();
       </pre>
       <script src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/run_prettify.js"></script>
       <script type="text/javascript">
           window.onload = function() {
               prettyPrint();
           };
       </script>
   </body>
   </html>

这种方法可以让浏览器从最近的服务器下载库文件，从而加快加载速度。

2、下载本地文件引入：虽然使用 CDN 很方便，但在某些情况下，开发者可能希望将库文件下载到本地服务器上存放，这样做可以提高项目的可控性，避免因 CDN 服务不稳定而导致的加载问题，从 Google-code-prettify 的官方网站下载最新版本的 JavaScript 和 CSS 文件，然后按照以下方式引入它们：

   <!DOCTYPE html>
   <html>
   <head>
       <link rel="stylesheet" type="text/css" href="path/to/prettify.css">
   </head>
   <body>
       <pre class="prettyprint linenums">
           function helloWorld() {
               console.log('Hello, world!');
           }
           helloWorld();
       </pre>
       <script type="text/javascript" src="path/to/prettify.min.js"></script>
       <script type="text/javascript">
           window.onload = function() {
               prettyPrint();
           };
       </script>
   </body>
   </html>

代码高亮实现与自定义

在使用 Code Prettify 时，正确标记代码块并初始化是非常重要的步骤，你需要确保你的 HTML 文件中包含正确的类名（如prettyprint 和linenums），以便库能够识别并处理这些代码块，你需要在页面加载完成后调用prettyPrint() 函数来执行代码高亮操作，这通常可以通过监听window.onload 事件来实现。

除了基本的用法外，你还可以根据个人需求自定义样式，你可以通过修改prettify.css 文件中的样式规则来调整代码高亮的颜色方案等，如果你需要对特定语言进行标识，可以在<code> 标签内指定语言类，如class="language-java"。