Статей на тему публикации кода в своих статьях в блоге на базе wordpress написано много. Однако, найти более менее разумное решение для редактирования статей и в WLW, и в консоли wordpress, используя при этом для подсветки кода библиотеку Алекса Горбачёва, смог только через два месяца. Это решение и опишу.

Публикация кода в статьях блога wordpress: мирим SyntaxHighlighter Evolved и Windows Live Writer (WLW) Для начала устанавливаем плагин SyntaxHighlighter Evolved на свой WordPress (в платформу wordpress.com он уже интегрирован). У меня на момент написания статьи установлена версия 3.1.1. Но на настройки следует обратить внимание. Я выбрал версию 3 (всё-таки, предпочитаю придерживаться последних версий), но при этом важно активировать опций “Load All Brushes” (почему – позднее будет ясно).

После этого можно будет использовать специальные shortcode для размещения кода в своих статьях – [sourcecode]. Подробнее об указанной возможности описано в support на wordpress. Однако, возникают проблемы при использовании и встроенного редактора консоли, и WLW. При любой попытке редактирования код в пределах указанного shortcode “кодируется” (все “специальные” с точки зрения html символы заменяются на html entities). Итак, попробуем решить указанную проблему.

Из соображений обеспечения “совместимости” с редактором, не поддерживающим shortcode, мы должны сохранять код уже валидным с точки зрения html. И плагин SyntaxHighlighter Evolved поддерживает такой вариант размещения кода:

<pre class="brush: xml;">
    &lt;link
        title=&quot;IT блог Бетке Сергея&quot; 
        rel=&quot;search&quot; 
        type=&quot;application/opensearchdescription+xml&quot; 
        href=&quot;/opensearch.xml&quot; 
    /&gt;
</pre>

при этом результат будет выглядеть следующим образом:

<link title="IT блог Бетке Сергея" rel="search" type="application/opensearchdescription+xml" href="/opensearch.xml" />

Публикация кода в статьях блога wordpress: мирим SyntaxHighlighter Evolved и Windows Live Writer (WLW)Но для того, чтобы подсветка код поддерживалась для тега pre, как раз и необходимо активировать опцию “Load All Brushes”. При использовании shortcode [sourcecode] обеспечивается загрузка необходимых описаний языков для скрипта Алекса Горбачёва, при прямом использовании тега pre с указанием языка в атрибуте class необходимо загрузить все описания языков, в противном случае подсветки не будет. Поэтому мы и активировали указанную опцию плагина заранее.

Теперь же осталось найти хоть сколь-нибудь удобный плагин для Windows Live Writer. Последовал следующему рецепту и установил для WLW PreCode Snippet. При вставке также следует обращать внимание на опции. В поле Surround With следует выбрать вариант PRE (оборачивать наш код будем в тег pre). Далее также следует установить опцию html encode, опцию заменять конец строки на <BR/> ни в коем случае устанавливать не следует (библиотека Алекса Горбачёва игнорирует <BR/>, что привод к совершенно нечитаемому коду), а также для Highlight Class выбрать язык вставляемого кода (синтаксис). Результат Вы уже видели выше. Прелесть в том, что даже при отсутствии плагина, и при использовании другого редактора статей Вы сможете скорректировать код, что, безусловно, удобно.

На этом суть статьи исчерпана.

Отзывы » (6)

  1. Нашёл ошибку у себя: в плагине для WLW опцию «преобразовывать конец строки в <br/>» следует отключить!!!

  2. Спасибо огромное!

    Только что затестил, работает замечательно и экономит кучу времени.
    Во-первых, я не знал про WLW (ага, я в этом вопросе — чайник) и всегда использовал движок блога для того, чтобы создавать посты. А делать пост врукопашную, если он содержит код, ой как неудобно.
    Во вторых (только что руками правил код своих скриптов в бложике. Месяц прошел, как я переехал на новый хостинг, и только сейчас я заметил, что полсе импорта блога на новом хостинге у меня «поехали» все скрипты на JScript, VBScript и HTML. Под «поехали» имею ввиду следующее: «все “специальные” с точки зрения html символы заменяются на html entities» Например, симол » (двойная ковычка) был замене на & quot и т.п. Но, как ни странно сия чаша миновала все скрипты на PoSh (в них никаких искажений не произошло). именно поэтому я и не сразу заметил эту аварию.
    Сейчас настроил WLW по вашей схеме, с использованием PreCode Snippet, запостил черновик с JScript — все великолепно работает.
    Спасибо!

  3. > Я выбрал версию 3 (всё-таки, предпочитаю придерживаться последних версий)

    А я остался на второй. В 3й версии мне не понравилось отсутствие переноса строки кода, которая не помещается на экране на следующую строку. Да и выделение/копирование исходного кода через кнопку было гораздо удобнее, IMHO.

  4. [...] Теперь скажу несколько слов о возможности использования SyntaxHighlighter’а в комбинации с “Windows Live Writer” (WLW). Оказывается, существует достаточно простой и элегантный способ их “подружить”. Для этого потребуется скачать и установить на  своем компьютере "Precode Snippet Manager" (это плагин для  WLW), выполнить настройки “Precode Snippet Manager” и “SyntaxHighlighter” так, как описано в блоге Сергея Бетке: [...]

  5. Блин, сам забываю атрибуты shortcode sourcecode. Поэтому привожу ссылку на статью в кодексе.
    P.S. Потому как в комментарии всё равно писать исходный код придётся с помощью указанного shotrcode.

Опубликовать комментарий

XHTML: Вы можете использовать следующие HTML теги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Tags Связь с комментариями статьи:
RSS комментарии
Обратная ссылка