RJ メモ: 在Blogger中顯示程序代碼

由於最近開始寫這個Blog，而且寫的文章大部份都是一些技術文章，需要在文章裡面加上指令或者程序代碼等東西。而現在的blog (Blogger)的基本功能並沒有支持顯示程序代碼的功能，所以只能想方法修改HTML來支持顯示程序代碼。

所以我在這篇文章裡面，分享一下我如何在Blogger的文章裡面，顯示程序代碼，以及我試了哪些方法。

用以下的代碼作例子來說。

function Hello() {
alert('Hello World!');
}

方法1： highlight 3.22

下載網址: http://www.andre-simon.de/zip/download.php

首先我試的方法,是使用highlight 這個軟件. 這個軟件主要是把程序代碼轉換為html代碼，而且支援顯示行數。
以下為轉換後的HTML代碼：

<pre style="color:#000000; background-color:#eeeeee; font-size:10pt; font-family:'Courier New';"><span style="color:#303030"> 1 </span>    <span style="color:#bb7977; font-weight:bold">function</span> <span style="color:#004466">Hello</span><span style="color:#ff0080; font-weight:bold">() {</span>
<span style="color:#303030"> 2 </span>        <span style="color:#004466">alert</span><span style="color:#ff0080; font-weight:bold">(</span><span style="color:#a68500">'Hello World!'</span><span style="color:#ff0080; font-weight:bold">);</span>
<span style="color:#303030"> 3 </span>    <span style="color:#ff0080; font-weight:bold">}</span>
</pre>

應用到blog後，則顯示為這樣。

 1     function Hello() {
 2         alert('Hello World!');
 3     }

可惜的是，使用這方法有兩大壞處。
1. 每次在blog上貼上代碼的話，都要使用 highlight這個軟件去轉換一次。
2. 去複製代碼的時候，會連同行數也一起複製。這樣很難給看這blog的人去複製我的代碼來用的。

所以我決定不使用這個軟件。

方法2： awesome syntax highlighter

網址： http://alexgorbatchev.com/SyntaxHighlighter/

用awesome syntax highlighter 本來是很不錯的，而且根據那裡的Demo，還能顯示代碼的行數。
但由於這裡只是一個blog，不是自己去host一個網站，不能上傳js / css文件使用。
所以只能用以下方法把alexgorbatchev.com提供的js / css文件，貼上去範本中的<head> </head> 之間使用：

<link href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css" rel="stylesheet" type="text/css" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shAutoloader.js" type="text/javascript"></script>

可以，使用這個方法的話，由於要讀取外部網站alexgorbatchev.com的文件，進入這個blog時會變得很慢（可能是因為我這裡連alexgorbatchev.com慢，而且shAutoloader好像還需要額外再load 其他brush文件)。加上使用完後，代碼也不能正常顯示。
所以最後，我也決定了不使用 awesome syntax highlighter 。

方法3：Google的Javascript code prettifier

網址： https://github.com/google/code-prettify

雖然Prettifier和syntax highlighter差不多,都需要讀取外部的js文件。但是只有16kb, 而且可能是因為host在rawgit的關係讀取相對也快很多。
所以最後我選擇的,也是用Javascript code prettifier 來顯示程序代碼。

詳細使用方法如下：

1. 在範本 html的 <head> </head> 之間，加上這一句。

<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>

如下圖：

2. 在代碼的html class中，加上prettyprint,以下為例子：

<pre class="prettyprint">
function Hello() {
 alert('Hello World!');
}
</pre>

顯示效果則會是：

function Hello() {
 alert('Hello World!');
}

3. 如果需要加上行數，首先在範本的 <head> </head> 之間，加上這一段代碼：

<style>
li.L0, li.L1, li.L2, li.L3,
li.L5, li.L6, li.L7, li.L8
{ list-style-type: decimal !important }
</style>

在代碼的html class中，再加上linenums，以下為例子：

<pre class="prettyprint linenums">
function Hello() {
 alert('Hello World!');
}
</pre>

顯示效果則會是：

function Hello() {
 alert('Hello World!');
}

4. 當然,如果只是這樣顯示的話，感覺還不是這麼好看，我還想加個框，還有白背景。
所以，最後我在範本的 <head> </head> 之間，加上這一段代碼：

<style>
.codeblock {
  display: block;
  font-family: arial;
  font-size: 10pt;
  overflow:auto;
  background: #FFFFFF url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAMgCAIAAACYkRRgAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAJbSURBVHja7NQxTNtAFMbxd7RrUB06BXXILUFkq8ngtbVATCxNujRIXVI1A4xJle4x3akUOqZTJpAYKjmMXYLTlTLgTmGMq2RBXdzB4MQGCaqu/5vO0k/37n33ZCXKkvvWgjxggW6QbZe0zomI1jnbLkUbp12/YcoSZXnemeN0RVmO0/W8M1FWudIKw9DIrouyHlTucbwzzYLTrptmwTAWnXY9qp4uF961onIqngLDyNwuFATTRLkgmNZqWzq/LCL+r9HBwVG63O2KrjuIaomyrlGjuR+GYa93Uq60ypVWp3MYhmGnc5hArjtw3UF8ahTYeDyJ9gvxrYfD8/krD3/8NIxM1E06p/hzPqcZsu1S9Gq317/ndP/bGUamVtsqv3ohIsPh+d6nru9fJsI0suupMMfjibn2NhGB065rvdz88Dm7tJFd2qi8/uj7I6f9Pj0Fs3yVJcqqvXPSQxcE01R385+PRD0TkVzu6e5OpbiaFyXFYn67urm7Uzk+/t7tfktMQfSo8fK8s3gKrsPUOmeaK0EwtV+WonmK+u/3T2cnue6g1zuZv3ijuX9xMUpPwVx0IiK+f6l1Lrr+rDvTLMwj8/lKururqz+NRrW4mjeyGa2Xt6ubjcabfv/04MtRojvH6d7T3c3crdj2mvFkMfg92dv7esc88WMFgUAgEAgEAoFAIBAIBAKBQCAQCAQCgUAgEAgEAoFAIBAIBAKBQCAQCAQCgUAgEAgEAoFAIBAIBAKBQCAQCAQCgUAgEAgEAoFAIBAIBAKBQCAQCAQCgUAgEAgEAoFAoP9DfwcAZAkRD+b38dEAAAAASUVORK5CYII=) left top repeat-y;
  color: #000000;
  padding: 10px 10px 10px 21px !important;
  max-height:800px;
  line-height: 1.2em;
  border:1px dashed #000139 !important;
}
</style>

在代碼的html class中，再加上codeblock，以下為例子：

<pre class="prettyprint linenums codeblock">
function Hello() {
 alert('Hello World!');
}
</pre>

顯示效果則會是：

function Hello() {
 alert('Hello World!');
}

RJ メモ

URLs Memo

2015年5月23日星期六

在Blogger中顯示程序代碼

2 則留言:

URLs Memo

2015年5月23日 星期六

在Blogger中顯示程序代碼

2 則留言:

2015年5月23日星期六