在 WordPress 的插件中,SyntaxHighlighter 是一个Wordpress 文章中对代码进行高亮的插件。

在 v2.x 的版本中,是可以支持自动换行的,但是复制的时候却包括了行号。在 v3.x 版本中改善了复制功能,但是取消了自动换行的功能。

更改之后版本v3.x 的效果如下:

也可访问Tomcat下Server.xml配置的详解这篇文章进行查看。

SyntaxHighlighter自动换行以及更正行号的方法

更改CSS

.syntaxhighlighter, .syntaxhighlighter div, .syntaxhighlighter code, .syntaxhighlighter table, .syntaxhighlighter table td, .syntaxhighlighter table tr, .syntaxhighlighter table tbody{
white-space:pre-wrap !important;
word-break:all-break;
}

加入js


$(function () {
// Line wrap back
var shLineWrap = function () {
    $('.syntaxhighlighter').each(function () {
        // Fetch
        var $sh = $(this),
            $gutter = $sh.find('td.gutter'),
            $code = $sh.find('td.code')
            ;
        // Cycle through lines
        $gutter.children('.line').each(function (i) {
            // Fetch
            var $gutterLine = $(this),
                $codeLine = $code.find('.line:nth-child(' + (i + 1) + ')')
                ;
            //alert($gutterLine);
            // Fetch height
            var height = $codeLine.height() || 0;
            if (!height) {
                height = 'auto';
            }
            else {
                height = height += 'px';
                //alert(height);
            }
            // Copy height over
            $gutterLine.attr('style', 'height:' + height + '!important'); 
            // fix by Edi, for JQuery 1.7+ under Firefox 15.0
            console.debug($gutterLine.height(), height, $gutterLine.text(), $codeLine);
        });
    });
};
// Line wrap back when syntax highlighter has done it's stuff
var shLineWrapWhenReady = function () {
    if ($('.syntaxhighlighter').length === 0) {
        setTimeout(shLineWrapWhenReady, 10);
    }
    else {
        shLineWrap();
    }
};
// Fire
shLineWrapWhenReady();
});

 
转载请保留页面地址:https://www.breakyizhan.com/wpress/5033.html
扫描二维码添加微信 
  • ,每次淘宝领取淘宝优惠券,淘宝购物更优惠。现在添加微信,还可以领取机械键盘50元优惠券!添加微信后回复机械键盘即可领取!
    支持我们,就用微信淘宝!