css - jekyll、kramdown、rouge を使用してコードブロックの行折り返しを防止する

Question

jekyll ブログでマークダウン構文の強調表示に kramdown と rouge を使用して、長いコード行が新しい行に折り返されないようにしたいと考えています。水平スクロールバーを使用して残りのコンテンツを表示できるようにしたいと考えています。

jekyll の設定は次のとおりです。

markdown: kramdown
kramdown:
  input: GFM
  syntax_highlighter: rouge

base16.solarized.darkコマンドによって生成されたcssテーマを使用していrougifyます。

コードの使用例を次に示します。

```` js
console.log("some code") // and a really really long long long comment which i'd like to not wrap onto the next line
````

score 7 · Accepted Answer

Boostrap は、white-space: pre-wrapコードブロックを読みやすくするためにルールを追加しています。

このラップを回避するためにコードブロックが必要な場合は、css/data-creative.cssを編集して追加できます。

pre code{
  white-space: pre;
}

score 2 · Accepted Answer

code要素セットの CSS ルールがどこかにありますwhite-space: pre-wrap。次のルールを追加してオーバーライドします。

code {
    white-space: pre;
}

css - jekyll、kramdown、rouge を使用してコード ブロックの行折り返しを防止する