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

HTML5 herman 1098浏览 0评论
公告:“业余草”微信公众号提供免费CSDN下载服务(只下Java资源),关注业余草微信公众号,添加作者微信:xttblog,发送下载链接帮助你免费下载!
本博客日IP超过1800,PV 2600 左右,急需赞助商。
极客时间所有课程通过我的二维码购买后返现24元微信红包,请加博主新的微信号:xttblog,之前的微信号好友位已满,备注:返现
所有面试题(java、前端、数据库、springboot等)一网打尽,请关注文末小程序
视频教程免费领

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

整个实现的代码很简单,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隐藏多余的行数。

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

业余草公众号

最后,欢迎关注我的个人微信公众号:业余草(yyucao)!可加QQ1群:135430763(2000人群已满),QQ2群:454796847(已满),QQ3群:187424846(已满)。QQ群进群密码:xttblog,想加微信群的朋友,之前的微信号好友已满,请加博主新的微信号:xttblog,备注:“xttblog”,添加博主微信拉你进群。备注错误不会同意好友申请。再次感谢您的关注!后续有精彩内容会第一时间发给您!原创文章投稿请发送至532009913@qq.com邮箱。商务合作可添加助理微信进行沟通!

本文原文出处:业余草: » CSS 实现代码高亮显示行数原理解析