Подсветка программного кода в постах (для Wordpress)
Friday, 25 Jul 08 в 1:19
Достаточно часто возникает желание вставить в посте часть кода из какого-то языка программирования. Как оказалось, сделать это в Wordpress быстро и просто не получается, приходится немного потрудиться. Что я только не пробовал дабы вставки HTML, Javascript или хотя бы PHP выводились в блоге корректно – использовал и <code>, и <pre>, но, к сожалению, результаты были не утешительные. Возможно, конечно, кое где я ошибся сам, но, тем не менее, проблема вставки и разных исходных кодов была для меня актуальной достаточно долго. Недавно я заставил себя сесть и разобраться с ней раз и навсегда. Забегая наперед, скажу, что частично это мне удалось.
Проблема размещения в блоге исходного кода не самая серьезная, но иногда дает о себе знать. Особенно это касается различных постов, где вы описываете операции, относящиеся к программированию. Без примеров в таких случаях не обойтись, а движок Wordpress, как назло, вносит в код свои «правки». Текстовый редактор неоднозначно воспринимает символы одинарной и двойной кавычек, преобразуя их текстовые аналоги:
При копировании такой «преобразованный» код работать не будет. Следовательно все посетители, которые захотят его применить, будут неприятно разочарованы.
Кстати, по старинке я вставлял код с помощью Macromedia Dreamweaver (теперь уже Adobe® Dreamweaver® CS3) , который позволял с легкостью получить из обычной записи тот же исходный код, но полностью в HTML (скобки < > заменялись на специальный символы). Увы, от проблемы с кавычками это не спасало. Поэтому пришлось искать альтернативные методы. В принципе, можно было бы сохранять исходники в текстовые файлы, после чего в статье на них ссылаться, но это, пожалуй, применимо лишь для больших объемов кода. Во всех остальных случаях – создавало бы лишние проблемы для посетителей.
Плагины wordpress для подсветки кода
Для решения проблемы я нашел 4 плагина, хотя их намного больше. Выбирал те, которые встречал у других блоггеров:
Raw HTML (скачать плагин)
Самый простой плагин. Позволяет вставлять HTML код в посты. Оборачивание текста в тэги <!–start_raw–>…<!–end_raw–> или [RАW]…[/RАW] предотвращает его преобразование. Во время вставки кода настоятельно рекомендуется выйти из визуального редактора в режим HTML. Поддерживает версию системы до 2.5.1.
CodeColorer (скачать плагин)
Это уже модуль покруче, позволяет не только корректно вставлять исходный код разных языков программирования, но при этом еще и красиво его оформляет.
CodeColorer обладает также рядом дополнительных интересных свойств, например, нумерацией строк, настройкой подсветки синтаксиса, подсветкой кода в комментариях и т.п. Модуль имеет достаточно широкий спектр настроек и большой список поддерживаемых языков. Единственное, что заставляет задуматься, это требования к версии wordpress – 2.1. Поэтому гарантии безотказной работы в более старших версиях нет. Подробнее о плагине на русском языке можете почитать в этом обзоре.
SyntaxHighlighter Plus (скачать плагин)
Плагин такой же серьезный, как предыдущий, хотя выглядит поживее – поддерживается версия wordpress 2.5.х. Если говорить о возможностях, то они идентичны CodeColorer – подсветка, нумерация строк и т.д. Возможно, имеются какие-то отличия на более глубоком уровне, но в глаза бросается лишь другое визуальное оформление:
Если присмотреться, то можно над кодом заметить дополнительные ссылки/функции view plain (просмотр кода в отдельном окне) copy to clipboard (копировать в буфер обмена) и print (печать). В блоге плагина есть небольшое описание, правда на английском. Хотя, в принципе, информации на официальном сайте wordpress вполне достаточно.
WP-Syntax (скачать плагин)
В конечном итоге остановился именно на этом плагине. Он достаточно простой, но со своей задачей справляется на все 100. Для того чтобы выделить код в посте достаточно использовать конструкцию:
<pre lang=”LANGUAGE” line=”1″> … исходный код … </pre>
Где LANGUAGE – задает язык программирования, а необязательный параметр line указывает с какого числа начинать нумерацию строк в коде. Получаем:
Вообще из всех четырех плагинов я не попробовал лишь CodeColorer, по остальным свое впечатление сложилось. Raw HTML слишком прост и не очень нагляден, SyntaxHighlighter Plus наоборот слегка «громоздкий», поэтому я выбрал золотую середину – WP-Syntax. Не исключено, конечно, что в дальнейшем установлю более продвинутый модуль, например, чтобы в комментариях код также подсвечивался. Только для начала нужно «прикрутить» в форму комментирования кнопки для форматирования или хотя бы добавить описание допустимых тэгов. В общем, работать еще есть над чем, а пока главное чтобы читатели могли видеть и использовать корректный код.
Кстати, при активном использовании Raw HTML и WP-Syntax заметил небольшую особенность. Как уже говорил выше, редактирование кода требуется производить при выключенном визуальном редакторе в режиме HTML, иначе при сохранении могут возникнуть глюки в виде исчезновения отдельных частей исходного кода. Все это оставило не очень приятный осадок после работы с плагинами, тем не менее, насколько я понимаю, от этого никак не избавиться. Поэтому будьте предельно внимательны!
Если у вас есть что добавить по теме, прошу высказываться в комментариях. Делимся опытом использования других плагинов, о которых я не упомянул.
P.S. Дмитрий Ветров предлагает обсудить вопрос должен ли блог быть авторским?
Кстати, если вы хотите раскрутить свой блог или проект, можете воспользоваться рекламными услугами в этом блоге – приобретаем спонсорство в месяц (около 15-ти публикаций) за $50 или постовые по $5 за ссылку. Также свободен баннер 125х125 под блоком контактов – всего $30.
Спасибо спонсорам:
- Лучший веб хостинг на всю жизнь
- Выгодный Выгодные цены на программное обеспечение
Loading ...
@ Пишет: 25.07.08 at 8:35 am
Подсветка программного кода в постах (для Wordpress)…
Достаточно часто возникает желание вставить в посте часть кода из какого-то языка программирования. Как оказалось, сделать это в Wordpress бы…
Плагины возможно и решат данную задачу, но я например не люблю ставить на работающий сайт больше 4-5 активных плагинов одновременно. Поэтому пользуюсь замечательной разработкой от ЖЖ пользователей проектом SYHI(Syntax Highlighter for blogs) его адрес: http://syhi.stworks.ru/
В данный момент система поддерживает синтаксис 28 языков. Примерно так:
function addDefaults() { if (!count($this->defArray)) return; foreach ($this->defArray as $i => $pair) { $ret .= $this->DCName.".addIntoCollection(’{$pair[0]}:::{$pair[1]}’);\n"; } return $ret; }Syhi-подсветка кода
Возможно единственный минус системы в том что она генерит большой объем HTML кода, но думаю это и с плагинами так.
P.S.: Но плагинчики гляну, спасибо
Ну это о том, что я говорил в качестве “старого метода”. По моему по наглядности оно не очень хорошо смотрится.
Поздравляю c PR5, нас тут целый клуб 4-5 :)
http://www.perfectomania.com/blog/2008/07/pagerank-update/
Насчёт корректных блоков pre, code написано: http://mrkto.com/php_and_wordpress_bugs/
В текущей версии WP я уже свободно переключаюсь между визульн.ред./HTML без страха за код.
Насчёт плагинов – мне не нравятся те, кот. с полосой прокрутки.
>> SyntaxHighlighter Plus
Классная штука :) А то что html много, ну и ладно, 2-20 кб погоды не сделают :)
@ Пишет: 26.07.08 at 9:53 pm
[...] Подсветка программного кода в постах (для Wordpress) Фильтр мата Плагин – подсказка по выделенному [...]
Сам пользуюсь SyntaxHighlighter Plus – считаю его лучшим, что есть вообще.
@ Пишет: 30.07.08 at 9:24 pm
[...] проблемы по его внедрению в пост и подсветкой. Tod разобрался с этим раз и навсегда. Честно говоря, я не стал проводить проверку, но [...]
Я пользуюсь CodeColorer уже как минимум год. В принципе доволен им. И (хоть я и не автор), могу гарантировать, что он без проблем работает на WP 2.5+ :)
У тебя-то я его и видел, когда делал обзор. Даже устанавливал, но что-то у меня с ним не все гладко получилось, поэтому я решил поискать еще плагинов. Возможно, просто ошибся где-то при изучении) бывает.
@ Пишет: 08.08.08 at 10:54 am
[...] Подсветка программного кода в постах (для Wordpress) Достаточно часто возникает желание вставить в посте часть кода из какого-то языка программирования.
Спасибо за обзор. Как бы сделать кнопку в TinyMCE для вставки [sourcecode language=''][/sourcecode] ??
VT, привет. Вот этого, к сожалению, не знаю.
@ Пишет: 10.09.08 at 7:39 pm
[...] Оригинал: Tod’s Blog [...]
выглядит интереснее всех имхо, именно SyntaxHighlighter Plus, неужели такой громоздкий и неудобный?
Yury_md, не то чтобы “очень”, просто мне не нужна была вся его функциональность, поэтому ограничился простым плагином.
Tod, и приходится каждый раз при вставке кода писать эту конструкцию с языком кода?
Yury_md, я вообще долго пост публикую, много чего правлю, в том числе и конструкцию для кода добавляю.
@ Пишет: 18.09.08 at 10:40 pm
[...] который бы делал это без потери синтаксиса. Прочитал заметку Александра Тодосийчука по этому поводу. Не знаю, [...]
Пользуюсь WP Syntax. Все отлично, но после того, как несколько раз сбил к чертям форматирование, решив подредактировать пост, почти всегда работаю в режиме html, а пост пишу в отдельной софтине. Только так и спасаюсь. Я конечно человек, мягко говоря далекий от программирования, но неужели разработчики WP ничего с этим поделать не могут, уже 2.7 скоро выйдет.
@ Пишет: 19.01.09 at 9:36 pm
[...] попался интересный обзор плагинов от Tod. Но в отличии от Tod`а, мне понравился SyntaxHighlighter Plus. [...]
У меня SyntaxHighlighter Plus на нескольких сайтах выдает ошибку. Поэтому пользуюсь WP Syntax.
Спасибо за инфу, взял на вооружение SyntaxHighlighter Plus
Попробовал, SyntaxHighlighter Plus и WP-Syntax. Не знаю, что я сделал не так, но выходит какая-то пакость…
Не подскажете, что конкретно надо прописать в html редакторе wordpress, чтобы он выводил листинг как на скриншоте, только подсвечивал синтаксис perl?
Вот тоже решил на блоге продемонстрировать кусок html кода, но видно без установок дополнительных плагинов это не возможно. и как назло в админке визуальный редактор не работает. Пошел ставить плагины.