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

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