Saturday, April 27, 2024
HomeJavaScriptFixing GitHub Gist's Sudden Case Of Line Wrapping

Fixing GitHub Gist’s Sudden Case Of Line Wrapping


Yesterday, after I was giving my submit on pagination utilizing LIMIT and OFFSET in MySQL a once-over, I seen that my code samples – that are powered by GitHub Gists – have been rendering tremendous wonky. Once I inspected the runtime kinds of the web page, it seems that GitHub made a current breaking change to the white-space property used inside their “line of code” CSS class. To “repair” this (ie, flip off “phrase wrap” for my code snippets), I needed to add a CSS override to my weblog:

physique .gist .blob-code-inner {
	white-space: pre ;
}

They have been utilizing white-space: pre-wrap. I had by no means heard of this feature earlier than. The Mozilla Developer Community (MDN) defines this as:

pre-wrap: Sequences of white area are preserved. Strains are damaged at newline characters, at <br>, and as essential to fill line bins.

I do not know what “as essential to fill line bins” means; however, apparently that’s what is inflicting my code to wrap. Overriding their CSS with pre fastened it. You’ll be able to see how my code renders after I toggle my override white-space property on-and-off:

Looks like an odd breaking change for GitHub to make – I can not think about that many individuals discover code wrapping straightforward to prepared. However, at the least it was straightforward to repair on my finish.

Wish to use code from this submit?
Take a look at the license.



RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments