小麥的部落格: 在 Blogger 上來個顯眼的 code block

2013-07-13

在 Blogger 上來個顯眼的 code block

[2016.10.06]

剛好有人問 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;
}

這樣前置作業就完成了。若之後想在文章中呈現程式碼的話，就把文章切換成 Html 編輯模式，將想呈現的程式碼用 <pre> </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>

在文章中用 <code></code> 包住想呈現的程式碼就好

參考連結

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;
}