Labels

2008-03-11

Blog教學 - 如何在文章中貼上Source Code

其實在Blogger中可以直接貼上Source Code是沒問題的
不過<和>要改一下 變成" & lt;"以及"& gt;"才可以顯示的出來
(請把&之後的空格消掉 & 和 l 中間是沒空格的喔!)


不然如果在直接貼的話就會被網頁給執行而貼不上
這是要注意的事項...

但常常在別人介紹教學時會看到他們的source code都是有獨立的方框
這是怎麼做到的呢???
今天就來教大家一個快速的方法

以下文章參考自在下【阮瑪莉】

首先...先來到這個blog..
http://formatmysourcecode.blogspot.com/

這是一個可以直接把source code放進方框的轉換程式
使用方式很簡單...

1.在此貼上source code或其他你想放的文字
不限只有source code 想放就可以放
2.點一下Fourmate Text即可
Embed Stylesheet要打勾..

3.把這段複製到文章上面..(要在html模式下)
4.預覽

出來的效果就是...

<body>
1
2
3
</body>

變成

<body>
1
2
3
</body>


方法2.
Embed Stylesheet不打勾...
在最下面會出現一段程式碼..如下圖


接下來..進到 設定=>版面配置=>修改Html 裡面..
找到這段程式碼..
]]><b:skin>

然後把下面這段code放在上面這段code之前..
<style type="text/css">
pre.source-code {
font-family: Andale Mono, Lucida Console, Monaco, fixed, monospace;
color: #000000;/*文字顏色*/
background-color: #eee;/*背景色*/
font-size: 12px;/*字體大小*/
border: 1px dashed #999999;/*邊框粗線 X px, dashed虛線 solid直線,顏色 */
line-height: 14px;/*行高*/
padding: 5px;/*邊界*/
overflow: auto;
width: 100%/*寬度 可改為 X px*/
}
</style>


這段code可以自行改方框的屬性...

之後貼code時就照他轉換出來的貼就行了...
會比較短也不用一直重設屬性...^^



0 意見: