如何给blogger中的代码着色

代码着色能给代码中的一些关键字如变量类型、函数、注释等染上不同的颜色,使代码看上去更清晰易读。

前一阵一直在想怎么给blogger中显示的代码着色,今天终于在网上找到解决方法了。这里推荐一款工具叫google-code-prettify,几乎支持所有常用的语言像C、C++、Bash、XML、HTML、PHP、Perl、Python等等。

下面介绍怎样用google-code-prettify给blogger上的代码着色:
1. 进入“控制台”-> 点击“布局”-> “修改HTML”,在<head>下面添加两行代码:
<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. 将<body>改成<body onload="prettyPrint()">

好了,大功告成了!现在就可以给blogger中的代码着色了,使用方法是:
将你的代码片断写在<pre class="prettyprint">...</pre> 标签中,或者
<code class="prettyprint">...</code>标签中,你代码中的关键字就会被自动用不同的颜色标示出来。

通常情况下,你不需要指定语言的种类,prettyprint会去猜测语言的种类,但是你也可以紧跟prettyprint类指定语言的扩展名,如下所示:
<pre class="prettyprint lang-html">
The lang-* class specifies the language file extensions.
Supported file extensions include
"c", "cc", "cpp", "cs", "cyc", "java", "bsh", "csh", "sh", "cv", "py", "perl", "pl", "pm", "rb", "js", "html", "html", "xhtml", "xml", "xsl".
</pre>


有一点需要注意的是,如果是HTML语言,要记得把代码先转换成postable后再写入blogger,具体的方法可以参考我之前的一篇blog如何在blogger中显示HTML代码

让我们来举个例子吧!
比如说在blog文章“修改HTML”中输入下面的一段代码
<pre class="prettyprint">
#include <stdio.h>
int main()
{
printf("Hello, world!\n");
return 0;
}
</pre>
我们来看一下效果
int main()
{
printf("Hello, world!\n");
return 0;
}

怎么样,是不是很神奇?赶快去试一下吧!

没有评论:

发表评论