常於尋找網路上有關網頁(PHP、HTML、javascript、ASP)、CSS、Java、VB等各項程式語言教學的程式設計者，於瀏覽某些網站或blog時應該曾發現某些網站在張貼有關程式碼內容時，不像一般網頁純文字方式，帶有類似如下之程式開發工具的行數顯示功能及語法顏色標記，並且能夠進行程式碼文字之複製動作，並非以擷取程式開發工具部分畫面來達成此效果。
import java.net.MalformedURLException; import java.net.URL; import android.os.Bundle; import android.app.Activity; import android.graphics.Bitmap;
雖然以HTML來設定字體色彩，並於張貼程式的每行前自行新增數字也能達到此效果，但當程式碼行數一多時，想必一定不是個好的方法。因此網路上有人開發出了SyntaxHighlighter
(當前版本為：3.0.83)，利用CSS搭配指定處理特定語法之js檔案，對張貼之程式碼進行美化。
程式資訊
程式類型：Plugin
程式版本：3.0.83
程式語言：CSS、javascript
程式性質：MIT License or the GNU General Public License (GPL) Version 3
程式大小：9.2 MB
官方網站： http://alexgorbatchev.com/SyntaxHighlighter/
程式下載：按這裡
SyntaxHighlighter可支援標記之語言 (官方連結)
|
Brush aliases |
|
bash, shell |
|
c-sharp, csharp |
|
cpp, c |
|
css |
|
delphi, pas, pascal |
|
diff, patch |
|
groovy |
|
js, jscript, javascript |
|
java |
|
perl, pl |
|
php |
|
plain, text |
|
py, python |
|
rails, ror, ruby |
|
scala |
|
sql |
|
vb, vbnet |
|
xml, xhtml, xslt, html, xhtml |
Step.01
下載SyntaxHighlighter檔案
(備註：不下載亦可使用官方http檔案路徑，直接跳Step03-2)
Step.02
將下載之檔案解壓縮後傳至可用http方式瀏覽之網路空間
Step.03
03-1
複製以下程式碼
將「我的檔案存放位置」替換為正確http連結<自行下載程式檔案放置位置>
<link href="http://我的檔案存放位置/styles/shThemeDefault.css" rel="stylesheet" type="text/css" /> <script src="http://我的檔案存放位置/scripts/shCore.js" type="text/javascript"></script> <script src="http://我的檔案存放位置/scripts/shAutoloader.js" type="text/javascript"></script> <script src="http://我的檔案存放位置/scripts/shBrushXml.js" type="text/javascript"></script> <script type="text/javascript">SyntaxHighlighter.all()</script>
03-2
複製以下程式碼<未下載檔案，欲使用官方連結路徑> (官方原文)
<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> <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js" type="text/javascript"></script> <script type="text/javascript">SyntaxHighlighter.all()</script>
Step.04
將複製程式碼插入於<body></body>之外，如下所示
<html> <head></head> <body> </body> 複製程式碼放這裡 </html>
痞客邦BLOG插入程式碼方式
進入後台→部落格→(左側)功能列→部落格管理→側邊欄位設定→(中間)內容欄→頁尾描述→設定→頁尾描述內容→貼上程式碼→完成
Step.05
於HTML標籤內使用以下<pre class="brush: 程式類型[註1]"></pre>標籤
<pre class="brush: xml"> 要張貼的程式碼 </pre>
痞客邦等BLOG方式，可利用發表文章中之編輯器，改選HTML方式，貼上以上程式碼
[註1] 程式類型主要為使程式判斷使用之程式語言類型，正確套用相關顏色，代表之brush值如下表所示
|
Brush name |
Brush aliases |
File name |
|
bash, shell |
shBrushBash.js |
|
|
c-sharp, csharp |
shBrushCSharp.js |
|
|
cpp, c |
shBrushCpp.js |
|
|
css |
shBrushCss.js |
|
|
delphi, pas, pascal |
shBrushDelphi.js |
|
|
diff, patch |
shBrushDiff.js |
|
|
groovy |
shBrushGroovy.js |
|
|
js, jscript, javascript |
shBrushJScript.js |
|
|
java |
shBrushJava.js |
|
|
perl, pl |
shBrushPerl.js |
|
|
php |
shBrushPhp.js |
|
|
plain, text |
shBrushPlain.js |
|
|
py, python |
shBrushPython.js |
|
|
rails, ror, ruby |
shBrushRuby.js |
|
|
scala |
shBrushScala.js |
|
|
sql |
shBrushSql.js |
|
|
vb, vbnet |
shBrushVb.js |
|
|
xml, xhtml, xslt, html, xhtml |
shBrushXml.js |
Step.06
若以上使用<pre class="brush: PHP">張貼的PHP程式碼</pre>可能會發現失敗，主因相關對應之js檔案於step03時並未載入，需參照Step05附表，按Step03方式加入以下程式碼，即可正常顯示，其他如此類推
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js" type="text/javascript">
備註：
若有注意下載的檔案及Step03基本必須載入的行數，即可發現第一行載入的style資料夾下，內含有shThemeEclipse.css等等以各種開發工具命名之CSS存在，主要為設定顯示的大小顏色等設定，Step03載入為shThemeDefault.css(預設風格)
留言列表
Android程式設計 (4)