代码的滚动条使用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上找到了代码.