服务器之家:专注于服务器技术及软件下载分享
分类导航

DEDECMS|帝国CMS|Discuz|PHPCMS|Wordpress|ZBLOG|ECSHOP|苹果CMS|极致CMS|CMS系统|

服务器之家 - 建站程序 - ZBLOG - z-blog SyntaxHighlighter 长代码无法换行解决办法(jquery)

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

2021-04-20 16:51suchso ZBLOG

由于我的博客主要是代码分享,很多贴的代码,都很长。很多时候我都是手动给他换行。但是今天实在是受不了。从网上找个办法解决一下

由于我的博客主要是代码分享,很多贴的代码,都很长。很多时候我都是手动给他换行。

但是今天实在是受不了。从网上找个办法解决一下。

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代码:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
$(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="http://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();});

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

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

延伸 · 阅读

精彩推荐
  • ZBLOGz-blog分类目录静态化实现方法

    z-blog分类目录静态化实现方法

    今天狠狠的给这个博客动了一次大手术,那就是所有目录静态化,包括博客首页静态化,归档首页静态化 ...

    zblog教程网7722019-10-10
  • ZBLOGzblog提示PHP版本太低是什么原因

    zblog提示PHP版本太低是什么原因

    在安装zblog模板的时候,有时候会提示,php版本太旧,至少需要5.x以上版本,这个问题如何解决呢,下面一起来看一下 ...

    万书涛17362021-07-12
  • ZBLOGzblog文章自动生成摘要长度修改方法

    zblog文章自动生成摘要长度修改方法

    zblog有个自动生成文章摘要的功能,这给我们在发表文章的时候提供了一些方便,节省了要手动添加文章摘要的时间,这个功能很好 ...

    zblog教程网4112019-10-10
  • ZBLOGzblog伪静态设置教程

    zblog伪静态设置教程

    zblog默认是动态页面链接,从seo角度考虑,做成静态链接会更好一些,zblog的伪静态设置还是挺方便的,下面来看一下如何设置 ...

    万书涛8682021-07-12
  • ZBLOGzblog忘记后台账号密码怎么办?

    zblog忘记后台账号密码怎么办?

    zblog网站的后台账号密码要是忘记了怎么办呢?有两种方案,一种是登录数据库,替换目前用户的密码,第二种方法是,适用官方的密码找回工具....

    李洋个人博客5822020-10-11
  • ZBLOGz-blog完美转移到wordpress的方法分享

    z-blog完美转移到wordpress的方法分享

    很多朋友刚建立博客的时候都是采用国内优秀的博客系统:Z-BLOG,用一段时间过后很多人都想转移到wordpress,各种转移原因很多。学朋的主要原因就是Z-BLO...

    zblog教程网18232019-10-10
  • ZBLOGz-blog评论加入Gravatar头像功能

    z-blog评论加入Gravatar头像功能

    Gravatar提供的服务概念上十分简单,就是把个人email地址与头像捆绑(登录 www.gravatar.com申请帐户,上传照片即可完成),然后当你在支持Gravatar的网站留言并使...

    zblog教程网4082019-10-08
  • ZBLOGzblog提示“JavaScript加载失败”的原因和解决办法

    zblog提示“JavaScript加载失败”的原因和解决办法

    本文主要讲解zblog提示“JavaScript加载失败”的原因和解决办法,适合于使用zblog建站的朋友,有需要的可以参考一下。...

    天兴工作室12002020-06-10