Posted on | by liu
css教程网站，ul去css样式，css怎么设置所有字体，css inline-block 间距，css的语法结构组成，css3 怎么写半圆，html css 设置 page
body {
background-color: #fff;
}
h1 {
color: #f00;
font-size: 24px;
}
接下来，大家需要引入一个名为“prism.js”的JavaScript文件和一个名为“prism.css”的CSS文件。其中，prism.js文件用于实现代码高亮效果，而prism.css文件则用于实现显示行号的功能。
在引入文件后，大家可以在CSS文件中添加以下代码：
.line-numbers {
position: relative;
padding-left: 3.8em;
counter-reset: linenumber;
}
.line-numbers>.line-numbers-rows {
position: absolute;
pointer-events: none;
top: 0;
left: 0;
width: 3em;
font-size: 14px;
line-height: 1.4;
text-align: right;
border-right: 1px solid #ccc;
margin: 0;
padding: 0 0.3em;
color: #999;
}
.line-numbers-rows:before {
content: counter(linenumber);
counter-increment: linenumber;
}
/* override some defaults */
code[class*=”language-“],
pre[class*=”language-“] {
color: #000;
background: none;
text-shadow: 0 1px white;
font-family: Consolas, Monaco, ‘Andale Mono’, ‘Ubuntu Mono’, monospace;
font-size: 1em;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
line-height: 1.5;
tab-size: 4;
hyphens: none;
}
通过以上代码，大家可以设置代码框的外观和行号的样式，从而实现显示行号的效果。
总的来说，使用CSS显示行号可以让代码更加直观易懂，并能够方便地进行调试和定位错误。如果您是一名网页设计师或者开发者，建议在编写CSS时尝试使用这种方法来优化您的代码。