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上找到了代码。

代码的滚动条使用google-code-prettify来美化

2 个答案: