Полосы прокрутки для кода, приукрашенного с использованием google-code-prettify

Я использую 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, и я не мог различить ничего, что я делаю. Я связываюсь с тем же файлом JS, что и тот, который используется SO (на их собственном CDN). Я также использую те же стили.

Итак, что мне нужно сделать, чтобы добавить полосы прокрутки в предварительно отформатированные блоки кода?

Ответ 1

Ничего, я нашел решение. Все, что мне нужно было сделать, это добавить следующие CSS-свойства в CSS-таблицу на весь сайт:

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

Это вводит полосы прокрутки.

Ответ 2

с вашим кодом все идет влево в blog, но я исправил его, используя следующий код CSS:

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

Я нашел код на github.