SyntaxHighlighter行号显示错误问题解决方案
来源:互联网 发布:java程序员面试问题 编辑:程序博客网 时间:2024/06/05 19:20
SyntaxHighlighter是根据代码中的换行符分配行号的。但是,如果一行代码或者注释比较长,在页面显示时需要分成多行显示,会出现行号对不上的问题,像这样:
通过设置CSS强制不换行,可以保证行号显示正常,但会出现滚动条,像这样:
使用开发者工具查看SyntaxHighlighter所渲染的元素可以看到,每个行号和每行代码都是一个div,而由于是行号和代码是分别放在两个td中进行的高度计算,导致了在其中一部分出现高度变化时,两部分的高度不同。
这时候考虑在元素渲染完成后,动态改变行号的默认高度:
var guttelines=$('.gutter .line’);var codelines=$('.code .line’);for(i=0;i<$(guttelines).length;i++){ $(guttelines).eq(i).css('height',$(codelines).eq(i).css('height'))}
查看元素及渲染效果,元素虽然被设置了高度,但并未按所设置的高度进行显示,行号显示依然有问题,会这样:
使用开发者工具查看行号元素,可以看到,其高度并未生效
查看style渲染过程,可以看到,高度是被SyntaxHighlighter默认css中通过important覆盖了
删除这个important高度设置,重新刷新页面,问题解决。
0 0
- SyntaxHighlighter行号显示错误问题解决方案
- SyntaxHighlighter行号宽度的问题
- phpmyadminl连接错误问题解决方案
- idea 行号栏太宽以及显示一些图标问题解决
- SyntaxHighlighter高亮显示代码
- Netbeans 6.7 汉字显示问题解决方案
- IE8下的VML显示问题解决方案
- MenuItem 显示中文乱码问题解决方案
- cocos2dx:ios7字体显示问题解决方案
- 远程工具显示Linux乱码问题解决方案
- ScrollView嵌套ViewPager不显示问题解决方案
- kettle 显示中文乱码问题解决方案
- fatal error LNK1202错误问题解决方案
- Maven Package Compilation Error错误问题解决方案
- gridftp相关错误问题解决方案集
- SyntaxHighlighter
- SyntaxHighlighter
- SyntaxHighlighter
- GDB 引起Illegal instruction: 4 错误解决办法
- 编程练习
- Linux设备模型(6)_Bus
- Fragment动态加载
- android6.0权限管理
- SyntaxHighlighter行号显示错误问题解决方案
- LeetCode 1 Two Sum
- C#调用C++的dll及MATLAB的dll的方法(二)
- Ros kinect点云数据
- 封装的不错的解析http 命令参数的c++ 源码
- JavaScript模式 For和For-in循环优化
- kernel 3.10内核源码分析--内核栈及堆栈切换
- layoutSubviews何时调用的问题
- c++作业2