Блогs

Главная » Блог » Как вставить HTML-код в текст страницы на MODx Evolution post thumb

Как вставить HTML-код в текст страницы на Evolution

By: Roman Kondrashov

Для блогов, связанных с программированием, часто требуется выводить код в теле поста. Для этих целей наиболее известно несколько способов:

  • тег <pre></pre>;
  • тег <code></code>;
  • Google Code Prettifier;

Для Evolution приходится в визуальном редакторе TinyMCE выводить код, потом обрамлять его тегом code, а потом уже НЕ в визуальном представлении добавлять pre. Однако этот способ заменяет угловые скобки html на мнемонические символы, что не совсем удобно.

Для WordPress есть плагины типа crayon-syntax-highlighter, которые на ура справляются с этой задачей. Но по-другому дело обстоит с MODx Evolution, и ни один из перечисленных сопособов не работает идеально для HTML. Можно использовать альтернативные варианты, если вы совсем не пользуетесь TinyMCE:

  1. <textarea>Заключаем коды в тэг textarea</textarea>
  2. <math> <![CDATA[Заключаем коды сюда]]> </math>;

Последний вариант - наиболее симпатичный и отлично работает с Prettifier. Скачиваем и подключаем эти 2 файла: http://seofocus.pro/vendor/prettify.css, http://seofocus.pro/vendor/prettify.js.

К тегу body добавляем событие по onload: <body onload="prettyPrint()">, и, чтобы была подсветка кода, обрамляем выражение с CDATA в <pre class="prettyprint"></pre>.

Пример вывода:


<meta property="og:image" content="http://seofocus.pro/assets/templates/thesite/images/ogimage.jpg" />

Из недостатков: TinyMCE сожрет часть кода, если вы вздумаете сохранить пост в этом редакторе. А ещё увидете служебный код в контенте, будучи залогиненым в админке, если пользуетесь плагином Quick Manager+. Скажете "костыли"? Да, они. Знаете способ получше или плагин - велком в комменты!