Как установить максимальную высоту блока кода SyntaxHighlighter для всего веб-сайта и для одного блока кода?
Я хотел бы как локально, так и глобально установить максимальную высоту блоков кода SyntaxHighlighter.
Вот пример глобальной реализации такого рода работ:
Как только вы получите SyntaxHighlighter, реализованный и работающий согласно этим инструкциям здесь, как раз перед </head> в своем шаблоне Blogger добавьте:
<style type="text/css">
.syntaxhighlighter {
height: 1024px;
overflow-y: auto !important;
overflow-x: auto !important;}
</style>
( Источник). Это ограничит размер кода до 1024 вертикальных пикселей, затем добавьте вертикальную полосу прокрутки, чтобы увидеть остальные. Это замечательно, но он НЕ устанавливает максимальную высоту, а устанавливает фиксированную высоту. Таким образом, даже если ваш код имеет длину всего 4 строки, он теперь имеет высоту 1024 пикселя, помещая пробел под ваши 4 строки и до того, как следующая вещь появится в вашем посте.
Обратите внимание, например, ниже. Это временная страница на моем сайте здесь: http://www.electricrcaircraftguy.com/p/test-page_19.html. Вы увидите длинный блок кода, и это хорошо, потому что для отображения требуется> 1024 вертикальных пикселя, за которыми следуют 4 маленькие строки кода, за которыми следует тонна пустого пространства, за которым следует слово "конец", чтобы указать, где появляется следующий элемент в сообщении.
- Я не хочу, чтобы все это пустое пространство - я хочу, чтобы 1024 пикселя были максимальной высотой, а не фиксированным значением, и...
- Я хочу иметь возможность устанавливать другие локальные настройки максимальной высоты для отдельных блоков кода. Например: 1024 пикселя должны быть глобальным максимумом для всего моего сайта, но, возможно, я хочу 350 пикселей на определенную запись для другого блока кода, затем 500 пикселей для следующего блока кода и т. Д.
1 ответ
Использовать стиль CSS
максимальная высота
.syntaxhighlighter {
overflow-y: auto !important;
overflow-x: auto !important;
max-height: 1024px;
}