WordPress 插件SyntaxHighlighter自动换行以及更正行号

作者: Arvin Chen 分类: Wordpress 来源: Break易站(www.breakyizhan.com)
  •   WordPress 教程

    在 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();
    });
    
    
  •   WordPress 教程
  •   本文标题:WordPress 插件SyntaxHighlighter自动换行以及更正行号 - Break易站
    转载请保留页面地址:https://www.breakyizhan.com/wpress/5033.html
      微信返利机器人
      免费:淘宝,京东,拼多多优惠券
      腾讯,爱奇艺,优酷的VIP视频免费解析,免费看
      即刻扫描二维码,添加微信机器人!

    发表笔记

    电子邮件地址不会被公开。 必填项已用*标注