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:

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

Generated page (Notice the hex address being wrapped rather than scrolled): enter image description here

Not really a Jekyll/Pygments issue, but CSS. With something like `.highlight pre { white-space: pre; overflow: auto; }` should be fine. Show your generated document if you need more help. — manatwork, Jun 19 '12 at 08:08
In your CSS file. Or between `style` tags in the HTML document's `head` section. — manatwork, Jun 19 '12 at 13:45

score 20 · Accepted Answer · answered Jun 21 '12 at 12:57

20

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.

answered Jun 21 '12 at 12:57

Usman Ismail

17,999
14
83
165

hey. by doing so.. the horizontal scroll is misbehaving. how to fix it – Surya Mar 05 '13 at 16:23
I eventually had to do do this to get it working correctly, not sure if it will work for you too. pre { white-space: pre; overflow: scroll; width:inherit;} – Usman Ismail Mar 07 '13 at 16:32

Doug Lee · Answer 2 · 2014-04-30T17:15:59.213

18

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
}

edited Apr 30 '14 at 17:15

answered Apr 30 '14 at 16:57

Doug Lee

768
8
10

thank you so much! I'm also using bootstrap, and could never get all of the things to work together. this solved my problem! :) – wislon Jul 25 '14 at 00:48
At least on my Pygments implementation, there is no `` tag. Removing the word `code` from the CSS solution above got everything up and running. – tyleha Oct 25 '14 at 20:24

score 10 · Answer 3 · answered Jun 13 '14 at 03:14

10

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

answered Jun 13 '14 at 03:14

Hady

2,597
2
29
34

This is the only solution that worked for me. The problem was with `word-wrap`, not `white-space`! – Chris Cirefice Jan 22 '16 at 18:59

score 1 · Answer 4 · answered Aug 29 '14 at 20:54

1

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

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

answered Aug 29 '14 at 20:54

Mazyod

22,319
10
92
157

How to support scrolling when using pygments with Jekyll

4 Answers4

Linked