解决代码着色组件SyntaxHighlighter行号显示问题
2014-11-25 18:27
281 查看
SyntaxHighlighter是根据代码中的换行符分配行号的。但是,如果一行代码或者注释比较长,在页面显示时需要分成多行显示,这时行号就对不上了。如下图:
通过下面的css强制不换行,可以避开这个问题。
但这样会出现横向滚动条,而不想出现横向滚动条,css要改为这样:
但这样行号又对不上。
后来,我们采用了一种折衷的解决方法:
如果代码着色时使用了行号,就用 white-space: pre !important; (强制不换行)
如果代码着色时没有使用行号,就用 white-space: pre-wrap !important; (强制换行)
解决方法看起来很简单,但实现起来没那么容易,因为要动态切换css,后来只找一个解决方法,动态加载css文件,示例代码如下:
【参考资料】
How To Switch CSS Files On-The-Fly Using jQuery
【更新】
@undefined 在评论中给出了更好的解决方案,验证有效,分享一下:
1)在css中增加一个可以覆盖.syntaxhighlighter .line的样式
2)在js代码中判断如果是有行号的代码,通过addClass添加这个样式
注:以上js代码需要放在SyntaxHighlighter.all();之前执行。
通过下面的css强制不换行,可以避开这个问题。
.syntaxhighlighter .line { white-space: pre !important; }
但这样会出现横向滚动条,而不想出现横向滚动条,css要改为这样:
.syntaxhighlighter .line { white-space: pre-wrap !important; }
但这样行号又对不上。
后来,我们采用了一种折衷的解决方法:
如果代码着色时使用了行号,就用 white-space: pre !important; (强制不换行)
如果代码着色时没有使用行号,就用 white-space: pre-wrap !important; (强制换行)
解决方法看起来很简单,但实现起来没那么容易,因为要动态切换css,后来只找一个解决方法,动态加载css文件,示例代码如下:
var shpre = $('div.cnblogs_Highlighter pre:first'); if (shpre.length) { if (shpre.attr('class').indexOf('gutter:true;') > 0) { $("head").append("<link>"); var css = $("head").children(":last"); css.attr({ rel: "stylesheet", type: "text/css", href: "/css/sh_gutter.css" }); } }
【参考资料】
How To Switch CSS Files On-The-Fly Using jQuery
【更新】
@undefined 在评论中给出了更好的解决方案,验证有效,分享一下:
1)在css中增加一个可以覆盖.syntaxhighlighter .line的样式
.sh-gutter .line{ white-space: nowrap!important; }
2)在js代码中判断如果是有行号的代码,通过addClass添加这个样式
var shpres = $('div.cnblogs_Highlighter pre'); if (shpres.length) { $.each(shpres, function () { if ($(this).attr('class').indexOf('gutter:true;') > 0) { $(this).parent().addClass('sh-gutter'); } }); }
注:以上js代码需要放在SyntaxHighlighter.all();之前执行。
相关文章推荐
- Ubuntu中设置vi编辑器语法着色和高亮显示,解决vi方向键问题
- 崩溃,source Insight显示linux代码中文注释乱码问题,以及很傻很天真的解决方法
- Visual Studio 2008项目中WinForm窗体图标显示为类图标,只能打开代码而无法打开视图问题解决
- 解决在EasyUI中使用百度地图出现不居中和坐标图标显示异常的问题(红色代码部分)
- JSP 文件 下载 代码 (不使用 jsp smart upload 组件) 解决中文名 问题
- 解决 Ext tabPanel 下组件不能及时显示的问题
- Eclipse中的方法代码收缩和行号显示问题
- 如何解决easyui-datagrid分页组件中文显示的问题
- 插件insertpre+语法高亮插件google-code-prettify,解决CKEditor4代码高亮显示问题
- 解决VS2008 有时右键不显示"查看代码" 选项的问题
- SenchaTouch2中list组件无法绑定存储或者绑定后仍旧无法显示数据问题解决
- 经过两周时间解决的多线程绘图代码,圆满解决delphi组件不能在多线程画曲线问题
- Visual Studio 2008项目中WinForm窗体图标显示为类图标,只能打开代码而无法打开视图问题解决
- 解决FCKEditor在浏览器返回时显示html代码的问题
- 在很多论坛上看到了有人抱怨Flash CS5中,代码提示(Code hint)有时不显示的问题,这个问题可能有很多原因,我整理了几个解决办法,有可能可以帮助到你~
- php,session验证码不一致,慢半拍,老显示上次验证码问题之完美解决(共享验证码代码)
- "ubuntu 下 eclipse 代码提示功能显示后焦点不在eclipse内,需点击窗口才行 “ 问题的解决
- 解决卸载了mysql之后,mysql服务仍在,显示读取描述失败,错误代码2的问题
- 安卓代码混淆与反射冲突,地图无法显示等问题解决及反编译方法
- 【ibokan】新浪博客等一些博客平台贴代码不显示问题解决方法