Вы пишете о создании и продвижении блогов?

На определенном этапе развития своего проекта вы обязательно захотите поделиться с читателями какими-то полезными сведениями, например, html кодом или скриптом (пусть даже и чужим).

Кстати, делиться с читателями своим положительным или даже отрицательным опытом – это основа успешного ведения блога (и хорошие темы для статей). 

Проблемы-то возникают у многих, поэтому подобная информация востребована.

Итак, вы хотите дать читателям скопировать скрипт или html код, размещаете его в тело поста. Не тут-то было.

Совсем недавно для корректного вывода тегов на странице предлагалось вручную заменять знаки < и > на спецсимволы &lt; и &gt;. Сегодня движок WordPress чаще всего умеет сам делать такие преобразования, но также добавляет много мусора, перековеркивает, обрезает код, делает его нечитаемым или некопируемым (было в моей теме).

На самом деле способов красиво оформить html код, вставить его в пост с подсветкой синтаксиса несколько: без плагина и с применением wordpress плагинов для кода.

Перечислю способы, а вы пробуйте, что подойдет именно вам. Я убедилась на своем опыте, что не в каждом шаблоне теги и плагины работают одинаково. Подробнее о правильном выведении кода смотрите в учебнике HTML.

Показать html код на странице как текст. Тег <pre>

Показать html код на странице как текст, подсветить его помогают теги <pre>.

В ВИЗУАЛЬНОМ РЕДАКТОРЕ пропишите код.

Перейдите в HTML РЕЖИМ и добавьте открывающий и закрывающий тег <pre>. В моей теме уже автоматически знаки <  > преобразовались в спецсимволы &lt; и &gt;.

СОХРАНИТЕ. В визуальный режим больше НЕ переключайтесь, иначе изменения пропадут.

При отображении СОХРАНЯЮТСЯ все пробелы. В моем шаблоне получился следующий результат (у вас отображение может быть другим). 

Как вывести html код на странице поста как текст. Тег <code>

Тег <code> также позволяет вывести одну или несколько строк программного кода. Пробелы и переносы НЕ УЧИТЫВАЮТСЯ, поэтому для создания переносов используйте <p> или <br>.

Делайте все аналогично вставке тега <pre>. 

Отобразить html код на странице как текст. Тег<xmp>

Если вы предлагаете читателям коды нечасто, можете использовать такую конструкцию.

<div style="overflow: auto; height: 80px; width: 450px; padding: 8px; border: 1px solid #ccc;">
<xmp>
ВСТАВИТЬ СЮДА ВАШ КОД
</xmp>
</div>

Она помогает отобразить коды или скрипты в виде текста, заключенного в рамочку, С УЧЕТОМ форматирования и всех переносов.

Отображение кода получится в симпатичной рамочке. Ее ширину редактируйте, изменяя параметр width, высоту - height.

Но дело в том, что КОДЫ с использованием тега <xmp> считаются НЕВАЛИДНЫМИ. Поэтому в учебнике HTML предлагают использовать этот тег только в таком виде.

Плагины для выведения кода на страницу поста

Большинство блогеров для красивого и неизменного отображения html кодов на странице поста применяют плагины для WordPress. Опять таки, плагинов множество, но у меня корректно заработал лишь один.

Привожу список, а вы подбираете плагин, работающий с вашим шаблоном.

1. сладкая парочка - WP-Syntax – выделяет код рамочкой, дает возможность подсветить синтаксис. Плюс wp-syntax button – выводит кнопку в админпанель блога, предоставляет возможность вставить html код или скрипт в специальное окно. Недостаток – все действия производятся в html режиме, переключаться в визуальный режим нельзя, иначе все изменения исчезнут.

2. Syntax Highlighter Compress- в админпанель выводится дополнительная кнопка. Нажимаете ее, открывается окно, куда можно ввести код и выбрать язык программирования. Так же работают и другие плагины.

3. Better WordPress Syntax

4. wp-highlight.js

5. SyntaxHighlighter

6. Auto SyntaxHighlighter (его использую я). И многие другие плагины.

Мне пришлось устанавливать и активировать все по-очереди, пока не нашла тот, который работает в моем шаблоне.

Итак, из статьи вы узнали, как можно вывести html код на странице поста, используя теги или плагины. А какой способ используете вы, чтобы внести тэги html в обычный текст?

Метки:

Разные технические моменты

ПОХОЖИЕ СТАТЬИ:

ДРУЗЬЯ, СПАСИБО, ЧТО ПОДЕЛИЛИСЬ СТАТЬЕЙ:

9 отзывов к “Вывести html код на странице, показать, отобразить как текст

  • Анна:

    Долго искала в интернете эту тему. Очень сложно найти. Ваша статья реально помогла. Спасибо

    • Ольга:

      Я тоже очень долго искала. Подумала, что у других блогеров такая же проблема. И написала статью.

  • Гульнара:

    Спасибо автору за интересные и полезные статьи! Оказывается, делала перелинковку у себя на сайте не совсем правильно. Буду исправлять и обращаться к вам. У вас, коллеги, мне еще учиться и учиться 🙂

  • artem:

    WP-Syntax и wp-syntax button много лет не обновляются и сегодня они в конфликте с новой версией вордпресс. по крайне мере у меня они напрочь отказались работать под каким бы то ни было соусом.

    • Ольга:

      С моей темой они тоже не работают. Я много плагинов перепробовала, остановилась на Auto SyntaxHighlighter.

  • Сергей:

    Здравствуйте.
    Установил плагин Auto SyntaxHighlighter, но как сделать вертикальный и горизонтальный скролинг не знаю. Помогите, пожалуйста.

    • Ольга:

      Плагин не требует никаких добавочных настроек. В панели Записей появляется карандашик, нажимаете его и выбираете язык, в окошко вставляете код. Я обычно выбираю php. У меня появляется горизонтальная прокрутка.

  • Сайт:

    У меня на сайте после редактирования статей часть кода пропадает.

    • Ольга:

      У Вас Вордпресс, Вы выводите код без плагина? Это особенности работы движка. Пользуйтесь плагином.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

 для диалога необходимо принять правила кофиденциальности *