SyntaxHighLighter 3.0.83 高亮程式碼 在Google Blogger使用方法

目前最新版本為3.0.83

官方網站：http://alexgorbatchev.com/SyntaxHighlighter/

 

使用方法

1.進入管理後台—>範本—>編輯HTML

<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCoreDefault.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'/>

2.版本設置—>新增小工具—>選取Html/Javascript

<style>
.highlightsetting {
    overflow-y: hidden !important; /*修正右側滾動條之BUG*/
    border: 1px solid #2187BB; /*加入程式碼邊框*/
}
.syntaxhighlighter table td.gutter .line, .syntaxhighlighter table td.code .line {
    padding: 0 13px !important; /*修正行號距離*/
}
</style>
<script type='text/javascript'>
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.defaults['toolbar']=false; //隱藏問號按鈕
SyntaxHighlighter.defaults['class-name']='highlightsetting'; //自定義CSS設置
SyntaxHighlighter.defaults['auto-links']=false; //超連結設定顯示為文字
SyntaxHighlighter.config.space=' '; //消除Chrome複製時的BUG空白
SyntaxHighlighter.config.stripBrs=false; //略過Blogger之br標籤
SyntaxHighlighter.all();
</script>

參考來源：http://qqboxy.blogspot.com/2010/05/syntaxhighlighter.html

使用方式

程式加入方法：

<pre class="brush: 填入程式語言代碼"> 
 您的程式碼請貼此處。 
</pre>

填入程式語言代碼有

  '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'

如果是用Windows Live Writer，可以用外掛小工具

網站：http://precode.codeplex.com/

用法請參考：http://fundesigner.net/wlw-precode/