在blogger裡面放code的簡單方法,用
google code-prettify
效果:
int x = foo(); /* This is a comment This is not code Continuation of comment */
int y = bar();
讓code的關鍵字可以自動上色,更方便觀看
使用方式:
1.加入 Google Code Prettify小工具
在
Layout > Add a Gadget > HTML/JavaScriptAdd
context 的部分輸入下列程式碼
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=desert""></script>
其中?skin=desert用來指定程式碼的skin,可以選擇的skin可以參考
這邊
2.在文章中加入區段標記
將文章中的程式法區段以
<pre class="prettyprint">...</pre>包起來
例如:
<pre class="prettyprint linenums">int x = foo(); /* This is a comment This is not code Continuation of comment */
<span class="pre-highborder">
int y = bar();</span>
</pre>
需要特別注意的是,最好不要直接把程式碼貼進HTML中,而最好是先在 "Compose" 頁面中將code貼上,在切換到"HTML"頁面去加上<pre>...</pre>的tag, 不然程式碼中如果包含特殊字元(通常都有包含)顯示就會跟內容來源不一樣
另外雖然prettyprint會自動偵測語言，但在乎叫的時候也可以用
<pre class="prettyprint lang-html">
來指定語言
html可以換成
"bsh", "c", "cc", "cpp", "cs", "csh", "cyc", "cv", "htm", "html", "java",
"js", "m", "mxml", "perl", "pl", "pm", "py", "rb", "sh", "xhtml", "xml",
"xsl".
2.1 顯示行數
加入linenums:n, n是起始和數,幾行顯示一次跟選擇的顯示style有關
<pre class="prettyprint linenums">..</pre>
bouns1. 程式碼中highlight 部分程式段
首先在Theme>Edit HTML中的 </head 之前> 加上
<style type='text/css'>
.pre-highborder{
border: 1px solid #ff0000;
padding: 3px 3px 3px 0;
}
</style>
接著在code中將想要highlight的地方以
<span class="pre-highborder">...</span>
包圍
參考資料
bouns2. 加入scroll bar
<style type='text/css'>
pre.prettyprint{
width: auto;
overflow: auto;
max-height: 600px
}
</style>
參考資料
bonus3. 變換背景顏色跟行號顏色
<style type='text/css'>
/*each line*/
li.L0, li.L1, li.L2, li.L3, li.L4, li.L5, li.L6, li.L7, li.L8, li.L9 {
margin: 0 !important;
list-style-type:decimal !important;
border-left: 1px solid #999;
background-color: #4f4f4f !important;
}
ol.linenums {
background-color: #3f3f3f !important;;
margin-left: 10px;
}
</style>
在試這段code的時候發現code裡面有 "!important"這種東西出現，一開始以為是註解,不以為意，還把他刪掉。但發現刪掉會影響程式行為。
大致上來說,被!important所標註的參數會有比較高的 priority, 前面的設定可以覆蓋後面的。正常情況是後面的參數會蓋前面的參數。
詳細說明可以猜考
這裡
