Ars Longa, Vita Brevis » WP CodeBox

Обновление для CodeColorer 0.6.0

Vladimir — Sat, 05 Jul 2008 21:47:25 +0000

Исправляем ошибки в CodeColorer 0.6.0

Стараниями Дмитрия Лялина я узнал про еще один плагин WordPress для подсветки синтаксиса — CodeColorer. Как и многие другие плагины (напрмер, WP CodeBox Эрика Вонга или мой CodeBox), CodeColorer использует в качестве движка библиотеку GeSHi.

Несмотря на то, что в readme.txt CodeColorer'а утверждается, что генерирует он валидную XHTML-разметку, на самом деле это не так. Например, для блока

[cc lang="html" line_numbers="1"]
<style type="text/css">
/* [CDATA[ */
.style {margin: 0; padding: 0}
/* ]]> */
</style>
[cc]

была сгенерирована такая разметка (для удобства восприятия я её немного переформатировал):

<ol>
<li class="li1">
<div class="de1">
<span class="sc2">
<span class="kw2"><style</span> <span class="kw3">type</span>=<span class="st0">"text/css"</span><span class="kw2">></span>
</span>
</div>
</li>
<li class="li1">
<div class="de1">/* <span class="sc2">
<span class="kw2"><</span>!<span class="br0">[</span>CDATA<span class="br0">[</span> */
</span></div>
</li>
<li class="li1">
<div class="de1">.<span class="kw3">style</span>
<span class="br0">{</span>margin: <span class="nu0">0</span>; padding: <span class="nu0">0</span><span class="br0">}
</span></div>
</li>
<li class="li1">
<div class="de1">/* <span class="br0">]</span><span class="br0">]</span><span class="kw2">></span> */</div>
</li>
<li class="li1">
<div class="de1">
<span class="sc2">
<span class="kw2"></style></span>
</span>
</div>
</li>
</ol>

В представленном дереве отчётливо видны вложенные элементы span, что, с точки зрения спецификации (X)HTML, недопустимо.

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

В дальнейшем планирую добавить поддержку синтаксиса CodeColorer в CodeBox и забыть про CodeColorer

Но пока руки до этого не дошли, можно скачать обновление CodeColorer. Кодовая версия обновления — 0.6.0.1. Надеюсь, что автор не против

При использовании материалов блога наличие активной не закрытой от индексирования ссылки на источник обязательно.

CodeBox 0.5 для WordPress

Vladimir — Sun, 22 Jun 2008 20:59:43 +0000

Плагин для подсветки синтаксиса на основе GeSHi.

В статье «CodeBox: подсветка синтаксиса для WordPress» я говорил, что вместо того, чтобы постоянно исправлять старые и новые баги в плагине WP CodeBox, я сделал форк, который будет жить своей жизнью, но при этом будет совместимым с WP CodeBox, чего бы Eric Wang там ни творил.

Обещания, как говорится, нужно держать Сегодня у меня выдались пять часов свободного времени, и я занялся доработкой/исправлением плагина. Фактически, из исходного кода остались только имена параметров, всё остальное было переписано в «родном, мудром, обьектно-ориентированном» стиле.

В результате получился CodeBox 0.5 (функционально соответствующий WP CodeBox 1.2.2.1). К версии 1.0 планирую довести до ума поддержку TinyMCE (в своё время несовместимость WP CodeBox с TinyMCE привела к тому, что я не использую WYSIWYG), поменять кое-что в JavaScript, добавить новые опции и т.п. Поддержка интернационализации уже есть, осталось заняться переводом Как говорится, планов очень много, где бы время взять?

Скачать CodeBox 0.5 для WordPress.

PS — по сравнению с предыдущей версией, плагин «похудел» практически на 200 килобайт. Работа идёт!

CodeBox: подсветка синтаксиса для WordPress

Vladimir — Sun, 01 Jun 2008 18:43:41 +0000

Усоврешенствованный клон WP-CodeBox

Наверное, многие знают о плагине WP-CodeBox, написанном Eric Wang. Данный плагин provides clean syntax highlighting and AJAX advanced features for embedding source code within pages or posts, то есть всё то, что нужно блоггеру, который часто постит код. Для подсветки синтаксиса используется GeSHi.

Я пользуюсь плагином около трёх месяцев и при этом не смотрю на него сквозь розовые очки: неоднократно я уже писал патчи, исправляющие ту или иную ошибку в коде:

Патч для WP CodeBox для Valid XHTML;
WP CodeBox и Prototype;
WP CodeBox 1.1 и Valid XHTML.

Но не успел я поправить версию 1.2.2, как вышла версия 1.2.2.1, использующая более новую версию GeSHi (что я, кстати, поправлял в своём блоге еще в 1.2.1).

Устав исправлять старые и новые ошибки, я решил переработать код плагина. В результате изменений:

генерируемый HTML-код стал более осмысленным и компактным;
генерируемый HTML-код не содержит таблиц, ибо табличных данных нет;
HTML-код использует классы, нежели инлайновые стили: во-первых, это делает исходник более читабельным, а во-вторых, для больших блоков кода очевидно значительное уменьшение размера страницы;
PHP-код не изобретает велосипед: функциональность, поддерживаемая GeSHi, в коде плагина не дублируется (смысл ее дублировать?);
проведён рефакторинг PHP-кода: ereg() заменен stripos() (а затем вообще удалён), исправлена ошибка в регулярном выражении, из-за чего загрузка файлов могла не работать, исправлены потенциальные XSS-дыры, вместо htmlspecialchars() используется wp_specialchars()
JavaScript не конфликтует с Prototype/LightBox/ProtoBox;
генерируемый XHTML-код большей частью валиден (на данный момент я еще не весь код просмотрел);
в GeSHi добавлена поддержка еще нескольких языков и внесены коррекции в существующие модули;
явно было что-то еще, но я уже не помню

В общем, я принял героическое решение, что я сам буду поддерживать полученный код и развивать его (фактически, я создал новый форк от WP-CodeBox). С названием я не определился, пока будет называться просто CodeBox, а там посмотрим. Обратную совместимость я постараюсь сохранить.

Если кто-то будет данный пост читать , пишите отзывы и пожелания!

Скачать CodeBox.

WP CodeBox 1.1 и Valid XHTML

Vladimir — Tue, 18 Mar 2008 07:06:48 +0000

Рецепт, как заставить WP CodeBox 1.1 генерировать валидный XHTML-код

Ранее я рассматривал проблему генерации невалидирующегося кода плагином WP CodeBox. Недавно вышла новая версия плагина, но проблемы остались. И добавились новые.

Скачать патч в формате unified diff.

WP CodeBox и Prototype

Vladimir — Sat, 15 Mar 2008 16:11:10 +0000

Решение, позволяющее совместно использовать на одном сайте плагин WP Codebox и известную библиотеку Prototype

Намедни пришлось заставлять работать скрипт, использующий библиотеку Prototype, на сайте с WordPress, где стоял плагин WP CodeBox (ранее я уже писал о нём). Сразу обратил внимание, что всё работало как-то криво, выскакивала куча непонятных ошибок. Лишь позже, просмотрев весь JavaScript, я понял, в чём была проблема.

В файле /wp-content/plugins/wp-codebox/js/codebox.js есть три магические строчки:

function $(id) {
return document.getElementById(id);
}

Эта функция конфликтует с одноимённой функцией из Prototype (причём последняя имеет гораздо больше возможностей). Решается всё просто:

if ('undefined' == typeof $) {
function $(id) {
return document.getElementById(id);
}
}

Жаль только, что на поиски бага ушло много времени…

Патч для WP CodeBox для Valid XHTML

Vladimir — Tue, 11 Mar 2008 06:52:49 +0000

Как научить WP CodeBox генерировать правильную разметку

Иногда встречаются люди, повёрнутые на валидности (X)HTML/CSS. Что уж греха таить, я и сам такой временами
Для подсветки синтаксиса я пользуюсь плагином WP-CodeBox. Хорошая вещь, но у него есть один маленький недостаток: разметка, которую он генерирует (и CSS, который он использует, но это другая история), не валидируется.

Проблема в том, что в генерируемом коде

<div class="right">
<a href="###" class="smalltxt" onclick="copycode($('9code2'));">[Copy to clipboard]</a>
<a class="smalltxt" href="###" onclick="toggle_collapse('92');">[<span id="92_symbol">-</span>]</a>
</div>
<div class="left">
<span id="l9code2"><a href="#" onclick="javascript:showCodeTxt('9code2'); return false;">View Code</a>MYSQL</span>
</div>

идентификаторы элементов начинаются с цифры (, , ), что строго запрещено спецификацией XHTML.

Когда мне в очередной раз надоело смотреть на то, что HTML Validator (кстати, хороший extension) в FireFox показывает красный крест, я решил исправить это безобразие, благо, что лечится довольно легко и быстро.

Скачать патч в формате unified diff.