Cómo admitir el desplazamiento cuando se utilizan piropos con Jekyll

pygments

Question

¿Es posible utilizar el desplazamiento horizontal en lugar del ajuste de texto en una sección de código resaltada con piratas cuando se trabaja en Jekyll?

Fuente del documento:

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

Página generada (observe que la dirección hexadecimal se envuelve en lugar de desplazarse):

Answer 1

En lo que a mí respecta, utilizando los últimos lanzamientos de Jekyll y resaltador, esto solucionó el problema:

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

Answer 2

Encuentra tu highlight.css en: /PROJECT_ROOT/assets/themes/THEME_NAME/css/highlight.css

y añade esta línea al final:

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

Gracias @manatwork por la solución.

Answer 3

Esta respuesta trata específicamente sobre el uso de pygments y jekyll en las páginas de github.

El resaltado se genera así:

<div class="highlight">
  <pre>
    <code>
      ... pygments highlighting spans ...
    </code>
  </pre>
</div>

El css que te llevará a donde quieras es:

// -- 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 4

Estaba usando Jekyll y Twitter Bootstrap, y lo siguiente fue lo que funcionó para mí al final:

.highlight pre {
    word-wrap: normal;
}

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