- 原理:
- 以 HTML的 pre tag來實作, 如 HTML裡的 <img> 表示圖片、<h1>表示等級1的header等等, pre表示的是 pre-formatted text, 會以定寬字型以及保留空格與換行的方式來處理。
- 設計特別的 class 來指定這些程式碼, 如 Google 的 prettyprint
- 設計 CSS 來 highlight畫面
- 利用 javascript 來做是否為keyword等字的判斷, 來highlight特別的字 (每個語言都有自己的 keywords, 如: class、printf 等等, 這些 keywords因語言不同而不同, 所以應該也要有對不同語言提供不同 keywords highlight的功能)
- 方法:
- 載入上面提到的 CSS (以blog-替程式碼上色提供的 sample為例)與 Javascript (以 Google Code Prettify 為例)
- 在 Blogger中, 新增 HTML/Javascript 小工具
- 在自己的程式碼中輸入程式碼區塊
- 指定為 pre block, 並指定 class 與特定 config (例如特別的語言: lang-*, support list, 或是顯示行號的 linenum)
<pre class="prettyprint lang-cpp linenums">code snippet</pre>
- 需要注意的是, 這邊的 code snippet要經過處理, 也就是有經過 escape符號預處理, 簡單來說, 通常任何程式語言都會有 escape characters, 簡單就是用以告知 compiler/interpreter, 你就是要用該符號, 例如: printf的語法是 printf("what you want to print"), 但你就是要 print 引號 (")的時候怎麼辦咧? 就是加入 escape character (\), 而在 HTML則是輸入 < > 等等, 不過也有網頁服務直接幫你轉換 => HTMLEscape .net
- 另外, 也有很多類似的相關 js 可以套用, 如 SyntaxHighlighter
<style type='text/css'>
.pre-highborder{
border: 1px solid #ff0000;
padding: 3px 3px 3px 0;
}
pre.prettyprint, code.prettyprint {
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
padding: 5px;
overflow: auto;
background-color: #eee !important;
color: black;
box-shadow: 0 0 5px #999;
-moz-box-shadow: 0 0 5px #999;
-webkit-box-shadow: 0 0 5px #999;
}
/*font*/
pre span, code span {
font-family: 'Consolas', 'Courier New', 'Microsoft JhengHei', sans-serif !important;
font-size: 12px !important;
}
/*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;
padding: 2px 0 2px 4px !important;
list-style-type:decimal !important;
border-left: 1px solid #999;
}
/*even line*/
li.L1, li.L3, li.L5, li.L7, li.L9 {
background-color: #f6f6f6 !important;
}
/*odd line*/
li.L0, li.L2, li.L4, li.L6, li.L8 {
background-color: #FFF !important;
}
/*line-number background color*/
ol.linenums {
color: black;
background-color: #eee;
margin-left: 10px;
}
</style>
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js">
</script>
- 當然也可直接使用網站服務
- Reference
