Как установить максимальную высоту блока кода 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 маленькие строки кода, за которыми следует тонна пробела, а затем слово «конец», чтобы указать, где появляется следующий элемент в сообщении.

  1. Мне не нужны все эти пробелы — я хочу, чтобы 1024 пикселя были максимальной высотой, а не фиксированным значением, и...
  2. Я хочу иметь возможность установить другие локальные настройки максимальной высоты для отдельных блоков кода. Пример: 1024 пикселя должны быть глобальным максимумом для всего моего сайта, но, может быть, я хочу 350 пикселей в определенном посте для другого блока кода, а затем 500 пикселей для следующего блока кода и т. д.

введите описание изображения здесь


person Gabriel Staples    schedule 21.10.2016    source источник


Ответы (1)


использовать стиль css

максимальная высота

.syntaxhighlighter {
    overflow-y: auto !important;
    overflow-x: auto !important;
    max-height: 1024px;
}
person repzero    schedule 21.10.2016
comment
Все идет нормально! Как насчет локальных спецификаций? Может быть, я могу просто повторно опубликовать этот код прямо над каждым блоком кода в отдельном сообщении, обновив значение max-height для каждого блока кода? - person Gabriel Staples; 21.10.2016
comment
стиль будет применяться ко всем элементам div с классом .syntaxhighlighter.... у вас есть другие элементы div с другими классами? - person repzero; 21.10.2016
comment
Веб-дизайн — одна из тех областей, в которых я даже не знаю достаточно, чтобы понять ваш вопрос. Я гуглю div, пока мы говорим. Приношу свои извинения за то, что я так слаб в этой области. - person Gabriel Staples; 21.10.2016
comment
Я выполнил поиск div в своем шаблоне сайта и получил 401 результат. Кажется, у меня сотни классов. - person Gabriel Staples; 21.10.2016
comment
когда вы добавили мой стиль в свой контейнер... все ли элементы div, на которые вы хотели бы повлиять, повлияли на максимальную высоту? если нет... найдите класс или идентификатор div и примените стиль.... если у него много классов, я бы посоветовал использовать идентификатор вместо класса, потому что, если вы стилизуете класс, это повлияет на все div с этим классом ( включая те, которые вы не хотите затрагивать) - person repzero; 21.10.2016
comment
да, когда я помещаю этот стиль в свой контейнер blogger <head> </head>, это затрагивает все блоки кода SyntaxHighlighter, помеченные <pre class="brush:cpp"> source code here </pre>, например, для всего сайта. Я хотел бы иметь возможность применять параметр max-height к отдельным блокам исходного кода <pre> </pre> (выделенным SyntaxHighlighter), но не знаю, как это сделать. - person Gabriel Staples; 21.10.2016
comment
предварительно {максимальная высота: 100 пикселей; переполнение: авто} - person repzero; 21.10.2016
comment
Для своего кода C++ я попробовал <pre {max-height:50px;} class="brush:cpp"> code goes here </pre>, и это не сработало. - person Gabriel Staples; 21.10.2016