четверг, 5 февраля 2009 г.

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

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

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

Копируете статью — поставьте ссылку!

3 комментария:

drakulavich комментирует...

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

Minoru комментирует...

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

Анонимный комментирует...

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

Отправить комментарий

Примечание. Отправлять комментарии могут только участники этого блога.

 
Blogger logo Debian logo Creative Commons License FeedBurner Subscribers Counter