文章嵌入程序碼 Codebock & Google Code Prettify 筆記篇

文章中加入程式碼, 很早之前已經有 Codeblock 這個 CSS 的小工具.
再加上 Google Code Prettify 為程式裡的文字上色. 可以講它是最簡單展示方法.

但是, Codeblock 一般都是灰色底, 算是用 Google Code Prettify 為文字上了色.
一旦句子超多, 它會變得不好閱讀.
所以, 我把它設定到, 有順列序號, 文字上色, 隔行背景上色, 更好的指示及了解.

先列出我使用的程式碼...
Codeblock 找不到最初開發的版本, 只好介紹我手上的.
Google Code Prettify 有它的網址, 有更多可選用變化, 可供參考.
https://code.google.com/p/google-code-prettify/

當中我有作出小量修改, 以合乎我的要求.
Codeblcok 裡, 我刪掉了 font-family & font-size 兩個指示, 以及把 background: #ffffff 全白色.
Code Prettify 除了用載入了它的 Script, 還加入了它的 Style CSS 支援程序.

<!-- CodeBlock Start -->
<style>
.post .codeblock {
display: block; /* fixes a strange ie margin bug */
overflow:auto;
background: #ffffff url(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAASwCAYAAAAt7rCDAAAABHNCSVQICAgIfAhkiAAAAQJJREFUeJzt0kEKhDAMBdA4zFmbM+W0upqFOhXrDILwsimFR5pfMrXW5jhZr7PwRlxVX8//jNHrGhExjXzdu9c5IiIz+7iqVmB7Hwp4OMa2nhhwN/PRGEMBh3Zjt6KfpzPztxW9MSAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzB8HS+J9kUTvzEDMwAAAABJRU5ErkJggg==) left top repeat-y;
border: 1px solid #ccc;
padding: 10px 10px 10px 21px;
max-height:350px;
line-height: 1.2em;
}
</style>
<!-- CodeBlock End -->

<!-- https://code.google.com/p/google-code-prettify/ Start -->
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
<style>
li.L0, li.L1, li.L2, li.L3,
li.L5, li.L6, li.L7, li.L8
{ list-style-type: decimal !important }
</style>
<!-- https://code.google.com/p/google-code-prettify/ End -->

只要把它全部貼到 Blog 裡頭,
打開 [版面配置]> [新增小工具]> [HTML/JavaScript]
不用寫入標題.  一按[儲存]已經完成.



編寫文章, 需要加上程式碼講解展示時.
只直接在[撰寫]裡貼上程式碼, 再轉到[HTML]模式, 人工加入 <pre>...</pre> 指令便可以.

Code Prettify 有多個參數, 可以得出不同的變化, 列出常用的, 方便日常使用.

單一 Codeblock 模式

<pre class="codeblock">
<script type="text/javascript">
<!-- to hide script contents from old browsers
  document.write("Hello World!")
// end hiding contents from old browsers  -->
</script>
</pre>

加上 prettyprint 為文字上色

<pre class="codeblock prettyprint">
<script type="text/javascript">
<!-- to hide script contents from old browsers
  document.write("Hello World!")
// end hiding contents from old browsers  -->
</script>
</pre>

加入 linenums:1 列出序列號 (:1 即由1開始, 改為 :10 便由序列號10開始)

<pre class="codeblock prettyprint linenums:1">
<script type="text/javascript">
<!-- to hide script contents from old browsers
  document.write("Hello World!")
// end hiding contents from old browsers  -->
</script>
</pre>

只是用 prettyprin, 得出一個簡單外框, 文字有上色效果

<pre class="prettyprint">
<script type="text/javascript">
<!-- to hide script contents from old browsers
  document.write("Hello World!")
// end hiding contents from old browsers  -->
</script>
</pre>

用 <span class="nocode">...</span> 把全段或某一段包起, 便不會啟用上色功能

<pre class="prettyprint">
<script type="text/javascript">
<!-- to hide script contents from old browsers
  document.write("Hello World!")
<span class="nocode">document.write("Hello World!")</span>
// end hiding contents from old browsers  -->
</script>
</pre>

<pre class="prettyprint linenums">
<script type="text/javascript">
<!-- to hide script contents from old browsers
  document.write("Hello World!")
<span class="nocode">document.write("Hello World!")</span>
// end hiding contents from old browsers  -->
</script>
</pre>

載入 Google Code Prettify 可以加入不同的 Skin, 會有不同的版面結構.
http://google-code-prettify.googlecode.com/svn/trunk/styles/index.html

<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js?skin=desert"></script>

<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js?skin=sunburst"></script>

<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js?skin=sons-of-obsidian"></script>

<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js?skin=doxy"></script>