Bildlaufleisten für Code verschönert mit Google-Code-Prettify

Question

Ich verwende google-code-prettify für die Syntax-Hervorhebung in meinem Blog, die auf Blogger gehostet wird. Mein Problem ist, dass die Bildlaufleisten nicht um meine vorformatierten Codeblöcke herum angezeigt werden, selbst wenn der Code zu breit ist, um in die angegebene Breite zu passen. Ich Formatierung der Codeblöcke mit

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

Auf meinem Blog, die Bildlaufleisten nie angezeigt, und die Linie geht über den rechten Rand der Postsäule (Nehmen wir zum Beispiel einen Blick auf this post), ist es sehr hässlich aussehen zu lassen . Dasselbe von Stackoverflow als angezeigt wird:

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

ich Firebug verwendet, um zu schauen, wie Stackoverflow dies tut, und ich konnte nichts anders als vor Ort, was ich tue. Ich verlinke auf dieselbe JS-Datei wie die von SO verwendete (auf ihrer eigenen CDN). Ich benutze auch die gleichen Stile.

Also, was muss ich tun, um die Scrollbars den vorformatierten Codeblöcken hinzuzufügen?

Answer 1

Egal, ich habe die Lösung gefunden. Alles, was ich tun musste, war die folgenden CSS-Eigenschaften auf der Website weite CSS-Style-Sheet hinzuzufügen:

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

Dies führt in den Bildlaufleisten.

Answer 2

mit Ihrem Code allem geht nach links in meinem blog, aber ich regelte es den folgenden CSS-Code verwendet:

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

ich den Code auf github gefunden.