• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • dedecms
  • ecshop
  • z-blog
  • UcHome
  • UCenter
  • drupal
  • WordPress
  • 帝国cms
  • phpcms
  • 动易cms
  • phpwind
  • discuz
  • 科汛cms
  • 风讯cms
  • 建站教程
  • 运营技巧
您的位置:首页 > CMS教程 >建站教程 > SyntaxHighlighter 去掉右侧滚动条的方法

SyntaxHighlighter 去掉右侧滚动条的方法

作者:站长图库 字体:[增加 减小] 来源:互联网 时间:2022-04-29

站长图库向大家介绍了SyntaxHighlighter,去掉右侧滚动条,代码高亮插件等相关知识,希望对您有所帮助

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,超过自动隐藏。这个方法更美观点,但是不方面查看代码。



分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • SyntaxHighlighter 去掉右侧滚动条的方法
  • 防止SyntaxHighlighter.js的代码高亮时闪一下的解决方法

相关文章

  • 2022-04-29怎么用php实现支付宝支付
  • 2022-04-29Web移动端Fixed布局的解决方案
  • 2022-04-29Laravel实现随着Resource返回自定义分页信息
  • 2022-04-29Photoshop制作抽象炫光的艺术字效果
  • 2022-04-29详解Laravel前端工程化之mix
  • 2022-04-29浅谈小程序中页面间传值的2种方法
  • 2022-04-29Photoshop创建梦幻迷离的彩虹背景
  • 2022-04-29DedeCMS搜索文件search.php移到网站根目录
  • 2022-04-29在 MySQL 中 int (10) 和 int (11) 的区别
  • 2022-04-29解析如何进行Laravel表单验证分层设计和验证场景应用

文章分类

  • dedecms
  • ecshop
  • z-blog
  • UcHome
  • UCenter
  • drupal
  • WordPress
  • 帝国cms
  • phpcms
  • 动易cms
  • phpwind
  • discuz
  • 科汛cms
  • 风讯cms
  • 建站教程
  • 运营技巧

最近更新的内容

    • MySQL忘记密码的解决方法:无密码登录并重置root密码
    • Photoshop绘制逼真的毛线衣图标教程
    • 一行代码实现全站pjax无刷新加载
    • PhotoShop设计打造品牌艺术字LOGO效果教程
    • 柒比贰主题网格风格四缩略图对齐样式代码
    • 谈谈PHP运算符“::”、“->”和“=>”的区别
    • Photoshop制作树木图案立体字教程
    • 关于 Laravel 项目 伪静态分页处理
    • 一起聊聊JavaScript函数式编程
    • uniapp如何设置动态样式

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有