前言

本篇文章是在WordPress使用Argon主题的代码高亮时，pre,code标签解析class="language-plain_text"属性的时候，内容会超出容器显示，内容会导致整个页面的宽度跟文本长度一样宽。

解决方法

注意，下面的内容修改可能仅适用于主题为Argon的，针对pre，code标签，属性class="language-plain_text"的修改

内容超出容器时，滑动显示超出内容，如果不需要背景使用深色主题的话，使用以下CSS代码就可以了。

/* WordPress代码块内容超出设置横向滚动解决方案 */
pre.language-plain_text,
code.language-plain_text {
    overflow-x: auto !important;
    display: block !important;
    max-width: 100% !important;
    white-space: pre !important;
    word-wrap: normal !important;
    box-sizing: border-box !important;
}

内容超出容器时滑动显示超出内容并设置深色主题。就是在上面的基础上，加上了代码块深色主题的设置。

/* 解决pre,code标签使用，class的属性为language-plain_text时，导致内容超出容器，并设置代码块深色主题*/
pre.language-plain_text,
code.language-plain_text {
    overflow-x: auto !important;
    display: block !important;
    max-width: 100% !important;
    white-space: pre !important;
    word-wrap: normal !important;
    box-sizing: border-box !important;
    padding: 1rem;
    /* 只修改这两行颜色 */
    background: #1e1e1e !important; /* 深色背景 */
    color: #d4d4d4 !important; /* 浅色文字 */
    border-radius: 4px;
    font-family: monospace;
}

/* 防止父容器溢出 */
.wp-block-code,
.wp-block-preformatted {
    overflow-x: hidden !important;
    max-width: 100% !important;
}

/* 美化滚动条 - 只修改颜色 */
pre.language-plain_text::-webkit-scrollbar {
    height: 6px;
}
pre.language-plain_text::-webkit-scrollbar-thumb {
    background: #555; /* 深色背景下的浅灰色 */
    border-radius: 3px;
}
pre.language-plain_text::-webkit-scrollbar-thumb:hover {
    background: #777; /* 悬停时稍亮 */
}

/* Firefox 滚动条样式 - 只修改颜色 */
pre.language-plain_text {
    scrollbar-width: thin;
    scrollbar-color: #555 #333; /* 滑块颜色 | 轨道颜色 */
}

/* 移动端响应式处理 */
@media (max-width: 768px) {
    pre.language-plain_text {
        white-space: pre-wrap !important;
        word-break: break-word !important;
    }
}

语法补充

在 Markdown 中声明代码框的类型（语法高亮），需在代码块起始的 三个反引号 ``` 后直接指定语言名称。格式如下：

```语言类型
你的代码
```

常用示例:

```python
print("Hello World")
```