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

Как вставить 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 ↓

вставить код blogger

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


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

вставить код blogger

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


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

9 комментариев:

  1. Можно не преобразовывать код а вставлять напрямую в следующую конструкцию:
    <pre>
    <textarea rows="6" cols=50">
    Нужный для отображения код
    </textarea>
    </pre>

    ОтветитьУдалить
    Ответы
    1. Отлично работает. Показывает в квадрате. Но у меня блоги на вордпрессе.

      Удалить
  2. Ага, поэтому я и написал. что это самый надёжный.
    Лично у меня Blogger рубит начисто некоторые теги, javascript портит, поэтому приходится страховаться.

    ОтветитьУдалить
  3. У меня когда появилась такая необходимость. я чуть голову не сломала, почему-то не получалось.

    А по этому способу действительно все вышло с первого раза, правда стили теперь немного под себя надо править, но это мелочи.

    ОтветитьУдалить
  4. Ох, как я в своё время мучался, только конвертация и спасала. ПОдозреваю, старый редактор блоггера кое-чего подмешивал от себя...

    ОтветитьУдалить
  5. А почему нельзя нужный фрагмент кода просто оформить тегом CODE?

    ОтветитьУдалить
  6. Потому что это не форум, и любой код в редактор блоггера исполняется. А если даже не исполняется, то может после сохранения неправильно отформатироваться движком. Теги pre или code нужны лишь для визуального оформления.

    ОтветитьУдалить
  7. @Игорь Мальцев

    А мне вот такая схемка помогла:
    <script type="syntaxhighlighter" class="brush:html">
    Текс
    </script>

    А до этого в конфиге было название раздела
    <NAME> и он постоянно пытался закрывающий тег еще добавить который мне в конфиге совсем не нужен.

    Плюсы такого решения по сравнению с textarea ... Применяются CSS-стили :)

    ОтветитьУдалить