Ещё один вариант оформления кода

Вариант оформления кода с помощью CSS (вручную) в целом похож на последний способ, описанный в статье "Вставка кода в статью блога (продолжение)".

1. Создала новый класс .mykod, для которого расписала CSS стиль такого вида:

.mykod {
margin:10px;
padding:15px 15px 15px 70px;
border:2px solid #2288bb;
border-radius: 10px;
background-position:10px 50%;
background-repeat:no-repeat;
position:relative;
background-color:#F0F9FF;
font-family: monospace;
font-size:90%;
color: #2288bb;
background-image:url("https://dl.dropboxusercontent.com/u/54357058/kod.png");
}

Этот стиль CSS сохранила (как всегда) через  Дизайн → Дизайнер шаблонов → Дополнительно → Добавить CSS.

2. И теперь каждый раз, когда нужно оформить код, его нужно заключить между тегами:

<div class="mykod">ВАШ КОД</div>

То есть, сначала в визуальном редакторе пишем код (как простой текст статьи), а затем (после написания всей статьи), переключаемся на HTML-редактор и участок текста, соответствующий нашему коду, обрамляем в вышеуказанные div-ы.
Идею такого оформления кода я позаимствовала в статье "Красивое выделение текста".  Однако, не стала задавать несколько классов, а ограничилась только одним. CSS тоже изменила: удалила свойства, описывающие тени; подобрала другие цвета фона, текста и рамки; изменила шрифт на моноширинный, уменьшив его относительный размер; картинку "перебросила" на свой Дропбокс; и др.

По этой теме можно прочесть также: 

• Вставка кода в статью блога    
• Вставка кода в статью блога (продолжение)  
• Текст с прокруткой   
• Оформление цитаты   
• Оформление участка текста стилем "Тетрадный лист в линейку"