網頁

2014年9月6日

|

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

Views:
文章中加入程式碼, 很早之前已經有 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>

沒有留言:

發佈留言

★ 謝謝留言,留下的一句話,已經是很好的推動力 !
★ 勾選右下角的「通知我 」可以由電郵收到留言回覆!
★ 留言與文章無關的主題時,請到頂列「留言版 GuestBook」暢所欲言。
★ 若發佈留言後,留言不見了。可能被系統錯誤判斷為垃圾留言,請不用擔心,我會盡快將留言恢復。
◎ 本留言區已經支援 Unicode Emoji,對應 Win10 的浮動鍵盤。歡迎貼上,增加效果。
◎ 支援 YouTube 超連結對應,支援 jpg , jpeg , gif , png 這4種圖片顯示格式。
◎ 文章介紹 2016 表情符號 V2 更新版 ( Unicode Emoji 格式 ) 顯示策劃