解决代码着色组件SyntaxHighlighter行号显示问题
SyntaxHighlighter是根据代码中的换行符分配行号的。但是,如果一行代码或者注释比较长,在页面显示时需要分成多行显示,这时行号就对不上了。如下图:
通过下面的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();之前执行。
解决代码着色组件SyntaxHighlighter行号显示问题的更多相关文章
- SyntaxHighlighter行号显示错误问题解决方案
SyntaxHighlighter是根据代码中的换行符分配行号的.但是,如果一行代码或者注释比较长,在页面显示时需要分成多行显示,会出现行号对不上的问题,像这样: 通过设置CSS强制不换行,可以保证行 ...
- xshell行号显示
xshell显示行号: 输入命令: vim ~/.vimrc 输入: set nu 之后在打开文件 就可以 看到行号显示.
- vs2010设置 "行号显示"
Microsoft Visual Studio 2010 默认情况下是不显示代码的行号的.在编译出错时,可点击下面输出窗口中的错误提示进行定位. 但是这样操作起来你有没有感觉到不方便呢. 不显示行号时 ...
- DevExpress控件使用经验总结- GridView列表行号显示操作
DevExpress是一个比较有名的界面控件套件,提供了一系列的界面控件套件的DotNet界面控件.本文主要介绍我在使用DevExpress控件过程中,遇到或者发现的一些问题解决方案,或者也可以所示一 ...
- myeclipse2014鼠标单击后光标位置背景底色为白色太难看,行号显示
Java文件的修改方法: window--Preferences--Java--Editor--Mark Occurences JS文件中点击字符串就会变成白色背景 JS文件字体颜色的修改 windo ...
- Easyui Datagrid的Rownumber行号显示问题
Datagrid中当你的行数据超过9999时,第一列的行号rownumber将会因为表格内容过长而导致无法显示全部数字, 这一点Easyui无法做到自适应 所以需要进行修改,这里扩展一个方法就行了. ...
- log4j日志文件名与行号显示乱码? 问号? 参数问号? 日志问号?【转】【补】
log4j本来设置了要打印行号与文件名的,结果有的能打印出来,有的却是乱码,查了些文档之后才发现,原来打印问题是因为编绎时没有编绎进去调试信息,所以没办法打印,好像有的系统又会显示(Unknown S ...
- bootstrap table 行号 显示行号 添加行号 bootstrap-table 行号
思想:借助bootstrap-table 本身的index属性, 巧妙的的通过formatter 实现 { field: 'Number', title: 'Number', formatter: f ...
- winXP vc6行号显示插件-VC6LineNumberAddin方法-可用-无需注册
1.VC6LineNumberAddin 修改日期是2008.6.3可用,其它需要注册码 http://codefish.googlecode.com/files/VC%E6%98%BE%E7%A4% ...
随机推荐
- xtrabackup备份与恢复实践
说明 xtrabackup --percona 特点: 开源,在线备份innodb表 支持限速备份,避免对业务造成影响 支持流备 支持增量备份 支持备份文件压缩与加密 支持并行备份与恢复,速度快 ...
- xcode5-ios7-如何添加120x120、152x152、76x76图标
以120x120为例: 添加Icon_120x120.png-->.plist添加Icon files-->App Icons自动变化 1. 2. 3. ================= ...
- Scrum 项目——1
广商检索页面 1) N (Need 需求) 这个页面会按一定的规律来集合广商的一些资源,包括微信公众号.教务系统登录处.宿舍报修等,是为了方便我们整个广商的学生和老师来运用.因为现在虽然有很多微信公众 ...
- html a tag's href javascript issue
a标签的href中写js中遇到的问题(ie中有问题,chrome没问题) <a class="free" href="javascript:{$('#suiteTy ...
- sql子查询 嵌套SELECT语句
嵌套SELECT语句也叫子查询,一个 SELECT 语句的查询结果能够作为另一个语句的输入值.子查询不但能够出现在Where子句中,也能够出现在from子句中,作为一个临时表使用,也能够出现在sele ...
- python之urllib
简单的web应用包括使用被称为url(统一资源定位器,uniform resource locator)的web地址 这个地址用来在web上定位一个文档,或调用一个CGI程序来为你的客户端产生一个文档 ...
- iconv命令 gbk 转 UTF-8
-----linux gbk 转 UTF-8-------- iconv 用法 iconv -f "gbk" -t "utf-8" < infile &g ...
- log4net配置与初始化
1.配置文件: <?xml version="1.0" encoding="utf-8" ?> <configuration> &l ...
- (转)ajax.dll,ajaxpro.dll的区别和用法
ASP.NET AjaxPro的应用 1.首先下载AjaxPro组件.并将AjaxPro.dll引用到网站(或项目). 2.修改Web.config.在 <system.web> 元素中添 ...
- mysql 基础语法
以下为自己学习mysql 的一些笔记,以方便查询 目录 一. ALTER的 语法 二. 表的完整性约束 三. 索引的操作(mysql 数据库支持至少 16 个索引) 四. 视图的操作 五. 触发器的操 ...