вторник, 20 января 2009 г.

Подсветка программного кода в WordPress

Создал программист, значится, себе пещеру. И дал ей название "Пещера программиста". А что же это за пещера программиста, если встроенные возможности настенной живописи не дают подсвечивать программный код? Верно - это неправильная пещера. Крикнул тогда программист грустно в гугль - "как мне подсветить свой код на стене ?". И вернулась ему туева куча ссылок. Долго рыскал он по ссылкам этим и вот что накопал.....

Вначале  попался интересный обзор плагинов  от Tod. Но в отличии от Tod`а, мне понравился SyntaxHighlighter Plus. Подкупил он меня своим визуальным оформлением, ну и плюс такими "рюшечками", как просмотр кода в отдельном окне , копирование текста, печать кода.  Первые тесты показали - плагин то что надо.  Но протестировав дальше попалась неприятная особенность - при редактировании в визуальном редакторе, когда вставляешь внутри секции кода символ  '<' , а потом переключаешься в режим HTML и обратно в визуальный редактор, символ заменяется на его HTML код.  А это очень неудобно , ведь надо постоянно проверять - не испортил ли что при последнем редактировании.
Кстати, пользовался тогда (и сейчас) TinyMCE Advanced. Насколько я знаю, в нем нет возможности отключить форматирование кода, заключенного в определенный блок. Использовал когда то такую возможность в Drupal в FCKeditor. Но, как назло, версии FCKeditor под последний WordPress 2.7 не было.
В итоге  SyntaxHighlighter Plus меня разочаровал.
Поскольку обзор от Tod по меркам IT был старым, то я решил присмотреться к другим, рассмотренным им плагинам. Но мнение о них осталось прежним, к тому же часть из них не поддерживает WP 2.7. Но чуть позже ( в конце декабря) я изменил свое мнение о CodeColorer в связи с выходом новой версии (об этом ниже).

Следующим шагом был поиск на странице плагинов официального сайта WordPress. Вот тут то и открылось все тайное -) . Мое внимание привлекли 3 плагина. Отмечу вначале, что все они построены на GeSHi, так что выбор языков для подсветки у них одинаков.

WP-CODEBOX ( страница плагина)

WP-CODEBOX sample

Посмотришь и не нарадуешься, тут тебе и нормальное ( по моему мнению) визуальное оформление, и нумерация строк (начиная с нужной вам цифры), и раскрывающийся блок ( ну просто сказка). Возможность скачать код сразу в файле тоже нужная вещь. Казалось вот он идеал ( пока еще не рассмотрел остальные ), но он не поддерживает WP 2.7 .  Остается только ждать новой версии...

CodeColorer ( страница плагина)

2Зайдя на страницу плагина чуть не захлебнулся слюной - наворотов то O_O . Хотелка умерла, осознав что большего хотеть нельзя. Тут тебе и стандартная для многих плагинов нумерация строк, и невиданная для других подсветка кода в комментариях. Регулировка размера табуляции, различные темы оформления блока кода. А уж регулировка ширины блока кода, и количество строк без скролбара это просто супер. Да и к тому же плагин совместим с WP 2.7 .
Правда и тут я нашел несколько минусов для себя. Это проблема использования визуального редактора - в FAQ сказано , что не надо им пользоваться. Другая проблема возможно специфична для моей темы оформления - в блоке кода при передаче на него фокуса  рисовалась тень, которая портила весь вид и цвета. Но опять же в админке в настройках плагина все отображается нормально, как и на сайте разработчика.

WP-SynHighlight ( страница плагина)

3Последним на моем пути оказался WP-SynHighlight. Плагин сразу подкупил своей простотой и размером. Выводимая "картинка"  радовала глаз. Из особенностей хочу отметить выбор контейнера, в котором код будет показан, изменение регистра букв. А самое главное - код можно писать в визуальном редакторе. Точнее код как раз нужно писать в визуальном редакторе. При переходе в HTML спец символы  отображаются как соответствующие им коды, но при переходе обратно в визуальный редактор - все отлично.   Расстроило, что в комментариях код не подсвечивается. Но автор плагина, при общении, сказал что сделает это в скором времени.

И остановил он свой взгляд на WP-SynHighlight. Взгляд его радовал этот вид. И понял он - это то что надо. И засверкала стена пещеры его разными цветными словами.

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

  1. У себя в блоге использую WP-Syntax. Имхо: лучший.

    ОтветитьУдалить
  2. DRiVER
    он очень "простой". настроек практически нету. А глюки при редактировании убивают желание что то писать ))

    ОтветитьУдалить
  3. тоже отказался от wp-syntax, он превращал "" в html... как их там.. вспомнил, html сущности

    ОтветитьУдалить
  4. Я раньше, когда была необходимость, тоже использовал WP-Syntax. Сейчас такая необходимость отпала, но о нем остались приятные воспоминания :)

    ОтветитьУдалить
  5. Здравствуйте. помогите решить проблемку: в HTML редакторк ввоже неоходимый для вывода код (php). Сохраняю. На предпросмотре все замечательно. Перехожу из HTML в визуальный и обратно. Половина кода пропала... :-( На предпросмотре пустое окно кода. Повторяю переход из одного редактора в другой - код пропал совсем.
    Убедительная просьба - подскажите где собака зарыта и как это дело можно обойти (спрятать код от визуального, какая нибудь примочка или другой плагин) Пробовал на WP-codebox и и еще один. Одинаково. WP 8.5
    Спасибо.

    ОтветитьУдалить
  6. Приветствую.
    Так надо сразу в визуальном редакторе вводить, только заключить код в тэги, специфичные для установленного плагина. И должно быть нормально. ну и сейчас посоветую два плагина CodeColorer, на нем нет такой проблемы точно, и WP-SynHighlight - им давно не пользовался
    суть - не забыть поставить тэги плагнина

    ОтветитьУдалить
  7. Спасибо.
    WP-codebox - при вводе кода в визульном - выводит вместе с и по . Никакой таблицы и подсветки кода. А когда вводил в html - рисовалась.
    Буду пробовать CodeColorer. Если будут проблемы, обращусь.

    ОтветитьУдалить
  8. 2Валерий:
    Попробуйте мой WP_SynHighlight. Там не должно быть подобных проблем вообще.

    http://wordpress.org/extend/plugins/wp-synhighlight/

    ОтветитьУдалить
  9. Приветствую всех.
    А у меня проблема следующего характера Codecolorer не работает в написанном мною простом шаблоне для wordpress. Может какие то требования нужны специфические в шаблоне ???
    Подскажите , коли знаете.

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