Question

I am using google-code-prettify 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

<pre class="prettyprint lang-java prettyprinted" style=""> <code>public class MyVeryVeryLongClassname extends MyBaseClassWithAnEvenLongerName implements AnInterface, AnotherInterface, YetAnotherInterface { </code></pre>

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 this post), making it look very ugly. The same is displayed by StackOverflow as:

public class MyVeryVeryLongClassname extends MyBaseClassWithAnEvenLongerName implements AnInterface, AnotherInterface, YetAnotherInterface {

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.

So, what do I need to do to add the scrollbars to the pre-formatted code blocks?

Answer 1

Never mind, I found the solution. All I needed to do was to add the following CSS properties to the site-wide CSS style-sheet:

pre.prettyprint{
    width: auto;
    overflow: auto;
    max-height: 600px
}

This introduces the scrollbars.