如何修改WordPress行内代码块样式以优化命令显示效果

你的行内代码块被显示成多条独立命令，核心问题出在换行规则和元素布局属性上，结合你给出的当前CSS，调整以下属性就能实现目标样式：

• 强制代码块不换行：添加 white-space: nowrap;，避免单条命令被自动拆分
• 统一上下内边距：把 padding: 0.125rem 0.3125rem 0.0625rem; 改为 padding: 0.125rem 0.3125rem;，消除视觉上的割裂感
• 确保元素整体渲染：添加 display: inline-block;，防止行内元素被父容器的换行规则拆分

修改后的完整CSS代码：

code {
  font-family: Consolas, "Liberation Mono", Courier, monospace;
  font-weight: normal;
  font-size: 1em;
  color: #333;
  background-color: rgba(0, 0, 0, 0.1);
  border-width: 1px;
  border-style: solid;
  border-color: rgba(0, 0, 0, 0.1);
  -webkit-border-radius: 2px;
  border-radius: 2px;
  padding: 0.125rem 0.3125rem; /* 统一上下内边距 */
  white-space: nowrap; /* 强制单条命令保持单行 */
  display: inline-block; /* 确保元素作为整体渲染 */
}

简单说明：

• white-space: nowrap 是解决多行拆分的核心，直接禁止代码块内的自动换行
• 统一内边距让代码块的垂直视觉效果更均衡，不会出现上下高度不一致的情况
• display: inline-block 可以避免部分主题中，行内元素被容器强制拆分的问题

内容的提问来源于stack exchange，提问作者Kris