Красивая стилизация HTML блока с pre

Небольшое предисловие к материалу

Итак, повозился я немного с поиском рецепта более или менее красивого оформления HTML тега pre. Как-то типичная прямоугольная рамочка с темной обводкой да уныло-серым фоном как-то согласитесь не смотрится. А сайтик у меня так или иначе связан с тематикой программирования, потому здесь очень много исходного кода, его же надо оформлять удобным для восприятия шрифтом, стилем и т.п. Вот и решил опубликовать пример CSS-сниппета для «темизации» в качестве миниатюрной памятки.

Стилизация HTML тега PRE

Код выдернул из не помню какой-то там freeware темы оформления для Drupal 7, исходник чуток адаптировал под собственные нужды. CSS3, отображение корректное во всех условно-популярных браузерах типа Chrome, Firefox, Internet Explorer, Opera.

pre {
    background: none repeat scroll 0 0 transparent;
    border: medium none;
    display: block;
    line-height: 1.3;
    margin: 0;
    overflow: auto;
    padding: 5px 5px;
    word-wrap: normal;
}
div.geshifilter {
    background-color: #F5F5F5;
    border-color: #DDDDDD #CCCCCC #CCCCCC #DDDDDD;
    border-radius: 4px 4px 4px 4px;
    border-style: solid;
    border-width: 1px;
    font-family: Monaco,"DejaVu Sans Mono",monospace,sans-serif;
    font-size: 13px;
    padding: 13px;
}

Теперь пример разметки, разумеется в силу ряда особенностей данного ресурса это наиболее актуально для библиотеки подсветки синтаксиса различных ЯП Geshi:

<<span class="kw2">div</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"geshifilter"</span>>
<<span class="kw2">pre</span>>
<!-- Пользовательский код -->
<<span class="sy0">/</span><span class="kw2">pre</span>>
<<span class="sy0">/</span><span class="kw2">div</span>>