Рамочка вокруг кода и команд
Случайно заглянул на свой ЖЖ, который когда-то пытался вести. Обнаружил там довольно интересный html код, который уже притащил на этот блог. Итак, для того, чтобы сделать что-то типа такого:
aptitude search flash | grep ^i
нужно писать так:
<div class="code"><code>текст, который обрамляется</code></div>
Естественно, стиль code для тега div
надо сначала создать. Для этого открываем редактор кода и добавляем между тегами <b:skin></b:skin> (следите, чтобы ваш код не попал в комментарии — они начинаются с «/*» и заканчиваются «*/») следующее:
div.code {
background: #eeeeee;
border: 1px dashed #999999;
padding: 5px;
overflow: auto;
font-family: monospace;
}
Учтите, что тег <div> автоматически вставляет после себя перевод строки (неявный: не ожидайте увидеть настоящий перевод строки в HTML-редакторе Blogger или <br />, если вы смотрите на HTML через просмотрщик исходного кода страницы). Да, и ещё одно: в предпросмотре Blogger рамочка и фон не отображаются :( Удачи!
При подготовке заметки использовались наработки других блоггеров:
- Статья «Несколько примочек для Blogger» Дмитрия Конищева
- Статья «Как запостить программный код на Blogger?» Михаила Конника
UPD: сегодня (11.12.2011) заметил, что во всех тегах pre
содержимое «вытянулось» в одну строку. Ранее в этом посте описывалось форматирование кода именно с помощью pre
, но теперь я заменил рецепт на тот, что вы видите сейчас.
Кроме того, в новой (очередной) версии редактора рамочки и фон стали отображаться, но также увеличился междустрочный интвервал. Не обращайте внимания — после публикации всё будет окей.
Comments (migrated from Blogger)
On 2009-02-07T14:04:00.000+02:00, Programmaster wrote:
Пожалуйста ;)
Спасибо за внимание к блогу.
On 2009-03-30T23:27:00.000+03:00, duke wrote:
“Учтите, что тег pre автоматически вставляет после себя перевод строки”
Важное замечание, как-то не думал об этом, буду знать :)
Your thoughts are welcome by email
(here’s why my blog doesn’t have a comments form)
On 2009-02-05T21:34:00.000+02:00, Dr.AKULAvich wrote:
Элегантно смотрится. Возьму на карандаш :-)
Спасибо