在 Jekyll 中使用 pygments 时如何支持滚动答案

【问题标题】：How to support scrolling when using pygments with Jekyll在 Jekyll 中使用 pygments 时如何支持滚动
【发布时间】：2012-06-21 00:51:36
【问题描述】：

在 Jekyll 中工作时，是否可以在使用 pygments 突出显示的代码部分中使用水平滚动而不是文本换行。

文件来源：

{% highlight bash %}

Full thread dump OpenJDK Client VM (19.0-b09 mixed mode, sharing):

"Attach Listener" daemon prio=10 tid=0x0a482400 nid=0x5105 waiting on condition [0x00000000]
java.lang.Thread.State: RUNNABLE
....
{% endhighlight %}

生成的页面（注意十六进制地址被包装而不是滚动）：

【问题讨论】：

不是真正的 Jekyll/Pygments 问题，而是 CSS。像.highlight pre { white-space: pre; overflow: auto; } 这样的东西应该没问题。如果您需要更多帮助，请显示您生成的文档。
在您的 CSS 文件中。或者在 HTML 文档的 head 部分中的 style 标记之间。
NVM 发现它在 highlight.css 文件中

标签： jekyll pygments

【解决方案1】：

在以下位置找到您的 highlight.css： /PROJECT_ROOT/assets/themes/THEME_NAME/css/highlight.css

并在最后添加这一行：

pre { white-space: pre; overflow: auto; }

感谢@manatwork 的解决方案。

【讨论】：

嘿。通过这样做..水平滚动行为不端。如何解决它
我最终不得不这样做才能让它正常工作，但不确定它是否也适合你。前 { 空白：前；溢出：滚动；宽度：继承；}

【解决方案2】：

这个答案专门处理在 github 页面上使用 pygments 和 jekyll

突出显示是这样生成的：

<div class="highlight">
  <pre>
    <code>
      ... pygments highlighting spans ...
    </code>
  </pre>
</div>

将你带到你想要的地方的 css 是：

// -- selector prefixed to the wrapper div for collision prevention

.highlight pre code * {
  white-space: nowrap;    // this sets all children inside to nowrap
}

.highlight pre {
  overflow-x: auto;       // this sets the scrolling in x
}

.highlight pre code {
  white-space: pre;       // forces <code> to respect <pre> formatting
}

【讨论】：

非常感谢！我也在使用引导程序，并且永远无法让所有的东西一起工作。这解决了我的问题！ :)
至少在我的 Pygments 实现中，没有<code> 标签。从上面的 CSS 解决方案中删除单词 code 可以让一切正常运行。

【解决方案3】：

我使用的是 Jekyll 和 Twitter Bootstrap，以下是最终对我有用的方法：

.highlight pre {
    word-wrap: normal;
}

.highlight pre code {
    white-space: pre;
}

【讨论】：

这是唯一对我有用的解决方案。问题出在word-wrap，而不是white-space！

【解决方案4】：

就我而言，使用最新和最棒的 Jekyll 和荧光笔版本，这解决了问题：

/* Make code block overflow */
.highlight pre {
  display: inline-block;
}

【讨论】：