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

忘是亡心i 2021-06-26 16:06 399阅读 0赞

<!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8" />
 <title></title>
 <style> .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; /* 测试演示用 */ resize: horizontal; } .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 3.5ch 9999px 0); overflow: hidden; } </style>
 </head>
 <body>
 <div class="code">
 .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;
 }
 </div>
 <div class="code" itemprop="acticleBody">
 点点金色沙砾，如蓬蓬细雨，从黄家一人掌心洒出。
 安梓晴举头望天，满脸惊惧地喊道：“救命呀！”
 “黄天逸！”
 虞璨咬着牙，含恨怒喝：“你还要不要脸？”
 虞郦眼神一变，眼看金色沙砾洒落，急忙挥动骊龙剪。
 “哧啦！”
 一道道灵力流光，从骊龙剪内划出，于虚空结网。
 只见那点点金色沙砾，落入其中时，似冰雪消融。
 黄家那边，名为黄天逸的高大老者，握着一黄色皮袋，在家主黄凡之后，阴沉着脸，也慢慢踱步而出。
 ——他是奔着虞家而来。
 黄家之主黄凡，向城主辕莲瑶兴师问罪，胞弟黄天逸，则是冲着虞家。
 两人，皆是破玄境。
 虞渊已从高台走下，默不作声地，站在虞炜身旁。
 “老爷子那边？”虞炜沉着脸。
 他担心虞璨，还有虞郦等人，会吃大亏。
 虞渊微笑，“没事的。”
 看着他自信的神情，不知道细节的虞炜，一颗悬着的心，忽然就落下了。
 眼前的这个侄儿，近日表现的诸多古怪，令他困惑重重。
 可他，却也渐渐觉得，因虞渊的存在，家族的很多难题，已不需要自己扛在肩上。
 虞渊，正在帮他分担。
 “你们黄家，好大的威风！”老爷子虞璨，气的直哆嗦，“死的是你黄家人，你们便要造反？要是我孙儿虞渊死了呢？”
 辕家，赵家很多人，表情错愕，似乎不太明白状况。
 黄家，难道是要挑衅辕家，挑衅暗月城的霸主？
 不然，岂敢如此胡来？
 “不错！”黄天逸周身，被蒙蒙金黄色光幕环绕着，“因为死的，是我们黄家的族人，所以就是不行！”
 他一动，聚集在金珞山的，其余的黄家族人，也都神情不善。
 “黄家，真打算造反？就因为黄滨死了？”厉锋在短暂的惊愕后，突地变了脸色，意识到情况不妙，“福老？”
 辕福乃辕家长辈，他向来沉默寡言，在看到厉锋求救般的目光后，才眯着眼，慢吞吞地说：“黄家想要找死的话，那么，就让他们去死好了。”
 “我倒要看看，你们虞家，谁能挡我？”黄天逸喝道。
 有着破玄境初期修为的他，先前只是小试牛刀，如今临近了，没有破玄战力的虞家，还真是无人能抗衡。
 黄庭境后期，手持骊龙剪的虞郦，也顶多能支撑一阵子。
 “我来试试看。”
 突有一巍峨身影，如滚动的皮球般，在惊慌失措的虞家族人前闪现出来。
 “赵东升！”
 黄天逸霍然停住，看着猛地冒出的大胖子，恼火地说道：“黄家和虞家的纠纷，和你们赵家有什么关系？”
 赵家那边的赵溪，扭头询问：“丫头，你爹这是干啥？”
 “能干啥，当然是帮虞家，帮虞渊啊。”赵雅芙随意道。
 “为什么？”赵溪面色古怪，“不会是虞渊和蔺竹筠解除婚约，要娶你吧？”
 “小叔，你真是狗嘴里吐不出象牙啊。”赵雅芙甜甜地笑着，“虞大哥和蔺竹筠的婚约，还没有解除呢。”
 “那，我们赵家凭什么，去帮他虞家？”赵溪的视线，又落向虞郦握着的骊龙剪，再问：“还有，那把骊龙剪又是怎么回事？”
 在黄天逸动手后，虞郦才将骊龙剪取出来。
 赵溪自然知道，骊龙剪可是灵器，当初刚到灵宝斋，虞郦就想购下，只是因囊中羞涩，财力不足，才被迫搁置。
 “骊龙剪呀，可能是我们赵家，给的定情信物吧。”赵雅芙吐舌，也故意捉弄他。
 赵溪挠了挠头，愈发糊涂了。
 “黄家坏了暗月城的规矩，意图谋反，人人得而诛之！”
 便在此刻，城主大人不分青红皂白地，先将罪名扣在黄家头上，“黄凡！你还有什么话好说？”
 对黄家的现任家主，和她父亲辕秋舫一辈的黄凡，她直呼其名，已经不用敬称了。
 “我们黄家坏规矩？”
 黄凡怒极反笑，“真正坏规矩的，是城主大人你吧？!不要以为，你是暗月城的城主，就可肆意妄为！我黄家虽弱，却绝对不会受这个侮辱！”
 “我就侮辱你，侮辱黄家了，你又能怎样？”辕莲瑶懒得和他周旋下去，索性直接撕破脸了，“从现在起，我不用代表暗月城，我就代表辕家之主，要在今日，诛灭你黄家。”
 “算我们赵家一个。”端坐着赵家人群中，体型矮小的赵正豪，在最关键的时候，突然插话了，“赵家儿郎，都准备准备，拿黄家来开刀。”
 他一发话，那些来金珞山的赵家族人，皆一一站起。
 很多赵家族人，其实根本不知道实情，都觉得眼前的局面，说不出的古怪。
 但，他是现任家主，是赵东升、赵溪的父亲。
 他多年来养成的威信，让赵家的族人，不需要知道缘由，只需要知道他的明确态度。
 “老头子，你？”赵溪愕然。
 “黄家要从暗月城除名。”赵正豪漠然道。
 虞家那边，本紧张不安的虞璨，眼看赵东升突然冒出，而后赵家之主发话，辕莲瑶又咄咄逼人，突然就放心了。
 “黄家，怎么就开罪了辕家和赵家？”虞璨百思不得其解。
 先前还气势汹汹的，众多的黄家族人，一看到这个架势，突然冷静了下来。
 很多黄家族人，都眼神困惑地，望着黄凡、黄天逸兄弟，以目光询问：“怎么办？”
 要对虞家动手的黄天逸，面对突然插足的赵东升和赵家，也觉得头疼，他抬头看向天空，心情烦躁无比，“时间，还没有到。三境的比斗，通脉境的第一战，才刚刚结束啊！”
 “城主大人，我想弄清楚，这究竟是怎么回事？”黄凡内心更暴躁，可眼看局势不妙，天色未变，也很急，“我们黄家究竟犯了什么错，要你们辕家和赵家联手，将我们从暗月城除名。”
 辕莲瑶张口，正欲讲话。
 “城主姐姐，别给他们太多拖延的时间。”虞渊的声音，忽然悠悠响起，“现在是白天，等到了晚上，很多事情可就难办了。”
 黄凡、黄琛，包括黄天逸的狠毒目光，霎那间，落在虞渊脸上。
 “小子找死！”
 离的最近的黄琛，再也没耽搁，化作一道金黄电光，疾射而来。
 黄凡一言不发，突然就盯住了辕莲瑶。
 虞渊的那句话，让黄家三位核心人物，骤然明白了一个事实——他们和血神教的密谋大计，怕是已暴露。
 事已至此，他们也不再犹豫，提前发动。
 “轰！轰隆隆！”
 几乎同时，整个金珞山，突然地动山摇。
 山腰处，有不少洞穴，竟喷薄出道道恐怖血色光柱。
 血色光柱，如鲜红的染料，喷洒在阴沉的天空，使得天色绯红，令人心情压抑难受。
 山谷中，境界低微如通脉境者，只觉得呼吸，都比往常要用力许多。
 “黄家，勾结外人，欲要血洗暗月城，罪该万死！”辕莲瑶看着天色，深吸一口气，终确定虞渊的判断，没有任何的错误。
 对黄家，她也再不报一丝幻想。
 一朵朵鲜红莲花，就在她的脚底下生出，璀璨夺目。
 ……
 “喀喀！”
 一块块金珞石，随着黄琛的举动，裂地而出。
 金光熠熠的石块，炮弹般，朝着虞渊砸来。
 然，更多的石块，突传来更为刺耳厉啸。
 “嘭！”
 高空中金珞石，猛地爆碎，石块内部有滴滴鲜血，如长了眼睛般，向辕莲瑶飞去。
 滴滴鲜血，如红玛瑙，晶莹剔透，暗含恐怖的灵能。
 “虞渊！”
 大伯虞炜轻喝一声，已落在他身前，浑身灵力涌动，将那些砸来的金珞石轰碎。
 “黄琛的目标，并不是我。”虞渊神情冷静，“他对我的攻击，只是一个幌子罢了。他，还有黄家之主黄凡，这是要联手杀城主！”
 ……
 </div>
 </body>
 </html>

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

## `CSS`方法实现的优缺点 ##

**优点：**  
简单，高效，性能十足，即使代码变来变去布局也OK。

**缺点：**  
支持的行数有限，例如上面的`demo`最多支持99行代码。

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

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