11

我在博客上使用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 上）。我也在使用相同的样式。

那么，我需要做什么才能将滚动条添加到预先格式化的代码块中？

4

2 回答 2

11

没关系，我找到了解决方案。我需要做的就是将以下 CSS 属性添加到站点范围的 CSS 样式表中：

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

这引入了滚动条。

于 2012-12-19T05:52:23.863 回答
10

使用您的代码，我的博客中的所有内容都位于左侧，但我使用以下 CSS 代码对其进行了修复：

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

我在github上找到了代码。

于 2014-06-05T22:22:01.067 回答