Pages

Sunday, February 28, 2016

Scroll bars in Blogger <pre> Tags

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.

http://stackoverflow.com/questions/13946182/scrollbars-for-code-prettified-using-google-code-prettify

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.

image

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.");
    }
  }

No comments:

Post a Comment