Google后花园 | Google Garden: 在Blogger帖子内容中显示网页代码的技巧

 

为了能够在Blogger帖子内容当中显示HTML代码，本菜鸟参考了很多其他Blogger的文章，经过一番艰难的摸索，最后终于彻底搞定，顺便还做了简单的修改，让显示效果看上去更清爽，心中很有一点成就感，也算当了一回Blogger Hack。为了让其他的Blogger入门者可以少走一些弯路，本菜鸟也简单地将整个实现的过程做个介绍，当一回老师，先请大家别拿砖头砸我，等我唧唧歪歪结束之后再砸不迟。
步骤一：在模板中添加CSS
CODE {
display: block; /* fixes a strange ie margin bug */
font-family: Courier New;
font-size: 8pt;
overflow:auto;
background: #f0f0f0 url(http://fujianwzh.googlepages.com/Code_BG.gif) left top repeat-y;
border: 1px solid #ccc;
padding: 10px 10px 10px 21px;
line-height: 1.2em;
}
步骤二：在帖子中将HTML代码加在<code></code>当中即可，例如：
<code>
<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
span.fullpost {display:inline;}
</style>
<b:else/>
<style type='text/css'>
span.fullpost {display:none;}
</style>
</b:if></code>
效果：
<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
span.fullpost {display:inline;}
</style>
<b:else/>
<style type='text/css'>
span.fullpost {display:none;}
</style>
</b:if>
注意：代码部分必须用“&lt;”代替“<”，用“&gt;”代替“>”，否则帖子在发布之后还是无法显示出HTML代码的，切记。如果“<”和“>”的数量不多，手动输入即可；如果是一大段的代码，建议使用Dreamweaver或其他的网页编辑工具进行转换。如果你使用了Windows Live Writer之类的Blog离线编辑工具，这个编辑的工作就轻松多了。
大家可能没想到实现这个编辑居然会如此烦琐，本菜鸟也同样很难理解。为什么Blogger的“所见即所得”的编辑器会做的如此糟糕？这个改进对Blogger来说应该不是什么难事，建议大家一起向Blogger砸砖头，直到Blogger.com做出改进。

Google后花园 | Google Garden: 在Blogger帖子内容中显示网页代码的技巧