2012年8月2日 星期四

SyntaxHighlighter 3.0.83 的設定

2009 年設定使用 SyntaxHighlighter 時,我選擇了 2.0.320 這個版本,然後就一直這麼用到最近,只是偶爾會覺得它載入頁面有點慢。這兩天發現 SyntaxHighlighter 早在 2010 年改版成 3.0.83 版,爬了爬文又反覆測試之後,終於將 SyntaxHighlighter 3.0.83 設定完成。

然後,我又將從 2009 年開始到現在的文章全部翻看一遍,只有幾篇用了 SyntaxHighlighter 耶!

噗~~~ 我還以為會有很多篇呢?這幾篇剛好讓我拿來測試 SyntaxHighlighter 的設定。

以下也記錄改成 SyntaxHighlighter 3.0.83 時,在部落格版面的範本裡添加的內容:

<link href="http://alexgorbatchev.com/pub/sh/current/styles/shCore.css" rel="stylesheet" type="text/css"></link>
<link href="http://alexgorbatchev.com/pub/sh/current/styles/shCoreDefault.css" rel="stylesheet" type="text/css"></link>
<link href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css" id="shTheme" rel="stylesheet" type="text/css"></link>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shAutoloader.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushAS3.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushDiff.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJavaFX.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPowerShell.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushScala.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js" type="text/javascript"></script>
<style>
.highlightsetting {
    overflow-x: auto !important; /*修正下邊滾動條之 BUG*/
    overflow-y: hidden !important; /*修正右側滾動條之 BUG*/
    border: 1px solid #2187BB; /*加入程式碼邊框*/
}
.highlightsetting .line.alt1 {
    background-color: #EEE !important; /*这个表示奇数行颜色*/
}
.highlightsetting .line.alt2 {
    background-color: white !important; /*这个表示偶数行颜色*/
}
</style>
<script type="text/javascript">
    SyntaxHighlighter.config.bloggerMode = true;
    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>

沒有留言: