jekyll - Jekyllでpygmentsを使用するときにスクロールをサポートする方法

Question

Jekyllで作業しているときに、ピグメントで強調されたコードセクションでテキストの折り返しではなく水平スクロールを使用することは可能ですか？

ドキュメントのソース：

{% 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進アドレスがスクロールではなくラップされていることに注意してください）：

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とTwitterBootstrapを使用していましたが、最終的には次のことがうまくいきました。

.highlight pre {
    word-wrap: normal;
}

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

Answer 4

私に関しては、最新の素晴らしいJekyllと蛍光ペンのリリースを使用して、これは問題を釘付けにしました：

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