Как вставить html код в статью

Меня засыпали письмами с примерно одинаковым содержанием: "как вставить код в статью, чтобы его было видно?".
Существует немало плагинов для подсветки/выделения кода внутри тела статьи, и самый известный из них, пожалуй, это SyntaxHighlighter (используется в этом блоге), а в одной из прошлых статей я описал ещё один под названием SHJS. Но чтобы их установить, нужно немного пораскинуть мозгами и посидеть за компом часов до 2-ух ночи.

Однако это оправдано, только если вы собрались вести блог о программировании или веб-разработке, и без нумерации строк в отображении кода не проживёте.
Поэтому если это не ваш случай, читайте дальше. Этот рецепт подходит не только для html, но для CSS и javascript.

Самй простой способ оформить код, это привязать стили к тегу <pre></pre>, а отображаемый код вставить внутрь этого тега.

И теперь пошагово.

1) Открываем шаблон блога, делаем копию на всякий пожарный, находим тег ]]></b:skin> и вставляем строго до этого тега следующие стили:

pre
{
background:#efefef;
border:1px solid #A6B0BF;
font-size:120%;
line-height:100%;
overflow:auto;
padding:10px;
color:#000000 }
pre:hover {
border:1px solid #efefef;
}
code {
font-size:120%;
text-align:left;
margin:0;padding:0;
color: #000000;}
.clear { clear:both;
overflow:hidden;
}

Сохраняемся. Мы получили правильно оформленный тег pre.

2) Чтобы вставить код прямо внутрь статьи, и чтобы он только отображался, но не исполнялся браузером, нужно:
На примере формы поиска для Blogger ↓

Скопировать код и на любом сервисе-конвертере, к примеру, на htmlconvert.net перевести, т.е. заменить символы на, говоря простым языком, абракадабру ↓

Эту абракадабру вставляем внутрь тега pre (см. скриншот) и обязательно в режиме написания поста "Изменить HTML" ↓

После чего, нажав на кнопку (внизу редактора поста) "Просмотр" и перейдя на предпросмотр публикуемого сообщения, вы увидете, что код обработался и теперь выглядит вот так, находясь в скроллированной области (демо):

Можно опустить шаг с конвертером и вставлять код прямо в графическом отображении редактора сообщения. Но это не всегда приводит к положительному результату, поэтому лучше не лениться и грамотно воспользоваться конвертацией. По крайней мере для Blogger - это самый надёжный способ передать код в статью в работоспособном состоянии. А для javascript разумнее воспользоваться SyntaxHighlighter из-за специфики встроенного редактора блога.