close

 

      常於尋找網路上有關網頁(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檔案，對張貼之程式碼進行美化。

 

程式資訊

程式名稱：Syntaxhighlighter
程式類型：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插入程式碼方式

進入後台→部落格→(左側)功能列→部落格管理→側邊欄位設定→(中間)內容欄→頁尾描述→設定→頁尾描述內容→貼上程式碼→完成

 SyntaxHighlighter_step05      

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

bash, shell

shBrushBash.js

C#

c-sharp, csharp

shBrushCSharp.js

C++

cpp, c

shBrushCpp.js

CSS

css

shBrushCss.js

Delphi

delphi, pas, pascal

shBrushDelphi.js

Diff

diff, patch

shBrushDiff.js

Groovy

groovy

shBrushGroovy.js

JavaScript

js, jscript, javascript

shBrushJScript.js

Java

java

shBrushJava.js

Perl

perl, pl

shBrushPerl.js

PHP

php

shBrushPhp.js

Plain Text

plain, text

shBrushPlain.js

Python

py, python

shBrushPython.js

Ruby

rails, ror, ruby

shBrushRuby.js

Scala

scala

shBrushScala.js

SQL

sql

shBrushSql.js

Visual Basic

vb, vbnet

shBrushVb.js

XML

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(預設風格) 

arrow
arrow
    文章標籤
    syntaxhighlighter 痞客邦 php html xml java javascript SQL VB CSS C# C++ Perl 程式碼
    全站熱搜
    創作者介紹
    創作者 spicywolfs 的頭像
    spicywolfs

    spicywolfs space

    spicywolfs 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄