我的faceboook

抒发情绪的管道,可以是吃一餐、买破口袋、打烂杯子,我选择了爬格子写文字

Tuesday, July 20, 2010

✿ 在文章中加入程式碼和框框

♪  engye 的笔记:

我又学到新的东西了,就是在文章中加入程式碼框框,像以下这样的框框。
学习是件很快乐的事

这样纪录程式碼时看起来也比较干净。
我怎样修改? 我在网上搜索了不少文章,也战战兢兢试了不少次,发现这个可以用。
修改前,记得download 一份原本的HTML.万一改不好, 也不至于欲哭无泪。

------------------------------------------------------------------

1. 去到Edit HTML, 用Ctrl+F寻找以下的code (或到toolbar 的edit > find on this page )
<b:skin>

找到后,在后面加入:
CODE {
display: block; /* fixes a strange ie margin bug */
font-family: Courier New;
font-size: 8pt;
overflow:auto;
background: #f0f0f0 url(http://klcintw.images.googlepages.com/Code_BG.gif) left top repeat-y;
border: 1px solid #ccc;
padding: 10px 10px 10px 21px;
max-height:200px;
line-height: 1.2em;
}


2。preview 一下,确定没有问题, 就save.

3。以后写文章时, 就在想要加框框的程式码之前加<code>,在程式码的之后加</code>

像这样(红色是加入部分,中间的程式码只是样本)
<code>CODE {
display: block; /* fixes a strange ie margin bug */
font-family: Courier New;
font-size: 8pt;
overflow:auto;
background: #f0f0f0 url(http://klcintw.images.googlepages.com/Code_BG.gif) left top repeat-y;
border: 1px solid #ccc;
padding: 10px 10px 10px 21px;
max-height:200px;
line-height: 1.2em;
}</code>


4. Save 之前, preview 一下,这时框框应该会出现了。

这样就完成了。

-------------------------------
我遇到什么问题?

写这一篇时,也摸索到一些新的东西。像是:
1。注意写文章时要换到Edit HTML 才可以看到这些语法,在compose 写,会出现一些不是我要的效果。
2。我是直接到 HTML Encoder 这里转换适合用的程式码,然后再贴到文章里。可以参考这里 和这里 。

No comments:

Post a Comment