如何在与Jekyll一起使用pygments时支持滚动

Question

在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 %}

生成的页面(注意十六进制地址被包装而不是滚动):

Answer 1

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

并在最后添加此行:

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

感谢@manatwork的解决方案.

Answer 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
}

Answer 3

我使用的是Jekyll和Twitter Bootstrap,以下是最终对我有用的东西:

.highlight pre {
    word-wrap: normal;
}

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