WordPress:SyntaxHighlighter滚动条隐藏
SyntaxHighlighter 是一个高亮插件。现在被用于很多WordPress等网站的代码显示。但是SyntaxHighlighter3.0.83,由于自适应宽和高,导致一直有滚动条的问题,如下图:
说明:上图右侧有滚动条,很不美观
其实这个问题可以修改css文件可以去掉。修改主题文件shCoreDefault.css(默认模版)去掉右侧滚动条:
大概在shCoreDefault.css文件39行位置:
padding:0 !important;
修改为
padding: 1px 0 !important;
网上可能是36行 margin: 0 !important;修改为 margin:1px 0 !important;这样修改双击选中后会有错位问题。
去掉下侧的滚动条:
其实我也没有找到两全其美的方法,为什么这么说呢。这里我提供2种方法,但是多有缺陷。
建议:还是输代码的时候注意长度的,只要不超过一定的长度,是不会出现滚动条的。
1.自动换行
.syntaxhighlighter .line {
white-space: pre !important;
}
修改这个pre为normal的话,前面的行数就会错位。
2.自动隐藏
.syntaxhighlighter {
width: 100% !important;
margin: 1em 0 1em 0 !important;
position: relative !important;
overflow: auto !important;
font-size: 1em !important;
}
修改overflow的auto为hidden,超过自动隐藏。这个方法更美观点,但是不方面查看代码。
本文去掉右侧滚动条的实现方法
经过FireFox分析,修改 /wp-content/plugins/auto-syntaxhighlighter/SyntaxHighlighter/build/styles/shCore-min.css 文件
.syntaxhighlighter{width:100%!important;margin:1em 0 1em 0!important;position:relative!important;/*overflow:auto!important;*/font-size:1em!important}
注释掉 /*overflow:auto!important;*/ ,隐藏滚动条后的效果如图:
去掉右侧滚动条后的效果,请见我的博客: https://blog.mimvp.com/2014/04/nginx-configuration-file-details/
版权所有: 本文系米扑博客原创、转载、摘录,或修订后发表,最后更新于 2014-04-16 21:03:23
侵权处理: 本个人博客,不盈利,若侵犯了您的作品权,请联系博主删除,莫恶意,索钱财,感谢!