当前位置: 首页 > 编程笔记 >

SyntaxHighlighter 去掉右侧滚动条的方法

宗项禹
2023-03-14
本文向大家介绍SyntaxHighlighter 去掉右侧滚动条的方法,包括了SyntaxHighlighter 去掉右侧滚动条的方法的使用技巧和注意事项,需要的朋友参考一下

在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滚动条内容请搜索小牛知识库以前的文章或继续浏览下面的相关文章希望大家以后多多支持小牛知识库!

 类似资料:
  • 本文向大家介绍Android ListView隐藏右侧滚动条功能,包括了Android ListView隐藏右侧滚动条功能的使用技巧和注意事项,需要的朋友参考一下 关于ListView的滚动条几种情形: 1、默认情况:活动(滚动)时显示,不活动时隐藏。 2、活动和不活动时都显示。 3、活动和不活动时都隐藏。 上述集中情况,均有ListView的以下设置属性方法控制 1、setVerticalScr

  • 问题内容: 我有一个图像选择器,可以从图库中选择图像,然后将URL填写到字段中。这些URL可能非常长,并且始终在文本字段中看到URL的前半部分具有很少的信息价值。 有人知道一种“滚动”到文本字段最右侧的方法,以便可以看到URL的末尾而不是开头吗?不求助于textarea。 问题答案: 除IE6-8 / Opera之外的所有浏览器 设置后明确设置输入值的长度。缺点是一旦模糊,它就会滚动回开始。 IE

  • 问题内容: 是否可以使用CSS将DIV的垂直滚动条放在div的左侧?那jscript呢? 问题答案: 您可以使用JQuery和此插件在任意位置添加伪滚动条:JScrollPane

  • 在thinkphp6框架config=》app.php添加了'app_debug' => false,'show_page_trace'=>false,还是不能去掉右下角的图标。请教高手如何配置?

  • 问题内容: 是否可以为div上的垂直滚动条指定位置(左侧或右侧)? 其中说明了如何使用溢出属性。有什么方法可以将滚动条放在可滚动区域的左侧? 问题答案: 要么 适用于所有主要浏览器(甚至是Safari)的剪切和粘贴解决方案 任何高度或宽度都可以 (可选)添加到每个项目中,以更改文本回流的方向,同时保留容器的方向。

  • 本文向大家介绍易语言设置编辑框滚动条与滚动条方式的方法,包括了易语言设置编辑框滚动条与滚动条方式的方法的使用技巧和注意事项,需要的朋友参考一下 滚动条属性 所属对象:编辑框   操作系统支持:Windows 数据类型:整数型;滚动条只有在多行方式下才有效。 可供选择的属性值: 0、无 1、横向滚动条 2、纵向滚动条 3、横向及纵向滚动条 例程 说明 本属性用于设置指定编辑框有无滚动条和滚动条方式。