Thursday, October 27, 2011

blogspot 用 google prettify code 实现 代码高亮

wordpress有很多代码高亮的插件,blogger可以使用 google prettify codeBlogspot 来实现.


google prettify code是一个轻量级的Javascript模块通过CSS文件对代码进行上色处理,支持C、Java、PHP、Python、HTMLl和Javascript等十几种语言。让我们动手吧。

1.进入Blogspot控制台 –>布局 –>修改HTML
在head区调用google prettify code的Javascript和CSS文件:
<link href="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css" rel="stylesheet" type="text/css"/>
<script src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js" type="text/javascript"/>
2.将“”改成“”
3.修改pre标签的CSS以适合您的使用。
pre {
 margin: 5px 20px;
 border: 1px dashed #666;
 padding: 5px;
 background: #f8f8f8;
 white-space: pre-wrap;       /* css-3 */
 white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
 white-space: -pre-wrap;      /* Opera 4-6 */
 white-space: -o-pre-wrap;    /* Opera 7 */
 word-wrap: break-word;       /* Internet Explorer 5.5+ */
 }
现在可以写一篇博客试一下了,将您的代码放在pre标签内,给pre加上class为“prettyprint”,即:


your code



参考 :  How to publish source code in Blogger.com
            Javascript code prettifier
            用google prettify code给blogspot代码着色

No comments: