星期三, 12月 19, 2007

[Note]plugin_syntaxhighlighter

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>

沒有留言: