在文章中顯示程式碼

為了在文章中顯示好看的程式碼，我曾經尋尋覓覓了好幾種 blog，最後還是回頭來用 Blogspot；雖然它在一般編譯器中並沒有特別的功能可以呈現程式碼的格式，但我們可以用 CSS template 的設定來達成這個功能！

這個方法主要是參考以下幾篇文章：
【Blog】文章中引用程式碼的作法 by 想要旅行的念頭停不住...
[筆記]在文章裡顯示優質的程式碼區 by 良人的大秘寶

首先，將以下程式碼複製到你 blog 設定 CSS template 的地方：

code {
　display: block;　　//表示在code標籤內的內容會被當成一個浮動方塊來顯示
　font-family: 'Courier New';　　//字型設定
　background: #f0f0f0 url(http://klcintw.images.googlepages.com/Code_BG.gif) left top repeat-y;
　//設定顯示程式碼的方塊的圖形，並讓圖形是從左上方 (left top) 畫下來，如果遇到程式碼太長，使得方塊也太大時，讓圖形往下重複出現 (repeated-y)
　overflow: auto;　　//如果剩下的內容無法顯示，"auto"表示請瀏覽器用捲動軸 (scrollbar) 來顯示其他的內容
　border: 1px solid #ccc;　　//方塊的邊線該畫多寬，以及顏色的設定　
　padding: 1px 10px 10px 21px;　　//方塊與顯示內容間的留白大小，四個數字分別設定的是：上方、右邊、下方、左邊
　max-height: 1200px;　　//這個方塊最大的顯示高度，注意有些瀏覽器不支援此屬性
　line-height: 1.2em;　　//設定每一行的行高
　letter-spacing: 0px;　　//字元間距
　margin: 5px 5px 0 15px;　　//方塊以外內容該與方塊之間留的間隙，四個數字分別設定的是：上方、右邊、下方、左邊
}

在你想在文章中顯示為程式碼的段落前後加上<code>、</code>標籤，如：
　<code>
　public class Test{
　　　public static void main(String[] args){
　　　　　System.out.println("It is just a test.");
　　　}
　}
　</code>

那麼在發佈之後就會出現你在上方設定的程式碼格式效果：

　public class Test{
　　　public static void main(String[] args){
　　　　　System.out.println("It is just a test.");
　　　}
　}


但要注意的是，如果你想放在<code>、</code>間的是含有<、>、&等符號的程式碼時，必須先將那些符號轉成適當的字元更換，否則會被瀏覽器當作是html的標籤給讀掉，當然也就看不到了：
  • < 轉成 &lt;
  • > 轉成 >lt;
  • & 轉成 &lt;

網路上有些工具可以幫我們作這種標籤的轉換，例如：HTML Converter，可以省去我們不少的麻煩。另外，如果你有顯示不同程式碼的需求的話 (例如 Java 跟 HTML/CSS 就差異蠻大的)，【Blog】文章中引用程式碼的作法一文中還有介紹不同的程式碼設定的方法，有興趣的朋友可以參考一下。

留言

張貼留言

這個網誌中的熱門文章

PHP：callback函數的使用

PHP 中有某些函數允許使用使用者定義的函數來作為參數，例如：call_user_func()、usort()。 如果想呼叫的是某物件的方法時，其參數則必須是一個包含兩個元素的陣列，index 為 0 的元素為欲呼叫其方法的物件變數，index 為 1 的元素則是方法名。 以下是使用的例子： <?php // An example callback function function my_callback_function() { 　　echo 'hello world!'; } // An example callback method class MyClass { 　　static function myCallbackMethod() { 　　　　echo 'Hello World!'; 　　} } // Type 1: Simple callback call_user_func('my_callback_function'); // Type 2: Static class method call call_user_func(array('MyClass', 'myCallbackMethod')); // Type 3: Object method call $obj = new MyClass(); call_user_func(array($obj, 'myCallbackMethod')); // Type 4: Static class method call (As of PHP 5.2.3) call_user_func('MyClass::myCallbackMethod'); // Type 5: Relative static class method call (As of PHP 5.3.0) class A { 　　public static function who() { 　　　　echo "A\n"; 　　} } class B extends A { 　　public static function who() { 　　　　echo "B\n...
閱讀完整內容

PHP：變數範圍

PHP 中的變數有著單一的存取範圍，也就是它定義時所在的範圍；如果在函數外定義，則為全域變數 (global variables)，整個 PHP 頁面的地方都可以使用到此變數，包含被 required 及 included 的檔案中也行；但若是定義在函式中的，則稱本地變數 (local variables)，在該函式之外的地方即無法使用。 但與 C-like 語言不同的地方是，若你在函數外定義了某個變數，在函數內沒有先定義而直接使用了一個同樣名稱的變數時，PHP 會將 函數內的那個視為新定義的變數 ，而不是沿用那個同名的全域變數；除非你以 global 關鍵字或 $GLOBALS 陣列來指定你的確要在函數中使用全域變數： <?php $a = 1; $b = 2; function test(){ 　　// 指向一個新定義的本地變數，因尚未指定初值，所以不會印出東西 　　echo $a; } function Sum1(){ 　　//使用 global 關鍵字說明這兩個變數是指向全域變數的 　　global $a, $b; 　　$b = $a + $b; } function Sum2(){ 　　//使用 $GLOBALS 陣列指定全域變數 　　$GLOBALS['b'] = $GLOBALS['a'] + $GLOBALS['b']; } ?> PHP 中的靜態 (static) 變數只能在函式中使用；靜態變數的值在程式離開函式後還會繼續保留，而且如果試圖以運算式的結果來初始化靜態變數時會產生錯誤。 <?php function foo(){ 　　static $int = 0; // correct 　　static $int = 1+2; // wrong (as it is an expression) 　　static $int = sqrt(121); // wrong (as it is an expression too) 　　//$int 的值在每次 foo() 被呼叫時都會加 1 　　$int++; 　　echo $int; } ?>
閱讀完整內容

PHP常用函數：陣列(array)

如果初始化為 $arr = array(1, 2, 3, 4, 5); $arr[] = 10; 插入一個 index 為 5，value 為 10 的元素。 $arr["x"] = 18; 插入一個 index 為字串 "x"，value 為整數 18 的元素。 count($arr) ：計算陣列裡的元素個數。 unset($arr[1]) ：去掉 index 為 1 的元素 unset($arr) ：將整個陣列清空，但之後如果再加入元素，其 index 是往上累加的，而非從 0 開始。 print_r($arr) ：(print human-readable)印出對人們來說較易讀的變數資訊，如果傳入的變數是陣列，則會將其中的 key-value 全都印出來。 array_values($arr) ：由於用 unset() 去掉陣列的元素後 index 可能會很混亂，此時可用 array_values() 函數來重整 index。 <?php $a = array(1 => 'one', 2 => 'two', 3 => 'three'); unset($a[2]); /* will produce an array that would have been defined as $a = array(1 => 'one', 3 => 'three'); and NOT $a = array(1 => 'one', 2 =>'three'); */ $b = array_values($a); // Now $b is array(0 => 'one', 1 =>'three') ?> (array) $scalarVar , array($scalarVar) ：兩者都是將某個數字換字串型別的變數 $scalarVar 轉成一個只具有一個元素，其 index 為 0，value 為 $scalarVar 的陣列。 array_diff($arr1, $arr2, ...) ：回傳一個陣列，...
閱讀完整內容