在 blogger 使用 dp.syntaxhighlighter 的話,你會發現根本無法生效,主要是因為 blogger 把換行符號都替換成 <br/> 了,而且還沒有設定可以決定是否要替換。
很幸運地,有人已經提出解決方法:yehyeh: Blogger dp.SyntaxHighlighter斷行問題解決方法
只是,我已經套用blogger-ext2了,於是想說,是不是可以寫一個blogger-ext2的 plugin 來解決這個問題。
非常感謝jQuery的強大功能,不到半天就完成了,最重要的是,不用像上面解決方法一樣,寫了一堆 code。
// Register dp.SyntaxHighLighter // Dependency: // jQuery-1.2.1 // blogger-ext2-core (最新版,0.7.x 的樣子) // dp.syntaxhighlighter-1.5.1 BloggerExt.SH = function() { // Plugin 會由此開始 if( dp!='undefined' ) { // 找到 pre, textarea 下所有 br,然後替換成換行符號,收工。 jQuery("pre > br").each( function() { jQuery(this).replaceWith( "\n" ); } ); jQuery("textarea > br").each( function() { jQuery(this).replaceWith( "\n" ); } ); dp.SyntaxHighlighter.ClipboardSwf = 'http://syntaxhighlighter.googlecode.com/svn/tags/1.5.1/Scripts/clipboard.swf'; dp.SyntaxHighlighter.HighlightAll('code'); } }; BloggerExt.SH.user_pref = function() { var prefs = []; return prefs; }; BloggerExt.SH.update_pref = function(prefs) { }; BloggerExt.register('SH', { SH: true} );
使用範例:
<script type="text/javascript" src="jquery-1.2.1.pack.js"></script> <script src="blogger_ext2.js" type="text/javascript"></script> <script type="text/javascript" src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.1/Scripts/shCore.js'></script> <script type="text/javascript" src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.1/Scripts/shBrushCSharp.js'></script> <script type="text/javascript" src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.1/Scripts/shBrushVb.js'></script> <script type="text/javascript" src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.1/Scripts/shBrushPhp.js'></script> <script type="text/javascript" src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.1/Scripts/shBrushJScript.js'></script> <script type="text/javascript" src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.1/Scripts/shBrushSql.js'></script> <script type="text/javascript" src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.1/Scripts/shBrushXml.js'></script> <script type="text/javascript" src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.1/Scripts/shBrushPython.js'></script> <script type="text/javascript" src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.1/Scripts/shBrushCss.js'></script> <script type="text/javascript" src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.1/Scripts/shBrushCpp.js'></script> <!--假設你已經把上面代碼存為 plugin_syntaxhighlighter.js 了 --> <script type="text/javascript" src='plugin_syntaxhighlighter.js'></script>