首页 > 代码库 > 解决代码着色组件SyntaxHighlighter行号显示问题
解决代码着色组件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
解决代码着色组件SyntaxHighlighter行号显示问题
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。