WordPress通過jQuery和CSS使高亮代碼實現可伸展的方法分享

公元2011年09月30日沒人鳥我喲打醬油看熱鬧的有:2,647 views

WordPress通過jQuery和CSS使高亮代碼實現可伸展的方法分享

相信大多數博主都用的有代碼高亮這個插件吧?在使用過程中,不知道博主們有沒有為有些代碼過長而無法實現換行而苦惱的,雖然SyntaxHighlighter 這個代碼高亮插件可以實現換行功能,但是在實際的使用過程中效果有時不盡人意,或者會出現轉碼而導致代碼無法使用,下面我們就來看怎麼解決!

我們可以通過jQuery和CSS做一個鼠標懸停時可以自由自動伸展的代碼框.這樣就可以解決高亮代碼過長而影響整體頁面美觀的問題了,下面我們就來看看具體怎麼實現:

首先:當然是JS文件!

下面就是伸展中需要的JS代碼,大家可以直接調用,也可以另存為一個獨立的JS文件,這個隨大家喜好,就不做過多的解釋了!直接上代碼

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
(function ($) {
    $("pre:not([name='code'])").wrapInner("<span></span>");
 
$("pre").hover(function() {
    var contentwidth = $(this).contents().width();
    var blockwidth = $(this).width();       
    if(contentwidth > blockwidth) {
       $(this).stop().animate({ width: '1024px' }, 250, 
function(){$(this).css("overflow","auto");});
        }
    }, function() {
       $(this).stop().animate({ width: '600px' }, 250, 
function(){$(this).css("overflow","hidden");});
});
})(jQuery);

以上代碼中1024PX是伸展後的寬度,當然這個是變值,可以自行修改,600px是當前正文部分的寬度,這個是根據自己主題的正文實際寬度酌情修改的,OK?

其次:調用JS文件!

寫完JS文件後當然是調用了,在</body>結束代碼之前加入以上CS,當然,你如果是直接寫入的就另算了,獨立JS調用代碼如下:

1
<script src="路徑.js" type="text/javascript"></script>

最後:CSS樣式設定!

挺簡單的,只需要在style文件中對<pre>的樣式做一個簡單的設定即可,代碼如下:

1
2
3
4
pre {
    overflow: hidden; 
    z-index: 999;
}

到此為止,大功告成,可以享受下效果了,That's All! 收工!