欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

z-blog SyntaxHighlighter 长代码无法换行解决办法(jquery)

程序员文章站 2022-06-07 14:41:23
z-blog syntaxhighlighter 长代码无法换行解决办法(jquery)。 1、css修改: 在文件夹:\zb_system\admin\ueditor\t...

z-blog syntaxhighlighter 长代码无法换行解决办法(jquery)。

1、css修改:

z-blog SyntaxHighlighter 长代码无法换行解决办法(jquery)

在文件夹:\zb_system\admin\ueditor\third-party\syntaxhighlighter

在文件shcoredefault.pack.css添加css:

 

代码如下:


body .syntaxhighlighter .line{     white-space: pre-wrap !important;} .syntaxhighlighter{width:100%!important;margin:.3em 0 .3em 0!important;position:relative!important;overflow:auto!important;background-color:#f5f5f5!important;border:1px solid #ccc!important;word-break:break-all;

 

2、jquery代码:

$(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('<span style="width: auto; height: auto; float: none" id=0_nwp><a style="text-decoration: none" id=0_nwl href="https://cpro.baidu.com/cpro/ui/uijs.php?rs=1&u=http%3a%2f%2fwww%2esuchso%2ecom%2fprojecteactual%2fz%2dblog%2djquery%2dsyntaxhighlighter%2dlongcode%2ehtml&p=baidu&c=news&n=10&t=tpclicked3_hc&q=95053049_cpr&k=style&k0=%ce%c4%bc%fe%bc%d0&kdi0=32&k1=style&kdi1=1&k2=%b2%a9%bf%cd&kdi2=1&sid=77860fedb9413425&ch=0&tu=u1702844&jk=e7459084404b7b2f&cf=29&fv=15&stid=9&urlid=0&luki=2&seller_id=1&di=128" target=_blank mpid="0"><span style="width: auto; float: none; height: auto; color: #0000ff; font-size: 16px">style</span></a></span>', '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();});

上面的代码就是属于长代码。大家看看是不是都换行了??

现在,行号的高度就能和代码的高度保持一致了。