Horizontal scrollbar not appearing for code blocks

[quicknir]

Despite my best efforts, I'm not able to get the horizontal scrollbar to appear for "normal" (no line numbers) code blocks. It does however work for code blocks with line numbers, interestingly. For me this isn't actually that big an issue, because I only plan to use code blocks with line numbers. However, I wanted to push some of my changes to lanyon so the community could benefit. Having line numbers work properly out of the box (see #157 ) would save people effort, as I think would horizontal scroll bars (because of the discrepancy between width on mobile and regular, horizontal scroll bars for code are almost certainly the best default). I think though to push this, I need to have the behavior be uniform across both types of code blocks.

To get scrollbars to work inside code blocks, I used:

.highlight pre {
    padding: 0.5em;
    overflow-x: auto;
}

.highlight td.code pre {
    padding: 0;
    white-space: pre;
}

/* Doesn't seem to work; thus no horizontal scroll when line numbers absent */
.highlight > pre {
    white-space: pre; /* Solves horizontal scroll via black magic */
}

The second block works to made line numbered blocks have a horizontal scroll, but the third does not work properly on un-numbered blocks. I opened up the individual span elements of the code block block in the browser, and even when I apply white-space:pre to individual elements, it does not work. I've tried other bits of CSS that I've seen when googling around:

.highlight pre code * {
  white-space: nowrap;    // this sets all children inside to nowrap
}

.highlight pre code {
  white-space: pre;       // forces <code> to respect <pre> formatting
}

This did cause the scroll bar to appear, but ended up merging adjacent lines of code in many cases (seemingly, whenever rouge thought they were same syntax elements).

Would be nice to solve this and upstream some of these changes IMHO, to increase the chance that people can start using Lanyon without needing to tweak the css for syntax highlighting so much.

[quicknir]

I resolved this on my own, essentially what was necessary was in the .highlight > pre block, I needed to also set word-wrap to normal.