網頁

2011年2月21日 星期一

如何在部落格加入程式碼高亮度語法辨識

相信很多寫部落格的同好，遇到要發佈關於程式碼的部份都會很頭大，原因是語法格式要做一些小修改才能正確的顯示在部落格上。遇到比較好的部落格網站會提供某些標籤供使用，但是如果能夠像在程式編輯器裡面寫程式時，不但可以顯示各語法間的高亮度辨識，也有行碼可看，這樣不是更好嗎?

請看下面程式碼，寫程式時不就是這個樣子的編輯視窗嗎?

static uint8_t buffer[60];
static uint8_t screen_mem[8];

const prog_uint8_t dot_00[] = {
0xEF, 0x96, 0xEF, 0xCB, 0xAD, 0xEF, 0x86, 0x8F};

// definition method 1
// typedef char PROGMEM prog_char;
const prog_char message_00[] = " THIS IS MADE BY a-lu. ";
const prog_char message_01[] = " WHAT'S UP MAN! ";

// msg_00_0 save in SRAM
const prog_char* msg_00_0[] = {
 message_00,
 message_01
};

不僅僅是 C 語言而已，只要是現今大部分常用的語法，大多可以正常的辨識並使用不同顏色與高亮度顯示出來，並且可以配合網頁或是部落格而有不同的佈景主題可以選用，只要會使用下面的技巧就可達到這個目的。

如果你想學習如何在部落格中使用這種技巧的話，那就繼續往下看吧！

這個語法辨識的技巧是使用 CSS 配合 Javascript，然後將這些檔案利用外部連結的方式崁入到部落格的樣本裡。

以 Google Blog 做示範，這裡所使用的 CSS 與 Javascript 的檔案是 SyntaxHighlighter 網站所提供，你可以下載後直接使用，不過因為部落格不是自行架設的，無法將這些檔案放到伺服器上去，只能使用外部連結的方式來達到語法辨識高亮度表示的功能。

SyntaxHighlighter 提供不同語言之間的語法辨識，辨識的種類有 C/C++、CSS、XML、Java、Pascal、Delphi、......等 (詳細支援的檔案類型請上 SyntaxHighlighter Bundled Brushes 了解 )，使用的時候只要在所要顯示的程式碼加入
<pre class="brush:檔案類型">
程式碼放置的位置
</pre>
即可。其中，"檔案類型"就填上所要辨識程式碼即可，上面所使用的檔案類型是 css，所以 class="brush:css"

另外還有一種顯示的方法是使用 <SCRIPT></SCRIPT>的方式，這種方式是你無法在部落格"撰寫"的視窗下看到程式碼，必須到 "修改 HTML" 視窗下才能修改，不過優點是你不需要將程式碼中所有的 "<" 小於或是 "lgt;" 符號全部換成特殊字元符號 "& lt;" 或是 "& gt;"，只要將要顯示在網頁上的程式碼剪下然後複製到語法辨識標籤中，就可以馬上顯示出來。這兩種顯示方法的優缺點在 SyntaxHighLighter Installation 有做比較。
<script class="brush: js" type="syntaxhighlighter">
<![CDATA[
程式碼放置的位置
]]></script>
<SCRIPT></SCRIPT>使用的方式與 <pre></pre> 一樣，只要修改 "檔案類型" 並剪下填上到 "程式碼放置位置" 即可。

除了正確的語法辨識之外，SyntaxHighlighter 還提供語法高亮度顯示，可以根據不同網頁顏色背景選擇不一樣的語法高亮度顯示佈景主題(themes)，現在有提供七種，像這個頁面所使用的佈景主題是 "Fade To Gray"。先記住這部份可以做調整，接下來會講到這部份。

到這邊為止，我們已經知道如何在部落格使用這些所謂的顯示標籤，以及如何修改相對應的檔案類型。現在進一步的，我們必須將這些 JavaScript 與 CSS 檔案加入到部落格的樣本頁面來，這樣每次在使用這些標前時，頁面才會自動呼叫並轉換這些需要高亮度顯示的程式碼。

在 SyntaxHighlighter Installation 頁面中提到：

To get SyntaxHighlighter to work on you page, you need to do the following:
  1. Add base files to your page: shCore.js and shCore.css
  2. Add brushes that you want (for example, shBrushJScript.js for JavaScript, see the list of all available brushes)
  3. Include shCore.css and shThemeDefault.css
  4. Create a code snippet with either <pre> or <script> method (see below)
  5. Call SyntaxHighlighter.all() JavaScript method
其實有看也不是很懂，反正主要是 SyntaxHighlighter 要能正常的動作必須要做如下的幾個事情，啦啦啦的......一大堆！

跟著下面的步驟做就對了，不需要很懂這些東東，會用就好，如果要做研究就另當別論！

  • 登入你的 "Google" 帳號，進入到部落格的資訊主頁，點擊"設計"

點擊 "修改 HTML"，在下方的 HTML 碼就是部落格頁面產生時的樣本檔，我們所填寫的部落格文字都會被嵌入到下方的一個區塊裡。在部落格頁面點擊滑鼠右鍵選擇"檢視頁面程式碼"就會看到這些文字被嵌到哪個區塊中。
  • 下方是一個範例，主要的部分在<<!--Syntax Highlighter --> 到 <!-- End of Syntax Highlighter -->，這一部分就是要加到部落格樣本頁面的程式碼。先別複製它，這部分的程式碼必須依你實際的需要做修改，再用到你的樣本頁面裡，請繼續往下看說明
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>

<!--Syntax Highlighter --> 
<!--1. 必要檔案--> <link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<!--2. 佈景主題--> <link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeFadeToGrey.css' rel='stylesheet' type='text/css'/>
<!--1. 必要檔案--> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>

<!-- Brushes -->
<!--3. 語法辨識--> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'/> 
<!--3. 語法辨識--> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/> 
<!--3. 語法辨識--> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/> 
<!--3. 語法辨識--> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'/> 
<!--3. 語法辨識--> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>

<!-- JavaScript Method -->
<script language='javascript'> 
<!--4. 組態設定--> SyntaxHighlighter.config.bloggerMode = true;
<!--5. 語法辨識--> SyntaxHighlighter.all();
</script> 
<!-- End of Syntax Highlighter -->

  <head>

編輯流程(這邊是重點)：
  1. 必須加入的檔案：shCore.css、shCore.js
  2. 選擇要使用的佈景主題 (只能選擇其中的一個)，如範例使用 Fade To Gray (shThemeFadeToGrey.css)
  3. 選擇會用到的語法辨識模組 (可以選擇多種，但如果頁面載入速度受影響，可再做取捨)
  4. 設定 Syntax Highlighter 的組態，只要設定 BloggerMode = true 即可整合進部落格樣本頁面裡，Syntax Highlighter Configuration 請點擊這裡查看。
  5. 呼叫 "SyntaxHighlighter.all()" JavaScript 函式執行，這會在頁面載入後自動執行，如果放置的位置在上面範例所指定的位置
  6. 複製 <<!--Syntax Highlighter --> 到 <!-- End of Syntax Highlighter --> 區段間的程式碼進行修改
  7. 將修改後的程式碼複製貼到樣本頁面中的 <head>上方，如範例所示一樣。
完成編輯流程後，接下來每次要使用這個語法辨識的功能時，利用一開始談到的兩種方法，就可達到如這個頁面顯示的程式碼一樣，不但可自動進行語法辨識還有漂亮的高亮度顏色作顯示，相信這個功能的呈現將會為您的網站添色不少！

張貼者： sakuyaki 於 2/21/2011 01:26:00 下午
標籤：

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)