2013年8月1日 星期四

程式碼上色 - SyntaxHighlighter


SyntaxHighlighter 官網

基本用法

第 1 種方式 - 使用 <pre> 標籤

大部份程式碼上色外掛都是使用 pre 的方式。好處是幾乎可以用在任何地方。缺點是所有的角括號都要轉換成 html 碼，例如 < 要轉換成 &lt;
但是有一些網站可以幫我們轉換，例如這裡。

範例 (使用官網提供的檔案)

步驟 1 ：在 head 裡面放這一段：
<link href="http://alexgorbatchev.com/pub/sh/current/styles/shCoreDefault.css" rel="stylesheet" type="text/css"></link>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js" type="text/javascript"></script>

第 3 行要根據程式碼選擇不同的檔案(Brushes, 畫筆、筆法)。如果是 php ，後面的檔名就改成 shBrushPhp.js 。

步驟 2 ：放入程式碼
<pre class="brush: php">
&lt;?php
function foo(){
    //do something
}
?&gt;
</pre>

步驟 3 ：最後在底部呼叫函數
<script type="text/javascript">
     SyntaxHighlighter.all()
</script>

第 2 種方式 - 使用 <script>

這種方式的好處是不需要特別處理角括號。不過缺點是 RSS 閱讀器可能會把 <script>標籤過濾掉。

<![CDATA[ 裡面的標籤不會被當標籤，所以我可以直接把 <?php 這樣的開頭標籤直接原原本本從 Dreamweaver 或 Eclipse 貼過來，不用寫成 &lt;?php
但是如果我要貼的程式就是 javascript ，在 blogger 還是會出錯。像下面這個例子就不行，blogger會說 您的 HTML 不被接受: 結尾標記沒有對應的開頭標記: SCRIPT

第 2 行的 <script> 可以被當成純文字，但是第 8 行的 </script> 卻被當成結束標籤，導致標籤不成對。

各種 Brushes

<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushDelphi.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushDiff.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushGroovy.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushScala.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js"></script>

CSS

官網的範例是引用這兩支
http://alexgorbatchev.com/pub/sh/current/styles/shCore.css
http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css

我上面卻只引用
http://alexgorbatchev.com/pub/sh/current/styles/shCoreDefault.css

忘記從哪邊看來的，反正這樣也是可以。 比較了一下， shCoreDefault.css 包含 shCore.css 全部的內容，而且後面還多了一些樣式。那可不可以只引用 shThemeDefault.css ？不行，版面會亂掉。

其它樣式：
shThemeDefault.css
shThemeDjango.css
shThemeEclipse.css
shThemeEmacs.css
shThemeFadeToGrey.css
shThemeMidnight.css
shThemeRDark.css
shThemeDefault.css
shThemeDjango.css
shThemeEclipse.css
shThemeEmacs.css
shThemeFadeToGrey.css
shThemeMidnight.css
shThemeRDark.css

自動判斷程式碼

引用檔 
<link href="http://alexgorbatchev.com/pub/sh/current/styles/shCoreDefault.css" rel="stylesheet" type="text/css"></link>
<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 type="text/javascript">
SyntaxHighlighter.autoloader(
  'applescript            http://alexgorbatchev.com/pub/sh/current/scripts/shBrushAppleScript.js',
  'actionscript3 as3      http://alexgorbatchev.com/pub/sh/current/scripts/shBrushAS3.js',
  'bash shell             http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js',
  'coldfusion cf          http://alexgorbatchev.com/pub/sh/current/scripts/shBrushColdFusion.js',
  'cpp c                  http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js',
  'c# c-sharp csharp      http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js',
  'css                    http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js',
  'delphi pascal          http://alexgorbatchev.com/pub/sh/current/scripts/shBrushDelphi.js',
  'diff patch pas         http://alexgorbatchev.com/pub/sh/current/scripts/shBrushDiff.js',
  'erl erlang             http://alexgorbatchev.com/pub/sh/current/scripts/shBrushErlang.js',
  'groovy                 http://alexgorbatchev.com/pub/sh/current/scripts/shBrushGroovy.js',
  'java                   http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js',
  'jfx javafx             http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJavaFX.js',
  'js jscript javascript  http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js',
  'perl pl                http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js',
  'php                    http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js',
  'text plain             http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js',
  'py python              http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js',
  'ruby rails ror rb      http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js',
  'sass scss              http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSass.js',
  'scala                  http://alexgorbatchev.com/pub/sh/current/scripts/shBrushScala.js',
  'sql                    http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js',
  'vb vbnet               http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js',
  'xml xhtml xslt html    http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js'
);
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all()
</script>
(程式碼, 上色, 高亮, SyntaxHighlighter)

張貼者： 於
標籤：

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)