Публикация кода в статьях блога wordpress: мирим SyntaxHighlighter Evolved и Windows Live Writer (WLW)
Статей на тему публикации кода в своих статьях в блоге на базе wordpress написано много. Однако, найти более менее разумное решение для редактирования статей и в WLW, и в консоли wordpress, используя при этом для подсветки кода библиотеку Алекса Горбачёва, смог только через два месяца. Это решение и опишу.
Для начала устанавливаем плагин 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;">
<link
title="IT блог Бетке Сергея"
rel="search"
type="application/opensearchdescription+xml"
href="/opensearch.xml"
/>
</pre>
при этом результат будет выглядеть следующим образом:
<link title="IT блог Бетке Сергея" rel="search" type="application/opensearchdescription+xml" href="/opensearch.xml" />
Но для того, чтобы подсветка код поддерживалась для тега pre, как раз и необходимо активировать опцию “Load All Brushes”. При использовании shortcode [sourcecode] обеспечивается загрузка необходимых описаний языков для скрипта Алекса Горбачёва, при прямом использовании тега pre с указанием языка в атрибуте class необходимо загрузить все описания языков, в противном случае подсветки не будет. Поэтому мы и активировали указанную опцию плагина заранее.
Теперь же осталось найти хоть сколь-нибудь удобный плагин для Windows Live Writer. Последовал следующему рецепту и установил для WLW PreCode Snippet. При вставке также следует обращать внимание на опции. В поле Surround With следует выбрать вариант PRE (оборачивать наш код будем в тег pre). Далее также следует установить опцию html encode, опцию заменять конец строки на <BR/> ни в коем случае устанавливать не следует (библиотека Алекса Горбачёва игнорирует <BR/>, что привод к совершенно нечитаемому коду), а также для Highlight Class выбрать язык вставляемого кода (синтаксис). Результат Вы уже видели выше. Прелесть в том, что даже при отсутствии плагина, и при использовании другого редактора статей Вы сможете скорректировать код, что, безусловно, удобно.
На этом суть статьи исчерпана.
Отзывы » (7)
Связь с комментариями статьи:RSS комментарии
Обратная ссылка
Станицы 
Рубрики 
Облако ключевых слов 
RSS анонсов статей 
Windows 7 
Городские огни 
Characters 
Landscape 
Nature 
Shapes ![[-]](http://sergey-s-betke.blogs.csm.nov.ru/wp-content/themes/inanis-seven/images/st_link.png)
Нашёл ошибку у себя: в плагине для WLW опцию «преобразовывать конец строки в <br/>» следует отключить!!!
Спасибо огромное!
Только что затестил, работает замечательно и экономит кучу времени.
Во-первых, я не знал про WLW (ага, я в этом вопросе — чайник) и всегда использовал движок блога для того, чтобы создавать посты. А делать пост врукопашную, если он содержит код, ой как неудобно.
Во вторых (только что руками правил код своих скриптов в бложике. Месяц прошел, как я переехал на новый хостинг, и только сейчас я заметил, что полсе импорта блога на новом хостинге у меня «поехали» все скрипты на JScript, VBScript и HTML. Под «поехали» имею ввиду следующее: «все “специальные” с точки зрения html символы заменяются на html entities» Например, симол » (двойная ковычка) был замене на & quot и т.п. Но, как ни странно сия чаша миновала все скрипты на PoSh (в них никаких искажений не произошло). именно поэтому я и не сразу заметил эту аварию.
Сейчас настроил WLW по вашей схеме, с использованием PreCode Snippet, запостил черновик с JScript — все великолепно работает.
Спасибо!
> Я выбрал версию 3 (всё-таки, предпочитаю придерживаться последних версий)
А я остался на второй. В 3й версии мне не понравилось отсутствие переноса строки кода, которая не помещается на экране на следующую строку. Да и выделение/копирование исходного кода через кнопку было гораздо удобнее, IMHO.
Согласен с Вами, тоже подумываю о возврате на вторую версию SyntaxHighlighter. Из-за проблем с копированием кода.
Я WLW используя с самого начала. Писать код в движке — крайне неудобно (тормозит IE, да и не раз терял проделанную работу из-за глюков браузера / канала).
[...] Теперь скажу несколько слов о возможности использования SyntaxHighlighter’а в комбинации с “Windows Live Writer” (WLW). Оказывается, существует достаточно простой и элегантный способ их “подружить”. Для этого потребуется скачать и установить на своем компьютере "Precode Snippet Manager" (это плагин для WLW), выполнить настройки “Precode Snippet Manager” и “SyntaxHighlighter” так, как описано в блоге Сергея Бетке: [...]
Блин, сам забываю атрибуты shortcode
sourcecode. Поэтому привожу ссылку на статью в кодексе.P.S. Потому как в комментарии всё равно писать исходный код придётся с помощью указанного shotrcode.
Понятно, что вы ищете удобный способ вставки кода с подсветкой синтаксиса в свои статьи. Использование плагина PreCode Snippet для Windows Live Writer и настройка его опций, включая выбор языка и отключение замены концов строк на
<BR/>, выглядит как разумное решение. Это позволит вам легко вставлять код с подсветкой даже при использовании других редакторов.