星期二, 1月 01, 2013

blogger.com 程式碼高亮設定筆記

blogger.com 程式碼高亮設定筆記

作者網站：http://alexgorbatchev.com/SyntaxHighlighter/

1. 備份 html 樣式

2. 簡易設法：
加在 head 裡：
<!--SYNTAXHIGHLIGHTER BEGINS-->
<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/shBrushCpp.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/shBrushPhp.js' type='text/javascript'/>
<script language='javascript'>
SyntaxHighlighter.config.bloggerMode=true;
SyntaxHighlighter.all();
</script>
<!--SYNTAXHIGHLIGHTER ENDS-->

3. 動態筆刷(dynamic brush)設法：
加在 head 裡：
<!--SYNTAXHIGHLIGHTER BEGINS-->
<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/shThemeMidnight.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'/>
<!--SYNTAXHIGHLIGHTER ENDS-->
加在 body 裡：
<!--SYNTAXHIGHLIGHTER BEGINS-->
<style>
.mysyntax {
  border: 1px solid #f6b26b; /* 程式碼加邊框 */
  overflow-y: hidden !important; /* 關畢直立捲動條 */
}
.syntaxhighlighter table td.gutter .line, .syntaxhighlighter table td.code .line {
  padding: 0 10px !important; /*修正行號距離*/
}
</style>
<script type='text/javascript'>
var baseSyntaxHighlighterScriptsPath = 'http://alexgorbatchev.com/pub/sh/current/scripts/';
function getSyntaxHighlighterScriptPath(name) {
  return name.replace('@', baseSyntaxHighlighterScriptsPath);
}
SyntaxHighlighter.autoloader(
 [ 'applescript', getSyntaxHighlighterScriptPath('@shBrushAppleScript.js') ],
 [ 'actionscript3', 'as3', getSyntaxHighlighterScriptPath('@shBrushAS3.js') ],
 [ 'bash', 'shell', getSyntaxHighlighterScriptPath('@shBrushBash.js') ],
 [ 'coldfusion', 'cf', getSyntaxHighlighterScriptPath('@shBrushColdFusion.js') ],
 [ 'cpp', 'c', getSyntaxHighlighterScriptPath('@shBrushCpp.js') ],
 [ 'c#', 'c-sharp', 'csharp', getSyntaxHighlighterScriptPath('@shBrushCSharp.js') ],
 [ 'css', getSyntaxHighlighterScriptPath('@shBrushCss.js') ],
 [ 'diff', 'patch', 'pas', getSyntaxHighlighterScriptPath('@shBrushDiff.js') ],
 [ 'erl', 'erlang', getSyntaxHighlighterScriptPath('@shBrushErlang.js') ],
 [ 'groovy', getSyntaxHighlighterScriptPath('@shBrushGroovy.js') ],
 [ 'java', getSyntaxHighlighterScriptPath('@shBrushJava.js') ],
 [ 'jfx', 'javafx', getSyntaxHighlighterScriptPath('@shBrushJavaFX.js') ],
 [ 'js', 'javascript', 'jscript', getSyntaxHighlighterScriptPath('@shBrushJScript.js') ],
 [ 'perl', 'pl', getSyntaxHighlighterScriptPath('@shBrushPerl.js') ],
 [ 'php', getSyntaxHighlighterScriptPath('@shBrushPhp.js') ],
 [ 'text', 'plain', getSyntaxHighlighterScriptPath('@shBrushPlain.js') ],
 [ 'py', 'python', getSyntaxHighlighterScriptPath('@shBrushPython.js') ],
 [ 'ruby', 'rails', 'ror', 'rb', getSyntaxHighlighterScriptPath('@shBrushRuby.js') ],
 [ 'sass', 'scss', getSyntaxHighlighterScriptPath('@shBrushSass.js') ],
 [ 'scala', getSyntaxHighlighterScriptPath('@shBrushScala.js') ],
 [ 'sql', getSyntaxHighlighterScriptPath('@shBrushSql.js') ],
 [ 'vb', 'vbnet', getSyntaxHighlighterScriptPath('@shBrushVb.js') ],
 [ 'xml', 'xslt', 'html', 'htm', getSyntaxHighlighterScriptPath('@shBrushXml.js') ]
);
SyntaxHighlighter.config.bloggerMode=true;
SyntaxHighlighter.config.space=' '; /* 消除Chrome複製時的BUG空白 */
SyntaxHighlighter.config.stripBrs=false; /* 略過Blogger之br標籤 */
SyntaxHighlighter.defaults['auto-links']=false; /* 關畢自動連結 */
SyntaxHighlighter.defaults['toolbar']=false; /* 關畢工具列 */
SyntaxHighlighter.defaults['class-name']='mysyntax'; /* 自定義樣式 */
SyntaxHighlighter.all();
</script>
<!--SYNTAXHIGHLIGHTER ENDS-->


3. 支援語法
在 3.x 版，作者提供了動態筆刷載入的功能：
http://alexgorbatchev.com/SyntaxHighlighter/manual/api/autoloader.html
http://alexgorbatchev.com/SyntaxHighlighter/whatsnew.html

目前支援語法：
http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/

4. 樣式
http://alexgorbatchev.com/SyntaxHighlighter/manual/themes/

選一個來用：
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDjango.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeEclipse.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeEmacs.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeFadeToGrey.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeMidnight.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeRDark.css' rel='stylesheet' type='text/css'/>

5. 設定
http://alexgorbatchev.com/SyntaxHighlighter/manual/configuration/

6. 用法
<pre class="brush: cpp;">
<pre class="brush: js; first-line: 10">
<pre class="brush: php; highlight: 2">
<pre class="brush: plain; highlight: [1, 3]">
<pre class="brush: java;" title="my title">
<pre class="brush: html; collapse: true" title="my title">

7. 其他

  • 動態載入語法功能必須將一部份程式碼移到 body 裡才會正常，試過用 window.onload 但是效果不好，所以我的方法是直接加在 </body> 前面。(這跟 javascript 與 html 在 browser 中載入的方式有關)
  • 官方提供的動態載入 js 在新版 blogger 裡，for 那行的 i<args.length 會被 google 的 xml parser 當成錯誤，所以改用另一個沒有迴圈的版本。
  • 用 chrome 複製程式碼會有 bug，已修正。
動態載入程式碼來源：

一些 bug 的修正可以參考：
張貼者： 於
標籤：

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)