網頁程式碼的美化(高亮度)
- 詳細內容
- 分類：網站架設
- 發佈：2013-07-04, 週四 21:28
- 點擊數：2130
程式碼的美化(高亮度)：
在網路上看別人寫的程式碼都有各式各樣的顏色，看起來美美的。這種美觀的程式碼是怎麼做到的？其實這種美化程式碼一般都稱之為code highlight，中文都翻譯成程式碼高亮度。在google中搜尋code highlight或是syntax highlight就很容易找到這方面的資訊。除此之外，各大CMC(Content Management System)其實也都有自己內建或是外掛的code highlight程式。{jcomments on}
當然如果沒有或是不喜歡原本的code highlight程式，也可以在網路上找到其他的替代方案，這裡就介紹兩種形成程式碼高亮度的方式：
Syntax Highlighter：
Syntax Highlighter是個網路版的code highlight程式，適用各種類型的程式，包含Javascript、PHP、C++等。直接將程式碼變成帶有顏色的HTML語法。
貼上程式碼，按下Highlight! 就會出現預覽以及HTML碼：
SyntaxHighlighter 3.0.83：
一樣叫做syntaxhighter，這程式是在程式碼顯示時利用javascript來修改並顯示程式碼。看起來十分美觀，不過由於是執行Javascript來修改，所以有時候會反應會有點慢。
使用方式：
1.到 http://alexgorbatchev.com/SyntaxHighlighter/download/ 下載函式庫，或是使用線上版本。
2.將shCore.css與shThemeDefault.cs放進你的檔案裡 ( <link>標籤只能放在<head>標籤裡 )：
線上版：
<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" />
3.將shCore.js放進你的檔案裡：
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js" type="text/javascript"></script>
4.選擇你要美化的程式碼種類放進檔案裡：
允許的種類有：Bundled Brushes。
以javascript為例：
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js" type="text/javascript"></script>
5.將程式碼用<pre class="brush:js"></pre>包起來。
brush後面接受的詞彙請參考Bundled Brushes。
6.呼叫SyntaxHighlighter.all()
<script type="text/javascript"> SyntaxHighlighter.all() </script>
按個讚!~支持本站!~