Google Blogger 程式碼顯示 - SyntaxHighlighter

SyntaxHighlighter 為免費網站外掛程式 , 提供頁面較容易瀏覽程式碼內容的樣式 ,

文章中如需特定標注程式內容只需使用<pre></pre>標籤 , 並且給予符合的class樣式名稱 ,

就可以依不同程式碼類型顯示 , 十分方便．


官方網址：SyntaxHighlighter

下載網址：連結

使用說明：連結


支援以下類型顯示：

Brush name	Brush aliases	File name
ActionScript3	as3, actionscript3	shBrushAS3.js
Bash/shell	bash, shell	shBrushBash.js
ColdFusion	cf, coldfusion	shBrushColdFusion.js
C#	c-sharp, csharp	shBrushCSharp.js
C++	cpp, c	shBrushCpp.js
CSS	css	shBrushCss.js
Delphi	delphi, pas, pascal	shBrushDelphi.js
Diff	diff, patch	shBrushDiff.js
Erlang	erl, erlang	shBrushErlang.js
Groovy	groovy	shBrushGroovy.js
JavaScript	js, jscript, javascript	shBrushJScript.js
Java	java	shBrushJava.js
JavaFX	jfx, javafx	shBrushJavaFX.js
Perl	perl, pl	shBrushPerl.js
PHP	php	shBrushPhp.js
Plain Text	plain, text	shBrushPlain.js
PowerShell	ps, powershell	shBrushPowerShell.js
Python	py, python	shBrushPython.js
Ruby	rails, ror, ruby	shBrushRuby.js
Scala	scala	shBrushScala.js
SQL	sql	shBrushSql.js
Visual Basic	vb, vbnet	shBrushVb.js
XML	xml, xhtml, xslt, html, xhtml	shBrushXml.js

將需使用格式JS檔加入</head>之前

<script src='http://alexgorbatchev.com/pub/sh/3.0.83/scripts/shCore.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/3.0.83/scripts/shBrushPhp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/3.0.83/scripts/shBrushXml.js' type='text/javascript'/>
<script type='text/javascript'>   
    SyntaxHighlighter.all();
</script>
<link href='http://alexgorbatchev.com/pub/sh/3.0.83/styles/shCoreRDark.css' rel='stylesheet' type='text/css'/>

為程式排版更美觀可於CSS加入以下內容：

.toolbar{    /*將原本右上角會出現 ?(問號) 的版權宣告隱藏不顯示*/
    display: none !important;
    -webkit-box-shadow: 7px 6px 6px rgba(50, 50, 50, 0.75);  /* 陰影 */
    -moz-box-shadow:    7px 6px 6px rgba(50, 50, 50, 0.75);  /* 陰影 */
    box-shadow:         7px 6px 6px rgba(50, 50, 50, 0.75);  /* 陰影 */
    -webkit-border-radius: 8px;                              /* 圓角 */
    -moz-border-radius: 8px;                                 /* 圓角 */
    border-radius: 8px;                                      /* 圓角 */
}
 
body .syntaxhighlighter{    /*在 chrome 瀏覽器下程式碼右邊會出現醜醜的直向捲軸把它給移除掉*/
    overflow-y: hidden !important;
}
 
body .syntaxhighlighter div{    /*控制行高及字體大小*/
    height: 20px !important;
    line-height: 20px !important;
    font-size: 16px !important;
}

參考資料：網站後端的工作筆記