Как поддерживать прокрутку при использовании пигментов с помощью Jekyll

Можно ли использовать горизонтальную прокрутку, а не текстовую обертку в секции кода, в которой вы работаете с пигами при работе в 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 %}

Сгенерированная страница (обратите внимание на то, что шестнадцатеричный адрес будет обернут, а не прокручен): enter image description here

Ответы

Ответ 1

Найдите свой highlight.css по адресу: /PROJECT _ROOT/assets/themes/THEME_NAME/css/highlight.css

и добавьте эту строку в конец:

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

Спасибо @manatwork для решения.

Ответ 2

В этом ответе конкретно говорится об использовании пигментов и jekyll на страницах github

выделение создается таким образом:

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

Ответ 3

Я использовал Jekyll и Twitter Bootstrap, и в итоге я работал в конце:

.highlight pre {
    word-wrap: normal;
}

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

Ответ 4

Как и я, используя последние и приветствуя выпуски Jekyll и highlighter, это прибило проблему:

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