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

SyntaxHighlighter 去掉右侧滚动条的方法

作者:站长图库 字体:[增加 减小] 来源:互联网

站长图库向大家介绍了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的代码高亮时闪一下的解决方法

相关文章

  • CorelDraw制作金色质感小球教程
  • Javascript删除字符串最后一个字符
  • 不得不注意的网站描述优化问题
  • Photoshop调出梦幻炫彩的菱形背景图
  • Photoshop制作折纸风格的短信软件图标
  • 用PHP将女友照片转成可爱的动漫头像!
  • 一起看看JavaScript如何获取页面上被选中的文字
  • Photoshop制作梦幻光影效果的艺术字教程
  • PHP遍历读取文件夹中图片并分页显示
  • 遇到的uni-app的坑(uni-easyinput清空值,datetimerange置空)

文章分类

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

最近更新的内容

    • 深入浅析Bootstrap中的自动定位浮标
    • Laravel使用intervention image包上传、剪裁图片
    • 浅谈conda安装nodejs版本过低问题的解决方法
    • 浅谈angular9中组件动态加载的实现方法
    • PHP中怎么解决serialize函数中文乱码的问题
    • CSS Flex 布局 space-between 最后一行左对齐
    • PHP调用实现波场交互[支持TRX/TRC20]
    • Phpcms V9导航循环下拉菜单的调用技巧
    • JavaScript中解析parseInt()的怪异行为
    • PHP高并发实例详解之解决商品库存超卖问题

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

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