代碼的滾動條使用google-code-prettify來美化

Question

我在博客上托管的博客中使用google-code-prettify進行語法突出顯示。 我的問題是我沒有看到我的預格式化代碼塊周圍出現滾動條，即使代碼太寬而不適合指定的寬度。 我用格式化代碼塊

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

在我的博客上，滾動條永遠不會出現，並且該行超出了帖子列的右邊緣（例如，看一下這篇文章 ），使它看起來非常難看。 StackOverflow顯示相同的內容：

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

我使用Firebug來研究stackoverflow是如何做到這一點的，我無法發現與我正在做的事情有什么不同。 我鏈接到與SO使用的相同的JS文件（在他們自己的CDN上）。 我也使用相同的風格。

那么，我需要做什么才能將滾動條添加到預先格式化的代碼塊中？

Answer 1

沒關系，我找到了解決方案。 我需要做的就是將以下CSS屬性添加到站點范圍的CSS樣式表中：

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

這介紹了滾動條。

Answer 2

你的代碼中的所有內容都在我的博客左側，但我使用以下CSS代碼修復它：

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

我在github上找到了代碼。