Scrollbars per codice corretto utilizzando google-code-prettify

Question

Sto usando google-code-prettify per l'evidenziazione della sintassi nel mio blog che è ospitato su blogger. Il mio problema è che non vedo le barre di scorrimento apparire intorno ai miei blocchi di codice preformattati anche quando il codice è troppo ampio per adattarsi alla larghezza designata. Sto formattazione i blocchi di codice con

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

Sul mio blog, le barre di scorrimento non appaiono mai e la linea va oltre il bordo destro della colonna montante (per esempio, dare un'occhiata a this post), facendo sembrare molto brutto . Lo stesso viene visualizzato da StackOverflow come:

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

ho usato Firebug per esaminare come StackOverflow fa questo, e non ho potuto individuare nulla di diverso da quello che sto facendo. Sto collegando lo stesso file JS di quello usato da SO (sul proprio CDN). Sto anche usando gli stessi stili.

Quindi, cosa devo fare per aggiungere le barre di scorrimento ai blocchi di codice preformattati?

Answer 1

Non importa, ho trovato la soluzione. Tutto quello che dovevo fare era aggiungere le seguenti proprietà CSS per il CSS foglio di stile a livello di sito:

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

Questo introduce le barre di scorrimento.

Answer 2

con il codice di tutto ciò va a sinistra nel mio blog, ma ho riparato utilizzando il seguente codice CSS:

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

ho trovato il codice a github.