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

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插件的制作过程步骤分享

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

    zblog教程网6522019-10-10
  • ZBLOGZ-blog错误原因:未知错误ID:-2147467259

    Z-blog错误原因:未知错误ID:-2147467259

    最近很多人都碰到一个问题:在索引重建的时候出现了操作必须使用一个可更新的查询 错误原因:未知错误ID:-2147467259。 摘要: 操作必须使用一个可更新的查...

    Zblog教程网6502019-10-07
  • ZBLOGz-blog如何刷新和显示浏览计数

    z-blog如何刷新和显示浏览计数

    1.更新浏览计数 在打开单页日志后产生,每刷新一次,计数加1。 注意:只有在b_article-single.html有以下及第3步中介绍的代码,浏览计数才有效。 在b_articl...

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

    zblog伪静态设置教程

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

    万书涛8012021-07-12
  • ZBLOG刚上传了个ZBLOG的打开怎么显示这样子

    刚上传了个ZBLOG的打开怎么显示这样子

    问:FTP(上传)用户名: 刚上传了个ZBLOG的打开怎么显示这样子 500InternalPrivoxyError Privoxyencounteredanerrorwhileprocessingyourrequest: Couldnotloadtemplatefileno-server-datao...

    未知842023-05-07
  • ZBLOGzblog提示授权文件非法的解决办法

    zblog提示授权文件非法的解决办法

    本文为大家介绍zblog提示授权文件非法的解决办法,有需要的朋友可以参考下...

    zblog教程网13702021-07-12
  • ZBLOG安装zblog程序时数据库连接失败

    安装zblog程序时数据库连接失败

    问:如图所示,之前安装过程序,现在安装程序就成这样了,安装程序时数据库连接失败 答:您好,站点 根目录下的 zb_users/ c_option.php 中的数据库配置文件...

    未知822023-05-07
  • ZBLOGZ-Blog博客设置技巧:设置Gravatar头像无法显示的方法

    Z-Blog博客设置技巧:设置Gravatar头像无法显示的方法

    Gravatar是“全球通用头像”,在任何支持Gravatar的网站和博客中,填写填写申请注册Gravatar头像用的这个Email地址,你的头像就会出现在留言和评论系统中。...

    zblog教程网5342020-08-21