Script & CSS

2011年5月18日 星期三

在 Blogger 張貼美觀的程式碼

首先，在blogger資訊主頁點選設計功能，再點選修改HTML頁籤，即可以編輯範本的原始碼，然後在<head>與</head>區塊加入下列的程式碼。
第4至9行的程式碼是要使用的程式語言類型，只需要選擇有使用到即可。

SyntaxHighlighter Bundled Brushes 有所有支援語言的列表與該語言的 JavaScript 檔名。
<link href="http://alexgorbatchev.com/pub/sh/current/styles/shCore.css" rel="stylesheet" type="text/css" />
<link href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css" rel="stylesheet" type="text/css" />
然後在編輯文章時，需使用原始碼模式(編輯HTML)，將程式碼用<pre class="brush: alias">...</pre>標籤包住，即可顯示美觀的程式碼。
其中要注意的是 alias 的名稱，需依照不同的程式碼類型來填寫相對應的筆刷名稱(Brush aliases)。 目前支援的程式語言列表，則可以照考 SyntaxHighlighter Bundled Brushes 的說明。

這裡舉一個PHP程式碼的例子，在Blogger的文章內容中輸入下列內容:
<pre class="brush: php">
  // test function
  function Hello() {
   echo "Hello, World";
  }
 </pre>
產生的結果如下:
// test function
  function Hello() {
   echo "Hello, World";
  }
張貼者： 於

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)