核心提示：多行代码一般使用 pre 标签来包裹多行代码，这会保证代码中的回车、换行、空格、制表符等原有格式不变。Bootstrap也为多行代码添加了背景颜色和边框。从美观方面考虑，还可以对源代码进行语法高亮显示...
多行代码
一般使用 <pre> 标签来包裹多行代码，这会保证代码中的回车、换行、空格、制表符等原有格式不变。Bootstrap也为多行代码添加了背景颜色和边框。
从美观方面考虑，还可以对源代码进行语法高亮显示。网上有很多这样的插件，最著名的非 google 的 code prettify 插件莫属。这个插件非常好用，只需导入它的样式表和JS文件，并为 <pre> 标签添加 .prettyprint 类即可。如果要为源代码添加行号，再追加一个 .linenums 类就行了。如：
<pre class="prettyprint linenums">
$(function() {
$("#view").toggle(function() {
$("nav").hide();
$("[id=show]:checkbox").attr("checked", false);
},function() {
$("nav").show();
$("[id=show]:checkbox").attr("checked", true);
});
});
</pre>
效果如图 3-21所示：
图3-21 Bootstrap多行代码样式
