纯CSS显示JS/HTML等源代码行数

代码相关 代码 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构建代码行数的原理如下:

  1. 使用::before伪元素content属性生成,这样不用担心网页框选复制代码的时候行数序号会污染。
  2. 使用A控制字符的换行。
  3. ::before伪元素绝对定位在左侧,祖先元素设置overflow:hidden隐藏多余的行数。

核心CSS代码示意如下:

.code {
    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;
}

对,方法比较傻,就是一口气把99行序号在CSS中埋伏好。

CSS方法实现的优缺点
优点:
简单,高效,性能十足,即使代码变来变去布局也OK。

缺点:
支持的行数有限,例如上面的demo最多支持99行代码。

如果代码行数惊人,例如上千行,则建议辅助JS去生成序号,例如构建一段包含content内容的<style>插入到页面中。

兼容性
方法至少IE9+浏览器支持,IE8浏览器理论上支持。

声明:以上内容转自http://www.zhangxinxu.com/wordpress/2018/02/pure-css-js-html-code-line-number/

下面说说我是如何将其投入使用的吧!

1,如何解决上文提到的→支持的行数有限,例如上面的demo最多支持99行代码?
我是直接用php循环语句写了个循环,直接输出了个支持到8000行的css代码,理论上足够够用了【因为基本上没人会在网页上写上万行代码!】,css文件最终定格60多k的大小(捂脸)。

2,为什么想用纯css的?
在给博客代码高亮换成prismjs时,prismjs官网虽然可以选择行号组建,但是总会出现些问题(博主忘记问题是啥了,毕竟过去好几天了),然后就百度纯css的看看有没有前辈折腾过,没想到还真有,而且文章还挺新鲜的(2018年发表的),于是就想尝鲜

3,感受
文章开始处的padding-left 40px参数是给行号挪位置的,最初弄时可以设置的小一点,这样就方便看行号是否和代码对应上,没有错位!
.code::before的top参数和bottom参数和.code的padding的top和bottom参数一致。

Comments (20)

    Generic placeholder image
    后宫学长

    我的话,默认去行号。

    Windows10 459天前回复

      Generic placeholder image
      Jrotty
      @后宫学长

      我觉得有点点缀也挺好

      456天前回复

    Generic placeholder image
    moozik

    可能更好配置

    Windows7 459天前回复

      Generic placeholder image
      Jrotty
      @moozik

      不用考虑js的各种冲突了

      456天前回复

    Generic placeholder image
    子午

    看看新浏览器在这里显示什么

    Windows10 463天前回复

      Generic placeholder image
      子午
      @子午

      怎么还是Chrome。

      Windows10 463天前回复

        Generic placeholder image
        Jrotty
        @子午

        chrome内核呗

        Windows10 462天前回复

    Generic placeholder image
    caisiduo

    IE完美支持2333

    Windows7 463天前回复

    Generic placeholder image
    mr.tcsy

    灌水 , emmmmm 表情框 怎么没了

    Linux 463天前回复

    Generic placeholder image
    Archeb

    http://www.zhangxinxu.com/wordpress/2014/08/css-counters-automatic-number-content/
    可以试试用CSS Counter计数器实现这个功能?
    IE8+的兼容

    Windows10 466天前回复

      Generic placeholder image
      Jrotty
      @Archeb

      好像不好弄,哭脸

      Windows10 462天前回复

    Generic placeholder image
    尚寂新

    话说怎么想起来把高亮js给换了 记得之前不是这样的啊 #(滑稽)
    另外补充一下这种方法只适用于md书写出来的文章 因为有的程序弄出来的只有pre标签而不是pre套code标签这种形式

    安卓牛轧糖 467天前回复

      Generic placeholder image
      Jrotty
      @尚寂新

      上文中的代码只是复制哈,实际中使用中可以不用code,只用pre也可以的,虽然因为种种锅,我自己的模板还是用了code

      Windows10 462天前回复

    Generic placeholder image
    c0sMx

    IE:居然还有人记得我hhh

    Windows7 468天前回复

      Generic placeholder image
      Jrotty
      @c0sMx

      chrome:让我们永远牢记IE,顺便把他拍在沙滩上

      Windows10 468天前回复

    Generic placeholder image
    夏目贵志

    个人感觉没啥用 哈哈哈

    Windows10 468天前回复

      Generic placeholder image
      Jrotty
      @夏目贵志

      其实是实在不想写js哈,所以才这样的

      Windows10 468天前回复

        Generic placeholder image
        夏目贵志
        @Jrotty

        感觉其他人用的到 辛苦了 2333

        Windows10 468天前回复

    Generic placeholder image
    九四

    get,话说一篇博客贴上千行代码感觉很影响阅读(

    Ios 469天前回复

      Generic placeholder image
      Jrotty
      @九四

      嗯,所以说嘛只要写死两三千个行号就基本够用了

      Windows10 469天前回复