如何使用Bootstrap的代码高亮样式

今天Twitter发布Bootstrap 2.0，修复了许多Bug，增加了不少新样式，同时Bootstrap的代码高亮也是一大亮点，与其他网站的代码高亮不同，淡淡的灰色调配上几个鲜艳而不刺眼的亮色点缀，相当漂亮，看了源码才知道，它是基于google-code-prettify的一套皮肤，于是我就决定把它搬到博客里来，下面是html、css、js的几个demo。

使用方法如下：

下载google-code-prettify
2）在head引入js和css文件
<linkhref="google-code-prettify/prettify.css"type="text/css"rel="stylesheet"/>
<scripttype="text/javascript"class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="google-code-prettify/prettify.js"></script>
3）在body加上onload=”prettyPrint()
<bodyonload="prettyPrint()">...</body>
如果你的主题里引入过Jquery.js，也可以加上下面这段代码
$(document).ready(function(){
prettyPrint();
})

设置方法如下

1）把代码放进<pre>...</pre> 或者 <code>...</code> 就可以实行代码高亮了。你也可以指定一种语言，class=”prettyprint Lang-html”，在lang- 后添加以下任何一种语言。“bash”, “c”, “cc”, “cpp”, “cs”, “csh”, “cyc”, “cv”, “htm”, “html”, ”java”, “js”, “m”, “mxml”, “perl”, “pl”, “pm”, “py”, “rb”, “sh”, ”xhtml”, “xml”, “xsl”

2）打开行号
你可以使用linenums打开行号
<preclass=”prettyprintlinenumsLang-html”>