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 (独自の CDN) で使用されているものと同じ JS ファイルにリンクしています。私も同じスタイルを使用しています。

では、フォーマット済みのコード ブロックにスクロールバーを追加するにはどうすればよいでしょうか。

4

2 に答える 2

11

気にしないで、解決策を見つけました。私がする必要があったのは、次の CSS プロパティをサイト全体の CSS スタイルシートに追加することだけでした:

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

これにより、スクロールバーが導入されます。

于 2012-12-19T05:52:23.863 に答える