基于Cayman Theme的Jekyll博客代码块错位求纯CSS修复

我看了你的代码结构，问题出在Jekyll生成的多层嵌套<pre>和<code>元素上——外层的<code>直接包裹了带行号的表格，和你现有CSS的选择器逻辑不匹配，导致布局错乱。下面是纯CSS的修复方案：

修复代码 #

把这段CSS添加到你现有样式的末尾：

/* 修复带行号的高亮代码块布局 */
.main-content .highlight pre.highlight > code {
  display: block;
  padding: 0;
  background-color: transparent;
  border: 0;
}

.main-content .highlight .rouge-table {
  display: block;
  width: 100%;
  overflow-x: auto;
}

.main-content .highlight .rouge-gutter,
.main-content .highlight .rouge-code {
  vertical-align: top;
}

.main-content .highlight .rouge-code pre {
  margin: 0;
  padding: 0;
  background-color: transparent;
  border: none;
}

为什么这样有效？ #

• 外层的pre.highlight > code默认是display: inline，改成block能消除额外的间距，让表格占满容器
• 给rouge-table设置overflow-x: auto，保证代码过长时能横向滚动，不会撑开容器
• 强制行号列（rouge-gutter）和代码列（rouge-code）顶部对齐，避免错位
• 重置代码列内部pre的边距、背景和边框，避免和外层的高亮样式冲突

替换后你的代码块应该就能正常显示行号且布局对齐了。

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