Рамочка вокруг кода и команд

Случайно заглянул на свой ЖЖ, который когда-то пытался вести. Обнаружил там довольно интересный 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 рамочка и фон не отображаются :( Удачи!

При подготовке заметки использовались наработки других блоггеров:
  1. Статья «Несколько примочек для Blogger» Дмитрия Конищева
  2. Статья «Как запостить программный код на Blogger?» Михаила Конника

UPD: сегодня (11.12.2011) заметил, что во всех тегах pre содержимое «вытянулось» в одну строку. Ранее в этом посте описывалось форматирование кода именно с помощью pre, но теперь я заменил рецепт на тот, что вы видите сейчас.

Кроме того, в новой (очередной) версии редактора рамочки и фон стали отображаться, но также увеличился междустрочный интвервал. Не обращайте внимания — после публикации всё будет окей.

Comments (migrated from Blogger)

On 2009-02-05T21:34:00.000+02:00, Dr.AKULAvich wrote:

Элегантно смотрится. Возьму на карандаш :-)
Спасибо

On 2009-02-07T14:04:00.000+02:00, Programmaster wrote:

Пожалуйста ;)
Спасибо за внимание к блогу.

On 2009-03-30T23:27:00.000+03:00, duke wrote:

“Учтите, что тег pre автоматически вставляет после себя перевод строки”
Важное замечание, как-то не думал об этом, буду знать :)

Drop me a line! (wonder where’s the comments form?)