Ответ 1
Ничего, я нашел решение. Все, что мне нужно было сделать, это добавить следующие CSS-свойства в CSS-таблицу на весь сайт:
pre.prettyprint{
width: auto;
overflow: auto;
max-height: 600px
}
Это вводит полосы прокрутки.
Я использую 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). Я также использую те же стили.
Итак, что мне нужно сделать, чтобы добавить полосы прокрутки в предварительно отформатированные блоки кода?
Ничего, я нашел решение. Все, что мне нужно было сделать, это добавить следующие CSS-свойства в CSS-таблицу на весь сайт:
pre.prettyprint{
width: auto;
overflow: auto;
max-height: 600px
}
Это вводит полосы прокрутки.
с вашим кодом все идет влево в blog, но я исправил его, используя следующий код CSS:
pre.prettyprint {
display: block;
overflow: auto;
width: auto;
/* max-height: 600px; */
white-space: pre;
word-wrap: normal;
padding: 10px;
}
Я нашел код на github.