Jackey's 感悟

Do Research

>用google prettify code给blogspot代码着色

>

用google prettify code给blogspot代码着色

2008-07-28 07:24pm

WordPress有许多代码语法高亮插件可以便捷地展示源代码,但是Blogspot我还发现此类的应用。不过我们可以让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

您可以访问我在blogspot上的博客查看效果。

如果代码是HTML,建议将它们转换成postable后再写入文章,不过如果用ScribeFire写作,它会将代码自动转换成postable,ScribeFire真得不错。下面两个网站可以在线转换:
http://www.elliotswan.com/postable/
http://www.khurshid.com/i-make-postable/

如果您对google prettify code感兴趣,请访问它们的网站,阅读Readme获得更多信息。

Tags:
Advertisements

One response to “>用google prettify code给blogspot代码着色

  1. Lia 九月 22, 2008 @ 8:45 上午

    >转载到这里来了,呵呵。

发表评论

Fill in your details below or click an icon to log in:

WordPress.com 徽标

You are commenting using your WordPress.com account. Log Out /  更改 )

Google photo

You are commenting using your Google account. Log Out /  更改 )

Twitter picture

You are commenting using your Twitter account. Log Out /  更改 )

Facebook photo

You are commenting using your Facebook account. Log Out /  更改 )

Connecting to %s

%d 博主赞过: