在 Blogger 文章中加入程序代码框

写了两篇Blogger教学,觉得写代码没有代码框实在不行。我开始对此很头痛,只能直接将文本代码转换html代码,然后贴上。现在弄明白了,其实很简单,就是要先在模板中加入一段CSS代码。

第一步:进入到 控制台-模板-修改HTML ,不用打勾“扩展窗口小部件模板”。在模板内容里找到下面这段代码,你可以通过按Ctrl+F搜索“skin”两次找到 ]]></b:skin></head>

然后将以下的代码段拷贝加到上面代码的前面,就是那两个中括号前面。

CODE {
display: block; /* fixes a strange ie margin bug */
font-family: Courier New;
font-size: 8pt;
color:#33f;
overflow:auto;
background: #f0f0f0 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjifY7K7FAZpkglc1vaminDZM7cI_bquySV6sJJOa_lgfX1qTihNYGq68Yn5n4es3qqzve8YmcSsKc0v0X8XuJ80fGWkrVMm2BlDe6B6O1pZqH1hfcaQzNz-OhZXIR0EdpZY9WQ5nuWrfE/) left top repeat-y;
border: 1px solid #ccc;
padding: 10px 10px 10px 21px;
max-height:200px;
line-height: 1.2em;
}


第二步:在Html模式下,把文章中将要引用的代码前后分别用《code》和《/code》 包起来,这样就可以显示成代码框了。

注:请用HTML转换工具来转换您的代码,然后才将代码贴在Blogger里。不然< >里头的内容就会被Blogger的编辑器当成代码执行而不显示。

4 个评论:

方医生 说...

非常感谢你的分享。不过好像google会把代码的缩进过滤掉,你有什么好办法么?

efoc 说...

我个人的方法可能较笨一点,不过有效,就是用空格的代码取代。空格的代码为 &nbsp;

Unknown 说...

需要引用外部图标,还有尾巴不能缩进或者断行显示。

效果理想。

Chuabao 说...

为什么我的显示不了??
如何转换???
能回复去我的blog吗??
http://chuabao.blogspot.com

发表评论