• 欢迎访问web前端中文站,JavaScript,CSS3,HTML5,web前端demo
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏web前端中文站吧

CSS 实现代码高亮显示行数原理解析

JAVA web前端中文站 2年前 (2018-02-24) 3661次浏览 已收录 0个评论

在很多编程网站,大家都会看到很多书写代码的地方进行了高亮显示,并且还显示有代码的行数。这是怎么实现的呢?本文将通过原理层面为你解析。

更多精彩内容请看 web 前端中文站
http://www.lisa33xiaoq.net 可按 Ctrl + D 进行收藏

整个实现的代码很简单,html 代码如下:

 <div class="code"></div>

本案例的 CSS 实现代码如下:

 .code {     
 padding: 10px 10px 10px 40px;     
 font-size: 13px;     
 line-height: 18px;     
 background-color: #eee;     
 font-family: "Lucida Console", Consolas, Monaco;     
 white-space: pre-wrap;     
 word-break: break-all;     
 position: relative;     
 overflow: hidden; }  
 .code::before {     
 content: '01./A 02./A 03./A 04./A 05./A 06./A 07./A 08./A 09./A 10./A 11./A 12./A 13./A 14./A 
 15./A 16./A 17./A 18./A 19./A 20./A 21./A 22./A 23./A 24./A 25./A 26./A 27./A 28./A 29./A 30./A 
 31./A 32./A 33./A 34./A 35./A 36./A 37./A 38./A 39./A 40./A 41./A 42./A 43./A 44./A 45./A 46./A 
 47./A 48./A 49./A 50./A 51./A 52./A 53./A 54./A 55./A 56./A 57./A 58./A 59./A 60./A 61./A 62./A 
 63./A 64./A 65./A 66./A 67./A 68./A 69./A 70./A 71./A 72./A 73./A 74./A 75./A 76./A 77./A 78./A 
 79./A 80./A 81./A 82./A 83./A 84./A 85./A 86./A 87./A 88./A 89./A 90./A 91./A 92./A 93./A 94./A 
 95./A 96./A 97./A 98./A 99';     
 position: absolute;     
 top: 10px;     
 bottom: 10px;     
 left: 0;     
 text-align: right;     
 background-color: #fbfbfb;     
 color: #333;     
 outline: 100px solid #fbfbfb;     
 clip: rect(-100px 2em 9999px 0);     
 /* IE9+ */     
 clip: rect(-100px 3.5ch 9999px 0);     
 overflow: hidden; }

最终的运行效果如下所示:

CSS 实现代码高亮显示行数原理解析

CSS 构建代码行数的原理如下:

  • 使用::before 伪元素 content 属性生成,这样不用担心网页框选复制代码的时候行数序号会污染。
  • 使用/A 控制字符的换行,之前有效果应用过此特性,见“CSS content 换行技术实现字符 animation loading 效果”。
  • ::before 伪元素绝对定位在左侧,祖先元素设置 overflow:hidden 隐藏多余的行数。

原理非常简单,赶紧制作一款自己的代码高亮插件吧。

【注:本文源自网络文章资源,由站长整理发布】


web 前端中文站 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:CSS 实现代码高亮显示行数原理解析
喜欢 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址