CODEWITHSUNDEEP
csssyntax-highlightinghighlightpre
Matthew Daly
Matthew Daly

Reputation: 9476

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?

Upvotes: 0

Views: 364

Answers (2)

Matthew Daly
Matthew Daly

Reputation: 9476

Stumbled across the answer here in the end:

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

Upvotes: 2

kukko
kukko

Reputation: 653

I think if you add the following attribute at the declaration, it's will be fine.

useBR:false

Upvotes: 0

Related Questions