2012年4月8日星期日

Google博客代码高亮的模板设置

最近深陷Google blogger不能自拔,当然代码的分享也不能没有,所以就想:Google blogger有没有代码高亮的工具或者脚本呢?

答案是有的,具体的设置通过强大的Google搜索到一个哥们的帖子(http://blackanger.blogspot.com/2009/01/blogspot.html),里面有相关的提示,我就索性记录一下吧:

首先进入博客管理,然后点击“模板”,

然后选择“修改html”,进入html编辑页面,直接讲以下的代码添加到“head”标签下:
<link href="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js">
然后修改“body”标签,添加以下内容到“body”标签中:
<body onload='prettyPrint()'>
然后编辑帖子时,使用html视图,将代码写入以下pre标签:
<pre class="prettyprint lang-html">
// your codes
</pre>
其中的“lang-*”,可以换成以下的语言:
"bsh", "c", "cc", "cpp", "cs", "csh", "cyc", "cv", "htm", "html",
"java", "js", "m", "mxml", "perl", "pl", "pm", "py", "rb", "sh",
"xhtml", "xml", "xsl".
到此处貌似结束了,但是这样的“pre”标签,无法自动换行,什么意思?就是你的代码有多长,那么你的页面就会多宽!怎么自动缩进呢?定制”pre“标签即可,下面是一位高人的改动,拿过来:
pre{
  white-space:pre-wrap; /* css3.0 */
  white-space:-moz-pre-wrap; /* Firefox */
  white-space:-pre-wrap; /* Opera 4-6 */
  white-space:-o-pre-wrap; /* Opera 7 */
  word-wrap:break-word; /* Internet Explorer 5.5+ */
}
参考网址:
  1. http://www.hujuntao.com/archives/css-pre-wrap.html
  2. http://blackanger.blogspot.com/2009/01/blogspot.html