Green_Preformatted Text_Styles

Dabenshi

发布于 2024-04-03 09:14:56

590

发布于 2024-04-03 09:14:56

文章被收录于专栏：Dabenshi

<pre> 是HTML中的一个标签，用于定义预格式化文本块（Preformatted Text）。<pre> 标签会保留文本中的空白字符（包括空格、制表符和换行符），并按照实际编写时的格式进行显示。

使用 <pre> 标签可以在网页上展示一些需要保留原始格式的文本，例如代码片段、日志信息等。预格式化文本不会自动进行换行，而是保留原始的换行和缩进。

下面是一个简单的示例：

<pre>
    Hello, 
        World!
</pre>

在浏览器中渲染后，文本内容将以原始的方式展示出来：

    Hello, 
        World!

可以用CSS对 <pre> 标签中的文本进行进一步的样式调整，例如修改字体、调整边框等。

正文开始，CSS新增样式：

/* 用于语法高亮的样式，使用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行：

/*--- [code]---*/
pre code { display: block; padding: 0.5em; background: #f9fafa; border: 1px solid #dce7e7; overflow:auto; white-space: pre; }

同时禁用F12调试模式：

<script type="text/jаvascript">
    document.onkeydown = function (event) {
        if (event.keyCode == 123) {
            return false;
        }
    }
</script>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2023-07-05 ，如有侵权请联系 cloudcommunity@tencent.com 删除

styles