今天Twitter發布Bootstrap 2.0，修復了許多Bug，增加了不少新樣式，同時Bootstrap的代碼高亮也是一大亮點，與其他網站的代碼高亮不同，淡淡的灰色調配上幾個鮮艷而不刺眼的亮色點綴，相當漂亮，看了源碼才知道，它是基於google-code-prettify的一套皮膚，於是我就決定把它搬到博客里來，下面是html、css、js的幾個demo。
- /*This is not code*/
- #site-generator .sep {
- background: url(images/wordpress.png) center left no-repeat;
- color: transparent;
- display:inline-block;
- height:16px;
- line-height:16px;
- margin:07px;
- width:16px;
- }
- /*This is not code*/
- <!DOCTYPE html>
- <htmllang="en"><head>
- <metacharset="utf-8">
- <title> imshanks | 我行我驌 </title>
- <linkrel="stylesheet"href="highlighter/prettify.css"/>
- </head>
- <body>
- <scriptsrc="highlighter/prettify.js"></script>
- </body>
- </html>
- /*This is not code*/
- $("#id").hover(function(){
- alert("imshanks.com");
- });
使用方法如下：
1）下載google-code-prettify
2）在head引入js和css文件
- <linkhref="google-code-prettify/prettify.css"type="text/css"rel="stylesheet"/>
- <scripttype="text/javascript"src="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”>
喜歡這套樣式的童靴下載prettify.css替換就行了。
下面提供我改造的wordpress插件WP-Bootstrap-highlighting-of-code.rar用wordpress的童靴可以安裝插件直接設置並使用。
（此插件原版為http://boliquan.com/wp-code-highlight/開發，本人只做了樣式修改）