How to support scrolling when using pygments with Jekyll

Question

Is it possible to use horizontal scrolling rather than text wrapping in a code section highlughted with pygments when working in Jekyll.

Source of document:

Answer 1

Find your highlight.css at: /PROJECT_ROOT/assets/themes/THEME_NAME/css/highlight.css

and add this line at the end:

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

Thanks @manatwork for the solution.

Answer 2

As for me, using the latest and greates Jekyll & highlighter releases, this nailed the issue:

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

Answer 3

I was using Jekyll and Twitter Bootstrap, and the following is what worked for me in the end:

.highlight pre {
    word-wrap: normal;
}

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

Answer 4

this answer deals specifically with using pygments and jekyll on github pages

the highlighting is generated thusly:

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

the css that will get you where you want is:

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