<pre> 是HTML中的一个标签，用于定义预格式化文本块（Preformatted Text）。<pre> 标签会保留文本中的空白字符（包括空格、制表符和换行符），并按照实际编写时的格式进行显示。
使用 <pre> 标签可以在网页上展示一些需要保留原始格式的文本，例如代码片段、日志信息等。预格式化文本不会自动进行换行，而是保留原始的换行和缩进。
下面是一个简单的示例：
复制代码
代码语言：javascript复制<pre>
Hello,
World!
</pre>在浏览器中渲染后，文本内容将以原始的方式展示出来：
复制代码
代码语言：javascript复制 Hello,
World!可以用CSS对 <pre> 标签中的文本进行进一步的样式调整，例如修改字体、调整边框等。
正文开始，CSS新增样式：
复制代码
代码语言：javascript复制/* 用于语法高亮的样式，使用Highlight.js库 */
.hljs {
/* 盒子属性 */
border-radius: 4px; /* 边框圆角 */
position: relative;
display: block;
overflow-x: hidden;
background: #f9fafa; /* 浅灰背景色 */
color: #999; /* 浅灰文字颜色 */
padding: 30px 5px 2px 5px; /* 内边距（上、右/左、下） */
overflow: auto; /* 超出尺寸时添加滚动条 */
border-top: 5px solid #ddd; /* 顶部边框 */
}
.hljs::before {
/* 伪元素样式 */
content: ""; /* 空内容 */
position: absolute;
left: 15px; /* 左侧位置 */
top: 10px; /* 顶部位置 */
overflow: visible; /* 允许内容溢出 */
width: 12px; /* 伪元素宽度 */
height: 12px; /* 伪元素高度 */
border-radius: 16px; /* 圆形形状 */
box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b; /* 两个阴影效果 */
-webkit-box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b; /* Safari浏览器特定的阴影效果 */
background-color: #fc625d; /* 红色背景色 */
white-space: nowrap; /* 防止换行 */
text-indent: 75px; /* 左侧文本缩进 */
font-size: 16px; /* 字体大小 */
line-height: 12px; /* 行高 */
font-weight: 700; /* 粗体字重 */
}
:not(pre) > code {
/* 非<pre>元素内的<code>元素样式 */
padding: 0.1em; /* 小间距 */
border-radius: 0.3em; /* 稍微圆角 */
background-color: #eee; /* 浅灰背景色 */
color: #50a14f; /* 绿色文字颜色 */
}
注释原样式Green/css/engine.css约357行：
复制代码
代码语言：javascript复制/*--- [code]---*/
pre code { display: block; padding: 0.5em; background: #f9fafa; border: 1px solid #dce7e7; overflow:auto; white-space: pre; }同时禁用F12调试模式：
复制代码
代码语言：javascript复制<script type="text/jаvascript">
document.onkeydown = function (event) {
if (event.keyCode == 123) {
return false;
}
}
</script>
