剛好有人問 css 設定的問題，就順便重新整理一下。
部落格裡面程式碼的呈現，有分成「句子中的使用」，以及「獨立的程式碼片段」。而大部分在使用的是「獨立程式碼片段」，所以這篇主要在講這個。
如果要在 blogger 設定的話，流程如下：
- 到後台的「範本」→「編輯範本」
- 找到 <head> </head> 這個片段
- 貼上以下程式碼
<!-- 顯示程式碼block的語法 -->
<style type='text/css'>
.post code {
display: block; /* fixes a strange ie margin bug */
font-family: Courier New;
font-size: 10pt;
margin:.75em 0;
overflow: auto;
background: #f0f0f0 url(http:/your_Image/Code_BG.gif) left top repeat-y;
border: 1px solid #ccc;
padding: 10px 10px 10px 21px;
line-height: 1.2em;
white-space: pre;
}
PS：如果要顯示「句子中的使用」的程式碼，就在 <head></head>之間貼上這些程式碼
<!-- 顯示程式碼inline的語法 -->
<style type='text/css'>
.post code {
display: inline; /* fixes a strange ie margin bug */
font-family: Courier New;
overflow: auto;
background: #f0f0f0 ;
margin:.75em 0;
line-height: 1.2em;
padding: 1px 1px 1px 1px;
white-space: pre;
}
</style>
參考連結
- https://goo.gl/0HeV6U
- 使用 <pre> 标签样式的注意事项
[2013.07.14]
剛說完沒多久就改了 XDD
參照這篇文章，決定將
<code> 跟 <pre> 分開使用。<code>用在行內程式碼，例如：pirnt "hello world!"<pre> 則用在區塊的程式碼，例如：print "hello world!"
參考文章
[2013.07.13]
因為一些緣故，所以也想要有個漂亮的 code block 區塊 XD
先來展示一下
print "hello world!"修改方式如下
- 到後台的「範本」→「編輯範本」
- 搜尋「/* Posts」這個關鍵字
- 在「/* Posts」的區塊貼下面的程式碼：
.post code { display: block; /* fixes a strange ie margin bug */ font-family: Courier New; font-size: 10pt; margin:.75em 0; overflow: auto; background: #f0f0f0 url(http:/your_Image/Code_BG.gif) left top repeat-y; border: 1px solid #ccc; padding: 10px 10px 10px 21px; line-height: 1.2em; white-space: pre; }- 把[http://your_Image/Code_BG.gif]換成自己上傳的圖，再把路徑位置貼上去即可。搜尋關鍵字「Code_BG.gif」就可以找到背景圖了
- Done
參考資料
- 如何在 Blogger 上建立 code block 程式碼顯示區塊
- 改善Google Blog 顯示程式碼的簡單方案 Google Code Prettify + CSS
- 在Blog中加入程式碼方塊(code block)
