html代码高亮带行号,无法解决的难题:代码高亮插件SyntaxHighlighter Evolved的行号问题...
WordPress 的 SyntaxHighlighter Evolved 是一个可以高亮显示代码的插件,它使用方便,界面也非常好看,很适合技术博客使用。
SyntaxHighlighter Evolved 有两个大版本,2.x 和 3.x。
且不论这两个版本的代码效率之类,光看肉眼可辨的,就是他们处理行号和自动换行的区别。
下面介绍一下两个版本的原理:
2.x 版本:它将自动生成的行号和当前行的代码制作成一个 table,table 外层再嵌套一个 div,代码块就是许多这样的 div 组成的。只要不手动换行,插件自动把它识别为一行,但是由于本身特性,长代码会自动换行。由于行号和代码是在一个 table 里的,所以在复制多行代码的时候注定会把行号给复制进去。为了解决这个问题,插件在右上角提供了 查看源代码 的工具栏,只有通过 查看源代码 才能复制无行号的代码。
2.x 结构示例
3.x 版本:它与 2.x 版本的行号控制完全不同,2.x 版本是在生成 table 的时候同时生成行号,但是 3.x 版本是最后才按行给代码加行号。若允许代码自动换行,将导致下图结果发生。为了避免这种情况,它相比于 2.x 版本,在 styles/shCore.css 中增加了 .syntaxhighlighter .line {white-space: pre !important;} 一句,导致长代码不再自动换行,也就不会再出现下图的情况,可是他也无法支持自动换行了。它的代码块也不同于 2.x 版本,3.x 代码块是只有一个大的 table,行号放在一个 td 内,代码放另外一个 td 里。选取多行代码时,就只能选取到存放代码的 td 里的内容,所以不会复制到行号。
3.x 强行自动换行效果
3.x 结构示例
作为一个追求完美的强迫症来说,2.x 的使用工具栏的 查看源代码 进行复制多行代码和 3.x 的无法自动换行都是无法接受的。于是,博主在想有没有不改变整体结构的情况下同时支持自动换行和避免行号被复制。
开始时,博主想到使用 javascript 来阻止复制到行号,但是仔细想了想就放弃了。javascript 要阻止你复制全部内容是很容易的,但是它并不能做到阻止复制小范围的特定内容。
这里插一句:由于博主的性格和习惯,那些太古老的浏览器版本就不打算再支持了,本博客在 IE 8 下还算能看,只是圆角全部失效,但是在 IE 7 及以下版本的 IE 浏览器下,简直惨不忍睹。所以博主的想法是,最基本的浏览器都应该是 IE 9 以上了,而 IE 9 已经支持部分 HTML 5 和 CSS 3 了。
后来,博主想到了一个 css 3 属性——user-select,详细点这里。这个属性可是一个好属性,通过它,我们可以利用这个新属性轻松精确的控制用户可以选择哪些文本。
这个属性可以设置 4 个值:none、text、all、element,其中 element 属性只在 IE 下有效。而这个属性需要添加特定的浏览器标识,即 -webkit-user-select、-moz-user-select、-ms-user-select。
none:任何内容都不允许被选中
text:只允许选中文本内容
all:所有内容都可以选中
element:选中的内容受到元素边界的约束
各浏览器对该属性的支持见下图:
user-select 浏览器支持情况
于是我马上开始测试:
先写一个简单的 HTML,仿照 2.x 版本的结构,css 属性添加上 .number {-moz-user-select: none;-webkit-user-select: none;-ms-user-select: none;},以后给行号加上 class="number"。
测试结果:
IE 10、IE 11:想直接选中行号是不行的,但是先从其他文本选中,就会顺带把行号选中。
IE 10、IE 11 测试效果
使用 Ctrl+C,Ctrl+V 后,结果还是复制到了行号,果然是所见即所得啊。
#我是第一行我是第一行我是第一行我是第一行我是第一行我是第一行我是第一行
13 #我是第二行我是第二行我是第二行我是第二行我是第二行我是第二行我是第二行
14 #我是第三行我是第三行我是第三行我是第三行我是第三行我是第三行我是第三行
15 #我是第四行我是第四行我是第四行我是第四行我是第四行我是第四行我是第四行
Chrome 38:不管怎么选,都无法选中行号,只能选中后面的文字。(果然壮哉我大 Chrome (〜 ̄△ ̄)〜)
Chrome 测试效果
使用 Ctrl+C,Ctrl+V 后,呵呵,Chrome 这个奇葩,结果…行号都带着呢,坑货,比 IE 还奇葩 (╯°口°)╯(┴—┴。
#我是第一行我是第一行我是第一行我是第一行我是第一行我是第一行我是第一行
13 #我是第二行我是第二行我是第二行我是第二行我是第二行我是第二行我是第二行
14 #我是第三行我是第三行我是第三行我是第三行我是第三行我是第三行我是第三行
15 #我是第四行我是第四行我是第四行我是第四行我是第四行我是第四行我是第四行
FireFox:由于我没装火狐浏览器,就没做测试了,网上查了查。FireFox 在选中时,除了第一个行号,其他行号都会被选中。但是使用 Ctrl+C,Ctrl+V 后,行号都没有被黏贴上,这就是我们想要的效果。
最后发现:
只有 FireFox 可以使用 user-select 属性阻止用户复制到行号的,然而选中时会显示行号被选中,容易给人误导。
Chrome 虽然选中时显示行号没被选中,但是实际复制时还是会带上行号,奇了个葩的。
IE 10+ 充分地吸取了上面两者的弊端,行号既会被选中,也会被复制,但 IE 最诚实,所见即所得嘛,是不是应该夸奖下 (-_-#)。
这个最靠谱的方法都失败了,博主又在网上找啊找,最后找到了一个方法:通过把行号放进添加了属性 disabled="disabled" 的 input 来阻止行号被复制,原博客。结果嘛,想出这个办法的人去除了行号… _(:3」∠)_
至少效果是:选中是看起来还是会选中行号,结果…我没试,但是即使可以阻止复制行号,样子是很难看的。
下面给出最终结论:
代码高亮插件 SyntaxHighlighter Evolved 的行号问题果然是一个无法解决的难题。要是你既不想使用工具栏的 查看源代码,又不想出现横向滚动条,博主的建议是——请不要显示行号…
这确实是一次失败的尝试 (╯°口°)╯(┴—┴
在设置不显示行号后,连左边的绿条和容器的边框都被去掉了,这样式,简直了,于是为了找回遗失的绿条和边框,可以在主题样式中加上以下两段:
:root .syntaxhighlighter-gutter.nogutter {
border:1px solid #E0E0E0 !important;
}
:root .syntaxhighlighter-gutter.nogutter .line .content {
border-left:3px solid #6CE26C !important;
}
然后在插件设置界面的附加 CSS 处加上 syntaxhighlighter-gutter。
不过这就有个问题了,对于古老的IE 6-IE 8,是不支持 :root 这个 CSS 3 选择器的,于是在 IE 6-IE 8上,依旧没有效果。
html代码高亮带行号,无法解决的难题:代码高亮插件SyntaxHighlighter Evolved的行号问题...相关推荐
- 权限管理系统(用户信息管理模块业务组件实现代码,带注解)
用户信息管理模块业务组件实现代码,带注解,留意注解规范和代码命名规范. UserServiceImpls.JAVA文件代码 package com.amos.service.impls; impo ...
- 图片轮播php代码下载,jQuery带进度条滚动图片轮播代码
jQuery带进度条滚动图片轮播代码 jQuery带进度条滚动图片轮播代码是一款带左右箭头按钮控制图片滚动轮播,标题和进度条显示效果. $(document).ready(function(e) { ...
- html代码高亮带行号,kindeditor代码高亮自动行号功能
kindeditor代码高亮自动行号功能 代码自动行号功能 kindeditor默认未开启代码行号显示功能的,可以通过在html视图下,将需要显示行号的代码做如下更改: 不过虽然这样自定义很强,不过想 ...
- html代码高亮带行号,highlight代码高亮插件的使用(带行号)个人博客必备
拥有个人博客的朋友应该很需要这样的插件,highlightjs代码高亮插件能让你的博客代码看起来更漂亮,让你的博客上一个档次,至于效果,直接看博主的个人博客就行了. 下载highlight代码高亮插件 ...
- VSCode + git 代码托管【当前没有源代码管理提供程序注册】(没有‘+’加法号) - 解决篇
bug截图如下:VSCode无法进行git托管,git扩展程序未启动? 软件提示[当前没有源代码管理提供程序注册] (没有'+'加法号),如下图1所示 上述截图1,表示VSCode的git的本地配置失 ...
- 5分钟,10行代码!带你用Python做个电脑文件清道夫!
"菜鸟学Python",第"508"篇原创 大家好,我是菜鸟哥!新的一周来啦,Python学起来! 大家在日常的工作和学习中,会面临到许多文件的处理,包括各种o ...
- usbserial驱动 带感叹号_USB2.0-CRW驱动显示黄色叹号如何解决图文教程
USB2.0-CRW驱动显示黄色叹号如何解决?太多电脑在使用USB设备时出现问题,查找原因时发现USB2.0-CRW驱动显示黄色的感叹号,而这个问题的根源则是因为电脑系统没有安装支持此设备的驱动,所以 ...
- 50行代码,带你理解梯度下降法(Gradient Descent Method)
梯度下降法是一种常见的优化算法,在机器学习中应用很广泛.本文从代码的角度,带你理解梯度下降法. 优化算法 优化指的是改变x以最小化或最大化某个函数 f(x) 的任务.通常以最小化 f(x) 指代大多数 ...
- 利器 | 如何在公众号内优雅地添加代码块?推荐几款常用的工具!
作者 | 刘顺祥 来源 | 数据分析1480(ID:lsxxx2011) 背景 在运营公众号的过程中,或多或少可能会碰到分享代码的场景,此时该如何将你的代码高端.大气.上档次的呈现呢?这个问题经常会被 ...
最新文章
- android 4大组件相互启动,Android四大组件之Activity
- web标准页面知识必备
- C# 中使用 ThoughtWorks.QRCode.dll 生成指定尺寸和边框宽度的二维码
- 移动硬盘改台式机硬盘_如何在台式机或移动设备上离线使用Google云端硬盘
- 实现 通过数据库里一个字段值相等 则把 他合为一条数据
- css 跳动的心_如何用纯CSS为您的情人打造一颗跳动的心
- STM32 FSMC/FMC原理保姆级讲解(二)
- Linux内核多线程(三)
- 宏碁(acer)被攻击:黑客索要 3.25 亿元赎金
- 【ABAP系列】SAP ABAP 总结常用术语简称解析
- XStream 初探,很给力
- Hadoop学习笔记(基于《10小时入门大数据》)
- 七牛 html 上传,在七牛上传之后如何自己自定义上传完成处理并在页面显示。_html/css_WEB-ITnose...
- 2008服务器系统c盘清理,WindowsServer2008清理C盘空间
- 路由器实验之配置实验、直连路由验证、静态路由
- 360安全软件设置白名单
- 输入任意一个字符串,判断这个字符串是否是回文,回文示例: 上海自来水来自海上
- 计算机组成原理偶校验编码设计,计算机组成原理校验码生成电路的设计.doc
- @prometheus监控详解
- Android 听筒 扬声器 切换