如何在使用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 %}

生成的页面（注意16进制地址被换行而不是滚动）：

- Usman Ismail

---

不是Jekyll/Pygments的问题，而是CSS的问题。使用类似于.highlight pre { white-space: pre; overflow: auto; }这样的代码应该就可以了。如果需要更多帮助，请展示你所生成的文档。 - manatwork

在你的CSS文件中，或者在HTML文档的head部分的style标签之间。 - manatwork

NVM找到了，是在highlight.css文件中。 - Usman Ismail

Answer 1

在/PROJECT_ROOT/assets/themes/THEME_NAME/css/highlight.css中找到您的highlight.css文件并将以下行添加到末尾：

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

感谢 @manatwork 提供的解决方案。

- Usman Ismail

---

嘿，这样做会导致水平滚动出现问题。如何修复它？ - Surya

最终我不得不这样做才能使它正常工作，不确定对你是否有效。pre { white-space: pre; overflow: scroll; width:inherit;} - Usman Ismail

Answer 2

这个回答特别讲解在 GitHub Pages 上如何使用 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
}

- Doug Lee

---

非常感谢！我也在使用Bootstrap，以前从来没能把所有的东西组合起来。这解决了我的问题！ :) - wislon

至少在我的Pygments实现中，没有<code>标签。从上面的CSS解决方案中删除code一词即可让所有内容正常运行。 - tyleha

Answer 3

我使用Jekyll和Twitter Bootstrap，最终下面的内容对我有效：

.highlight pre {
    word-wrap: normal;
}

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

- Hady

---

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

Answer 4

对我而言，使用最新版本的Jekyll和highlighter，这解决了这个问题。

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

- Mazyod