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

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();});

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

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

延伸 · 阅读

精彩推荐
  • ZBLOGzblog如何上传视频并播放

    zblog如何上传视频并播放

    zblog如何上传视频并播放呢?这个问题经常有人问,本文就来尝试介绍下方法,有需要的童鞋可以参考一下。 ...

    天兴工作室7612020-06-10
  • ZBLOGz-blog完美转移到wordpress的方法分享

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

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

    zblog教程网16572019-10-10
  • ZBLOGz-blog分类目录静态化实现方法

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

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

    zblog教程网6782019-10-10
  • ZBLOGZ-Blog 文件复制插件

    Z-Blog 文件复制插件

    在同一个网站使用过多个Z-Blog系统的用户,可能会需要这样的功能,就是从一个Z-Blog调用另外一个Z-Blog的信息,例如最新文章、最新评论等,本插件即可完...

    zblog教程网3722019-10-09
  • ZBLOG让我坚守ZBLOG的十二大理由

    让我坚守ZBLOG的十二大理由

    让我坚守 ZBLOG 的十二大理由: 尽管WordPress是博客程序里面的老大,它的插件最多,模板最多,用的人最多等等。但ZBLOG对于国人来说还是有许多WordPress无法...

    互联网4632019-10-08
  • ZBLOGzblog如何新建自定义主题

    zblog如何新建自定义主题

    在zblog里,主题是非常重要的,基本前台展示给用户的各种功能都是由不同的主题来实现的,那么,如果我们要自定义一个主题,在zblog里是如何操作的呢,...

    万书涛5662021-07-12
  • ZBLOGZ-Blog发表文章区标签教程

    Z-Blog发表文章区标签教程

    Z-Blog发表文章区标签教程 文章基本数据: 编号:#article/id# 链接:#article/url# 权限:#article/level# 标题:#article/title# 摘要:#article/intro# 内容:#article/content# 时间:#ar...

    ZBlog教程网3862019-10-08
  • ZBLOGz-blog插件的制作过程步骤分享

    z-blog插件的制作过程步骤分享

    有关z-blog插件的制作过程步骤,在搜索引擎里至今没有发现一篇详细的教程,官方也没有给出一个详细的实例,所以不少跃跃欲试的朋友,却找不到方向,...

    zblog教程网5912019-10-10