title: Scrollbars for code prettified using google-code-prettify
body: <p>I am using <a href="http://code.google.com/p/google-code-prettify/">google-code-prettify</a> for syntax highlighting in my blog which is hosted on blogger. My problem is I do not see the scrollbars appear around my pre-formatted code blocks even when the code is too wide to fit within the designated width. I am formatting the code blocks with</p>
  
  <pre><code>&lt;pre class="prettyprint lang-java prettyprinted" style=""&gt; &lt;code&gt;public class MyVeryVeryLongClassname extends MyBaseClassWithAnEvenLongerName implements AnInterface, AnotherInterface, YetAnotherInterface { &lt;/code&gt;&lt;/pre&gt;
  </code></pre>
  
  <p>On my blog, the scrollbars never appear and the line goes beyond the right edge of the post column (For example, take a look at <a href="http://curioustechizen.blogspot.com/2012/12/code-smells-calling-life-cycle-methods.html">this post</a>), making it look very ugly. The same is displayed by StackOverflow as:</p>
  
  <pre><code>public class MyVeryVeryLongClassname extends MyBaseClassWithAnEvenLongerName implements AnInterface, AnotherInterface, YetAnotherInterface {
  </code></pre>
  
  <p>I used Firebug to look into how stackoverflow does this, and I couldn't spot anything different from what I am doing. I am linking to the same JS file as the one used by SO (on their own CDN). I'm also using the same styles.</p>
  
  <p>So, what do I need to do to add the scrollbars to the pre-formatted code blocks?</p>