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 相关文章推荐
js如何取消事件冒泡
Sep 23 Javascript
jquery选择器之内容过滤选择器详解
Jan 27 Javascript
javascript实现仿腾讯游戏选择
May 14 Javascript
jQuery实现折叠、展开的菜单组效果代码
Sep 16 Javascript
微信小程序 页面之间传参实例详解
Jan 13 Javascript
原生JavaScript实现精美的淘宝轮播图效果示例【附demo源码下载】
May 27 Javascript
angularjs下拉框空白的解决办法
Jun 20 Javascript
详解React-Native解决键盘遮挡问题(Keyboard遮挡问题)
Jul 13 Javascript
JS箭头函数和常规函数之间的区别实例分析【 5 个区别】
May 27 Javascript
微信小程序实现简单购物车功能
Dec 30 Javascript
JavaScript如何利用Promise控制并发请求个数
May 14 Javascript
Vite + React从零开始搭建一个开源组件库
Jun 25 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
PHP中对用户身份认证实现两种方法
2011/06/04 PHP
Laravel多用户认证系统示例详解
2018/03/13 PHP
php+ajax实现文件切割上传功能示例
2020/03/03 PHP
发布BlueShow v1.0 图片浏览器(类似lightbox)blueshow.js 打包下载
2007/07/21 Javascript
LBS blog sql注射漏洞[All version]-官方已有补丁
2007/08/26 Javascript
jQuery实现form表单reset按钮重置清空表单功能
2012/12/18 Javascript
Jquery通过Ajax访问XML数据的小例子
2013/11/18 Javascript
javascript 判断整数方法分享
2014/12/16 Javascript
编写高性能Javascript代码的N条建议
2015/10/12 Javascript
JS及PHP代码编写八大排序算法
2016/07/12 Javascript
jQuery替换节点用法示例(使用replaceWith方法)
2016/09/08 Javascript
Bootstrap轮播插件使用代码
2016/10/11 Javascript
Vue.JS入门教程之处理表单
2016/12/01 Javascript
javascript中闭包概念与用法深入理解
2016/12/15 Javascript
详解jQuery uploadify文件上传插件的使用方法
2016/12/16 Javascript
laydate 显示结束时间不小于开始时间的实例
2017/08/11 Javascript
巧妙运用v-model实现父子组件传值的方法示例
2019/04/07 Javascript
[02:07]2017国际邀请赛中国区预选赛直邀战队前瞻
2017/06/23 DOTA
Python常用知识点汇总
2016/05/08 Python
Python 模板引擎的注入问题分析
2017/01/01 Python
python 统计代码行数简单实例
2017/05/04 Python
python图书管理系统
2020/04/05 Python
查看keras的默认backend实现方式
2020/06/19 Python
Pytorch 高效使用GPU的操作
2020/06/27 Python
python使用正则表达式匹配txt特定字符串(有换行)
2020/12/09 Python
Html5 滚动穿透的方法
2019/05/13 HTML / CSS
BIBLOO波兰:捷克的一家在线服装店
2018/03/09 全球购物
abstract class和interface有什么区别?
2012/01/03 面试题
食品安全检查制度
2014/02/03 职场文书
本科生自荐信
2014/06/18 职场文书
通信工程求职信
2014/07/16 职场文书
英语三分钟演讲稿
2014/08/19 职场文书
中学教师暑期培训方案
2014/08/27 职场文书
债务纠纷委托书
2014/08/30 职场文书
天气温馨提示语
2015/07/14 职场文书
详解Redis复制原理
2021/06/04 Redis