使用 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>

在我的博客上，滚动条从不出现，并且线条超出了帖子列的右边缘（例如，看看this post），使它看起来很丑。 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

使用您的代码，我的blog 中的所有内容都位于左侧， 但我使用以下 CSS 代码修复了它：

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

我在github找到了代码。