html中展示html代码 左侧显示行数
时间: 2024-08-15 18:09:52 浏览: 76
在HTML中直接展示HTML代码并显示每行的行号,通常需要借助外部工具或技术配合,因为浏览器本身并不支持这样的功能。一种常见的做法是利用JavaScript编写一个简单的文本编辑器或者代码高亮插件,如Prism.js或CodeMirror,它们可以实时预览HTML,并在旁边添加行号。
例如,你可以创建一个`<pre>`元素用于展示代码,并使用CSS为其添加行号样式。这里有一个简单的例子:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.line-numbers {
counter-reset: line;
}
.line-numbers pre {
white-space: pre-wrap; /* 或者white-space: -moz-pre-wrap; 亲Firefox */
white-space: -o-pre-wrap; /* 只有Opera 7以上版本才支持 */
word-wrap: break-word; /* IE678支持 */
padding-left: 40px;
}
.line-numbers pre code {
display: block;
counter-increment: line;
}
.line-numbers pre code::before {
content: counter(line);
position: relative;
left: -40px;
width: 30px;
text-align: right;
color: #999;
}
</style>
</head>
<body>
<div class="line-numbers">
<pre><code><!DOCTYPE html>
<html lang="en">
<head>
<style>
/* ... (剩下的HTML代码) ... */
</style>
</head>
<body>...</code></pre>
</div>
</body>
</html>
```