Jekyll Rouge 中的垂直滚动条答案

【问题标题】：Vertical Scroll bars in Jekyll RougeJekyll Rouge 中的垂直滚动条
【发布时间】：2016-07-20 16:56:52
【问题描述】：

有没有在 Jekyll 中为非常长的代码添加垂直滚动条？我尝试在 _syntax.scss 中添加一个 Height 属性，但没有运气。我使用的语法高亮是 rouge，我使用的主题在这里：https://github.com/mmistakes/hpstr-jekyll-theme

【问题讨论】：

标签： jekyll scrollbars rouge

【解决方案1】：

是的，请确保将此 CSS 添加到您的主题中：

pre.highlight {
  max-height: 200px; /* Change to your desired max height */
  overflow-y: scroll;
}

更新。 使用此处提供的 OP URL 是我所做的：

查找定义类高亮的位置并将其添加到其声明的末尾：

.highlight {
  [...]
  border: 1px solid #dbdbdb;
  background-color: #272822;
  border-radius: 3px;

/** This part **/
  max-height: 300px;
  overflow-y: auto;
}

结果：

【讨论】：

如果你把它放在 pre 标签下而不是 pre.highlight 下，这有点工作，但它看起来很有趣：raw.githubusercontent.com/Supercap2F/supercap2f.github.io/…
你放overflow还是overflow-y？对我来说看起来像是溢出，除非你有其他的 CSS 干扰。我直接在Hpstr主题页面上试了一下，效果很好。
我把 overflow-y 和你的代码一样，我不认为我有任何自定义 css 会影响它。我还尝试将该代码放在 .highlight 下，结果如下：raw.githubusercontent.com/Supercap2F/supercap2f.github.io/… 它没有主题样式，并且在您一直向下滚动之前不会显示底部滚动条。
酷 ? 如果您的网站是实时的，我也可以看看最终结果。并提出您需要的确切 CSS。
这可能行得通！这是页面：supercap2f.github.io/CPU-Power-Supply-Mod。一直向下滚动代码块。