在网页设计中，展示代码片段时，为了提高可读性和美观性，通常会采用代码高亮的方法。在Bootstrap框架中，我们可以借助Google Prettify这个开源库来实现代码的高亮显示。以下将详细介绍如何在Bootstrap项目中集成并使用Google Prettify。
Google Prettify是一个JavaScript库，它能够自动格式化和高亮源代码，支持多种编程语言。在Bootstrap中使用Google Prettify，你需要完成以下步骤：
1. **获取资源**：你可以从Google Code的Prettify仓库（http://code.google.com/p/google-code-prettify/）或BootCDN（http://www.bootcdn.cn/prettify/）下载Prettify的CSS和JS文件。或者，更简便的方式是通过网络CDN（内容分发网络）引入，这样可以减少本地服务器的负载。例如，Bootstrap的CDN地址为：`//cdn.bootcss.com/prettify/r298/prettify.min.css` 和 `//cdn.bootcss.com/prettify/r298/prettify.min.js`。
2. **引入资源**：在HTML文件的`<head>`部分，你需要引入Bootstrap的CSS和JS文件，以及Prettify的CSS和JS文件。确保引入顺序正确，通常是先引入CSS文件，然后是jQuery，最后是Bootstrap和Prettify的JavaScript文件。例如：
```html
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link href="//cdn.bootcss.com/prettify/r298/prettify.min.css" rel="stylesheet">
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="//cdn.bootcss.com/prettify/r298/prettify.min.js"></script>
```
3. **应用样式**：在CSS文件中，Bootstrap提供了多种预定义的代码样式，如`<code>`标签。对于长段落的代码，你可以使用`<pre>`标签包裹，并加上`class="prettyprint linenums"`，`linenums`选项会在代码行号前添加空白，便于阅读。例如：
```html
<pre class="prettyprint linenums">
<!-- 你的代码片段 -->
</pre>
```
4. **初始化Prettify**：为了激活Prettify的功能，需要在`<body>`标签的`onload`事件中调用`prettyPrint()`函数。这将在页面加载完成后对页面中的代码段进行高亮处理。例如：
```html
<body onload="prettyPrint()">
```
5. **代码示例**：以下是一个使用Bootstrap和Google Prettify的代码示例，展示了如何在Bootstrap的布局中插入高亮的代码片段：
```html
<!DOCTYPE html>
<html>
<head>
<!-- 引入Bootstrap和Prettify的相关资源 -->
</head>
<body onload="prettyPrint()">
<div class="container">
<h1 class="page-header">代码<small>google prettify代码高亮</small></h1>
<pre class="prettyprint linenums">
<!-- 你的代码片段 -->
</pre>
</div>
</body>
</html>
```
通过以上步骤，你可以在Bootstrap环境中轻松实现代码的高亮显示，使得代码更加易于阅读和理解。同时，结合Bootstrap的响应式布局和样式，可以创建出既美观又实用的代码展示页面。如果你希望支持更多的编程语言或自定义样式，可以通过查阅Prettify的文档进一步定制。
