星期六下午天氣晴: using SyntaxHighlighter with auto loader on google blogger

進到blogger管理頁面 > 範本 > 修改HTML > 繼續
將下面的code放<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'/>

<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shAutoloader.js' type='text/javascript'/>
<script src='alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>
<script type='text/javascript'>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>


window.onload = function(){
function path()
{
  var args = arguments,
      result = []
      ;
       
  for(var i = 0; i < args.length; i++)
      result.push(args[i].replace('@', 'http://alexgorbatchev.com/pub/sh/current/scripts/'));
       
  return result
};
 
SyntaxHighlighter.autoloader.apply(null, path(
  'applescript            @shBrushAppleScript.js',
  'actionscript3 as3      @shBrushAS3.js',
  'bash shell             @shBrushBash.js',
  'coldfusion cf          @shBrushColdFusion.js',
  'cpp c                  @shBrushCpp.js',
  'c# c-sharp csharp      @shBrushCSharp.js',
  'css                    @shBrushCss.js',
  'delphi pascal          @shBrushDelphi.js',
  'diff patch pas         @shBrushDiff.js',
  'erl erlang             @shBrushErlang.js',
  'groovy                 @shBrushGroovy.js',
  'java                   @shBrushJava.js',
  'jfx javafx             @shBrushJavaFX.js',
  'js jscript javascript  @shBrushJScript.js',
  'perl pl                @shBrushPerl.js',
  'php                    @shBrushPhp.js',
  'text plain             @shBrushPlain.js',
  'py python              @shBrushPython.js',
  'ruby rails ror rb      @shBrushRuby.js',
  'sass scss              @shBrushSass.js',
  'scala                  @shBrushScala.js',
  'sql                    @shBrushSql.js',
  'vb vbnet               @shBrushVb.js',
  'xml xhtml xslt html    @shBrushXml.js'
));
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all()
}

</script>

在HTML編輯模式，將以下放入<body>中，測試一下：

<pre class="brush: js">
function foo(){
}
</pre>

結果：
（在預覽模式下看不出來，必須發布後才有效果）

function foo(){
}

備註：

SyntaxHighlighter的作者有提供 cdn
( http://alexgorbatchev.com/SyntaxHighlighter/hosting.html )
給blogger使用，千萬不要用google site上傳檔案。不然下載一個js檔可以花到7秒。
autoloader可以只載入需要用到得語言檔，減少下載時間

要highlight某行程式可以使用「;highlight:[行數1,行數2]」

<pre class="brush: js;highlight:[1,3]">

var a = 1;
var b = 2;
var c = 3;
var d = 4;
var e = 5;

如果要同時顯示javascript與html，pre tag可以這樣寫
```
<pre class="brush: js; html-script: true">
```
但是要手動匯入shBrushXml.js，因為autoLoader不會自己匯入。
要在document ready ( windows.onload )時執行SyntaxHighlighter.all()
若是使用google blogger則須開啟設定SyntaxHighlighter.config.bloggerMode = true;
使用chrome，行數會崩潰，可以加入css：
```
/*syntaxHighlighter*/
.syntaxhighlighter table td.gutter .line {
  text-align: right !important;
  padding: 0 8px 0 16px !important;
}
```
http://stackoverflow.com/questions/11804789/extra-lines-using-syntaxhighlighter-for-chrome-only
在pre tag中< > 要跳脫成< >

參考文件：
http://alexgorbatchev.com/SyntaxHighlighter/

星期六下午天氣晴

網頁

2012年8月25日星期六

using SyntaxHighlighter with auto loader on google blogger

沒有留言:

張貼留言

網頁

2012年8月25日 星期六

using SyntaxHighlighter with auto loader on google blogger

沒有留言:

張貼留言

2012年8月25日星期六