CODEWITHSUNDEEP
javascriptscrollbarpretty-print
curioustechizen
curioustechizen

Reputation: 10672

Scrollbars for code prettified using google-code-prettify

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?

Upvotes: 11

Views: 3716

Answers (2)

Jeniffer
Jeniffer

Reputation: 105

with your code everything goes to left side in my blog, but i fixed it using the following CSS code:

pre.prettyprint {
    display: block;
    overflow: auto;
    width: auto;
    /* max-height: 600px; */
    white-space: pre;
    word-wrap: normal;
    padding: 10px;   
}

I found the code on github.

Upvotes: 10

curioustechizen
curioustechizen

Reputation: 10672

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.

Upvotes: 11

Related Questions