TiamatInc.ru

Здравствуйте, друзья. Сегодня я хочу рассмотреть один момент в публикации постов на WordPress, который может изрядно подпортить нервы кому угодно, а именно, публикацию примеров HTML-кодов в записях блога. При написании поста о размещении рекламных блоков в phpBB я успел на своей шкуре прочувствовать всю прелесть данной процедуры.

Все дело в том, что встроенный в WP визуальный редактор TinyMCE имеет свой собственный взгляд на то, какие коды оставлять в тексте поста и безжалостно вырезает все лишнее с его точки зрения из текста при переключении между отображением в виде HTML и визуальным редактором. С одной стороны, обойти это можно заменяя знаки ‘<’ и ‘>’ в примерах кода на их мнемоники ‘&lt;’ и ‘&gt;’ и поместив пример кода внутрь блока <code></code>, но, к сожалению, если вы захотите оформить все красиво, например, выделить теги и комментарии другим цветом, то придется изрядно попотеть задавая стили вручную.

Мне же хотелось найти способ выводить примеры кода в симпатичном оформлении и чтобы при этом можно было спокойно переключаться между визуальным редактором и HTML представлением поста, не боясь, что TinyMCE бессовестно порежет все, что ему не по нраву. Потратив несколько часов, я нашел относительно неплохое решение, которое уменьшает танцы с бубном до минимума, рассмотрим его по пунктам:

Предварительная подготовка

1. Устанавливаем плагин WP-Syntax, который позволяет выводить участки кода используя подсветку синтаксиса с помощью GeSHi. Поддерживается огромное количество языков (о некоторых из них я вообще впервые узнал, а ведь программист как никак). Для использования плагина достаточно в HTML-редакторе заключить участок кода в блок <pre lang=”ID языка”></pre>, где параметр lang определяет язык кода.
2. Устанавливаем плагин WP-Syntax Button, который реализует две вещи – добавляет на панель TinyMCE кнопку для упрощенной вставки блока <pre></pre> с выбором языка из выпадающего списка и реализует автоматическое преобразование мнемоник HTML в их символьное представление при переключении редакторов и публикации поста.

К сожалению для второго плагина заявлена совместимость с WordPress только до версии 2.8, но у меня он без проблем заработал и на 2.9.x. С версией 3.x, увы, проверить не удалось, буду премного благодарен если вы протестируете и отпишитесь в комментариях.

Вставка фрагмента кода с рюшечками

1. В режиме визуального редактора жмем кнопку , выбираем подходящий язык из шикарного списка и номер строки с которого начать нумерацию (чтобы опустить номера строк, оставьте поле пустым) и жмем Insert.
2. Теперь переходим в HTML редактор и вставляем наш код внутрь блока <pre></pre>.
3. Если пример вашего кода включает в себя HTML-теги, то не выходя из HTML-редактора, заменяем в них символ ‘<’ на его мнемонику ‘&lt;’ (о парных символах ‘>’ можно не беспокоиться, после переключения в режим визуального редактора они заменятся автоматом).
4. Вот и все, ради эксперимента, можно смело попереключаться между редакторами и посмотреть как будет выглядеть код при публикации.

З.Ы. Один маленький нюанс напоследок, при использовании предложенного мной метода вы можете столкнуться с проблемой вывода в примерах HTML-кода HTML-мнемоник, ведь они будут автоматом преобразовываться в их символьный вид. Решается эта проблема элементарно, просто замените символ ‘&’ в мнемонике на его мнемонику ‘&amp;’. Во загнул, но ведь работает

Связанные записи

• Как связать блог в LiveJournal с аккаунтами в Twitter и Facebook? (8)
• Как добавить блог в LiveJournal в панели вебмастеров Яндекса и Google? (24)
• Указание связей между частями многостраничных документов. Новые значения атрибута rel от Google (6)
• Семинар SEO в ваших руках от Rookee (5)
• Самые популярные посты моего блога в 2011 году (0)