所以我在這篇文章裡面，分享一下我如何在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!');
}
可是你的最終方案複製時還是會複製到行數啊！
回覆刪除我後來是使用SyntaxHighlighter
但是加載有點慢就是了～
非常感謝你的回應。
刪除由於我平常是用Firefox和Chrome的關係，沒有出現複製到行數的問題，所以一直也發現不了自己的方法有問題。
結果我剛才在IE （Internet Explorer）一試，發覺行數果然被複製了 Orz
我另外再去研究一下，看看有沒有別的方法能解決這個問題吧。
我也是用google的代码美化方案,
回覆刪除不过我利用blogspot本身的 引用, 然后用JS把 blockquote 转化为 pre
https://zelikk.blogspot.com/2024/05/blogspot-code-prettify.html
update
回覆刪除我现在又添加了copy按钮了.
https://zelikk.blogspot.com/2024/06/blogspot-code-prism-hightlight-blockquote.html
https://zelikk.blogspot.com/2024/06/blogspot-blockquote-copy-button.html