SyntaxHighlighter这个是一个高亮插件。现在被用于很多网站的代码显示。但是SyntaxHighlighter3.0.83,由于自适应宽和高,导致一直有条的问题

在Chrome浏览器中代码区始终有一个条,firefox不会有这种情况。网上有很多解决方法,修改plugin/syntaxhighlisghter/3.0.81/css目录下shCoreDefault.css中的..syntaxhighlighter区域,加上padding:1px;就可以了。

.syntaxhighlighter { 
width: 100% !important; 
margin: 1em 0 1em 0 !important; 
position: relative !important; 
overflow: auto !important; 
font-size: 1em !important; 
padding:1px;/*就是这个*/
} 

下面是其他网友的补充

SyntaxHighlighter这个是一个高亮插件。现在被用于很多网站的代码显示。但是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,超过自动隐藏。这个方法更美观点,但是不方面查看代码。

到此这篇关于SyntaxHighlighter 去掉右侧条的方法的文章就介绍到这了,更多相关SyntaxHighlighter条内容请搜索爱安网以前的文章或继续浏览下面的相关文章希望大家以后多多支持爱安网!

    无相关信息
最新资讯
茅台销售渠道变革 电商、商超定位再起波澜

茅台销售渠道变革 电

贵州茅台的澄清引起不小疑惑,因为在以往公司的宣传中强
特斯拉Model X遭遇黑客中继攻击 3分钟可开走汽车

特斯拉Model X遭遇黑

据报道,一名黑客成功地为特斯拉汽车开发了一种新的密钥
对话360首席科学家潘剑锋:数字时代软件漏洞不可避免

对话360首席科学家潘

360集团首席科学家潘剑锋在接受包括新浪科技在内的媒
小米集团ADR涨超9% 其港股今日收涨逾8%

小米集团ADR涨超9% 其

小米集团ADR涨超9%,其港股今日收涨逾8%。
嫦娥五号计划明天凌晨发射!等等,为什么要选在凌晨?

嫦娥五号计划明天凌晨

为什么要选在凌晨发射?国家航天局表示,此次长征五号遥五
中国数字经济规模达35.8万亿元

中国数字经济规模达35

《中国互联网发展报告2020》指出,2019年,中国数字经济规
最新文章
js获取富文本中的第一张图片(正则表达式)

js获取富文本中的第一

这篇文章主要介绍了js获取富文本中的第一张图片url正
js获取UEditor富文本编辑器中的图片地址

js获取UEditor富文本

这篇文章主要介绍了js获取UEditor富文本编辑器中的图
自动刷新从BrowserSync开始

自动刷新从BrowserSyn

Browsersync能让浏览器实时、快速响应您的文件更改(htm
详解React中的todo-list

详解React中的todo-li

这篇文章主要介绍了React中的todo-list的相关知识,非常
使用 CodeMirror 打造属于自己的带高亮显示的在线代码编辑器

使用 CodeMirror 打造

写这个的目的是因为之前项目里用到过 CodeMirror,觉得
百度UEditor编辑器使用教程与使用方法(图文)

百度UEditor编辑器使

今天笔者就给大家推荐一款百度UEditor编辑器。关于这