網頁

2012年8月25日 星期六

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(){
}

備註:

  1.  SyntaxHighlighter的作者有提供 cdn
    http://alexgorbatchev.com/SyntaxHighlighter/hosting.html )
    給blogger使用,千萬不要用google site上傳檔案。不然下載一個js檔可以花到7秒。
  2. autoloader可以只載入需要用到得語言檔,減少下載時間
  3. 要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;
    
  4. 如果要同時顯示javascript與html,pre tag可以這樣寫
    <pre class="brush: js; html-script: true">
    但是要手動匯入shBrushXml.js,因為autoLoader不會自己匯入。
  5. 要在document ready ( windows.onload )時執行SyntaxHighlighter.all()
  6. 若是使用google blogger則須開啟設定SyntaxHighlighter.config.bloggerMode = true;
  7. 使用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
  8. 在pre tag中< > 要跳脫成&lt; &gt;



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

沒有留言:

張貼留言