Scroll bars in Blogger <pre> Tags
2016-02-28 08:35
EDIT
I just discovered the fix below only works in Chrome. Sigh. Poor testing on my part, but is this also poor work on Google’s? I am, after all, using Google’s own “prettify”! What will it take to have scrolling pre blocks???
===============
EDIT 2
Finally! Ignore the code in the main post, and use this.
pre {display:block; overflow:auto; width:auto; white-space:pre; word-wrap:normal;}
pre.prettyprint {background-color: aliceblue;}
pre.console {background-color: black; color: white;}
===== DON’T USE THIS CSS, BUT LEAVING HERE FOR HISTORICAL (HYSTERICAL) REASONS======
I guess I didn’t look hard enough. For well over a year, I accepted that my blog’s source code sections would always wrap. I put the code in a <pre class=”prettyprint”> tag, and I had added the following to my template.
overflow: auto is pretty standard stuff I’ve used before, and no one pointed me elsewhere. Finally, today, I found the answer on this Stack Overflow page.
http://stackoverflow.com/a/15639868
I needed to include overflow-wrap: normal.
pre.prettyprint {background-color: aliceblue; overflow:auto;overflow-wrap:normal;}
pre.console {background-color: black; color: white; padding: 5px; overflow:auto;overflow-wrap:normal;}
As you can see in the example below, it now adds the expected scroll bar.
public class LongCode()
{
public void PrintLongCode()
{
Console.Write("This is some pretty long code that shouldn't wrap so that the reader isn't confused by unexpected line breaks.");
}
}