SyntaxHighlight在Blogger的使用方式

在Blogger中要顯示程式碼, 使用了SyntaxHighlight插件來處理. 因此需要在設定中插入一些JS程式以便能夠正確的運作.

引入SyntaxHighlight的JS及CSS

要讓Blogger支援SyntaxHighlight, 需要在範本中加入以下設定

<!-- Blogger中的設定檔-->
<!-- 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='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js' type='text/javascript'/>   
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPowerShell.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>

<script language='javascript' type='text/javascript'> 
    SyntaxHighlighter.config.bloggerMode = true;
    SyntaxHighlighter.all();
</script>
<!-- .../head -->

改變背景

SyntaxHighligh支援不同的背景, 可以在範本中將shThemeDefault.css取代掉改成不同的背景主題. 我個人比較喜歡shThemeRDark.css。

設增Title

<script type="syntaxhighlighter" class="brush: js" title="This is a title, check it out!">
    $.ajax({
        url: path,
        type: 'GET',
        dataType: 'text',
        success: function(code)
        {
            var ext = path.match(/\w+$/)[0],
                name = brushes[ext],
                brush = new SyntaxHighlighter.brushes[name]()
                ;
            brush.init({ toolbar: false });
            $this.append(brush.getHtml(code));
        }
    });
</script>