css 行数-CSS实现代码高亮显示行号原理分析

所有面试题（java、前端、数据库、springboot等）均已整理完毕，敬请关注文末小程序

腾讯云】1核2G5M轻量级应用服务器50元css 行数css 行数，性价比高，助您轻松上云

在很多编程网站上，包括我的个人网站：素人草。 你会看到很多写代码的地方都高亮显示了，并且还显示了代码的行数。 这怎么可能？ 本文将通过原理层面为您分析。

整个实现的代码非常简单，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重构代码行原理如下：

原理很简单，赶紧制作自己的代码高亮插件吧。