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


Posted in Javascript onNovember 16, 2014

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

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

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

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

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

Javascript 相关文章推荐
jquery mobile实现拨打电话功能的几种方法
Aug 05 Javascript
Javascript call和apply区别及使用方法
Nov 14 Javascript
JavaScript indexOf方法入门实例(计算指定字符在字符串中首次出现的位置)
Oct 17 Javascript
jQuery EasyUI Tab 选项卡问题小结
Aug 16 Javascript
实现点击下箭头变上箭头来回切换的两种方法【推荐】
Dec 14 Javascript
jQuery Validate 数组 全部验证问题
Jan 12 Javascript
node学习记录之搭建web服务器教程
Feb 16 Javascript
Node.js常用工具之util模块
Mar 09 Javascript
Node.js通过身份证号验证年龄、出生日期与性别方法示例
Mar 09 Javascript
Vue自定义toast组件的实例代码
Aug 15 Javascript
微信小程序开发之map地图组件定位并手动修改位置偏差
Aug 17 Javascript
vue中更改数组中属性,在页面中不生效的解决方法
Oct 30 Javascript
js构造函数、索引数组和属性的实现方式和使用
Nov 16 #Javascript
JQuery表单验证插件EasyValidator用法分析
Nov 15 #Javascript
不到30行JS代码实现Excel表格的方法
Nov 15 #Javascript
Node.js中HTTP模块与事件模块详解
Nov 14 #Javascript
jquery中append()与appendto()用法分析
Nov 14 #Javascript
jQuery 插件开发指南
Nov 14 #Javascript
使用JavaScript和C#中获得referer
Nov 14 #Javascript
You might like
wordpress之wp-settings.php
2007/08/17 PHP
php二维数组排序与默认自然排序的方法介绍
2013/04/27 PHP
php实现利用phpexcel导出数据
2013/08/24 PHP
javaScript 关闭浏览器 (不弹出提示框)
2010/01/31 Javascript
推荐10个超棒的jQuery工具提示插件
2011/10/11 Javascript
js异步加载的三种解决方案
2013/03/04 Javascript
js数组的操作详解
2013/03/27 Javascript
jquery弹窗插件colorbox绑定动态生成元素的方法
2014/06/20 Javascript
jquery.qtip提示信息插件用法简单实例
2016/06/17 Javascript
通过学习bootstrop导航条学会修改bootstrop颜色基调
2017/06/11 Javascript
JavaScript之Map和Set_动力节点Java学院整理
2017/06/29 Javascript
DataTables添加额外的查询参数和删除columns等无用参数实例
2017/07/04 Javascript
vue.extend实现alert模态框弹窗组件
2018/04/28 Javascript
Angularjs中date过滤器失效的问题及解决方法
2018/07/06 Javascript
js中getter和setter用法实例分析
2018/08/14 Javascript
JS/HTML5游戏常用算法之路径搜索算法 随机迷宫算法详解【普里姆算法】
2018/12/13 Javascript
Antd的table组件表格的序号自增操作
2020/10/27 Javascript
python 换位密码算法的实例详解
2017/07/19 Python
Python选择网卡发包及接收数据包
2019/04/04 Python
Python基于paramunittest模块实现excl参数化
2020/04/26 Python
Django实现随机图形验证码的示例
2020/10/15 Python
python反编译教程之2048小游戏实例
2021/03/03 Python
html5 canvas的绘制文本自动换行的示例代码
2018/09/17 HTML / CSS
canvas绘制树形结构可视图形的实现
2020/04/03 HTML / CSS
微软巴西官方网站:Microsoft Brasil
2019/09/26 全球购物
VLAN和VPN有什么区别?分别实现在OSI的第几层?
2014/12/23 面试题
幼教毕业生自我鉴定
2014/01/12 职场文书
竞选学习委员演讲稿
2014/04/28 职场文书
2014年百日安全生产活动总结
2014/05/04 职场文书
优秀的个人求职信范文
2014/05/09 职场文书
电子专业自荐信
2014/07/01 职场文书
二手房购房协议书范本
2014/10/05 职场文书
四年级学生期末评语
2014/12/26 职场文书
工作检讨书怎么写
2015/01/23 职场文书
初中数学课堂教学反思
2016/02/17 职场文书
六个好看实用的 HTML + CSS 后台登录入口页面
2022/04/28 HTML / CSS