Search code examples
csssyntax-highlightinghighlightpre

Difficulty getting pre and code tags to scroll rather than wrap

My website is built using a static site generator I created myself, and uses Bootstrap for the layout. I'm using Highlight.js for the syntax highlighting (running server-side as part of the build process) and it's working pretty well. However, one thing has stumped me.

I would like the code tags to scroll when a line is too wide, rather than wrapping to the next line. Usually, I believe this can normally be done by styling the <pre> tags with white-space: nowrap, but that doesn't work here, and everything I've tried either has no effect or just pushes everything to the left.

Can anyone else see what the problem is?

Solution

  • Stumbled across the answer here in the end:

    pre {
    overflow-x: auto;
}
pre code {
    overflow-wrap: normal;
    word-wrap: normal;
    white-space: pre;
}