WordPress → Удобная подсветка синтаксиса

Перед нами стоит задача: сделать подсветку синтаксиса в WordPress для участков кода, и сделать процесс выделения кода максимально удобным.

Среди множества плагинов для подсветки я остановил свой выбор на Prettify GC Syntax Highlighter. Он мне показался простым и удобным, без лишнего функционала. Установка плагина стандартная — через раздел «Плагины — Добавить новый». Далее может потребоваться отключить авто-экранирование html кода.

Теперь при добавлении в пост тега  pre с классом .prettyprint— синтаксис будет автоматически подсвечиваться. Цвета при желании можно настроить в файле  prettify.css в директории с плагином.

Чтобы сделать удобным выделение участков кода (не дописывать класс prettyprint вручную), рекомендую добавить в файл  function.php следующий код:

function add_more_buttons($buttons) {
 $buttons[] = 'styleselect';
 return $buttons;
}
add_filter("mce_buttons_3", "add_more_buttons");
function mce_insert_formats( $init_array ) {
 $style_formats = array(
  array(
   'title' => '.prettyprint',
   'block' => 'pre',
   'classes' => 'prettyprint',
   'wrapper' => false,
  ),
 );
 $init_array['style_formats'] = json_encode( $style_formats );
 return $init_array;
}
add_filter( 'tiny_mce_before_init', 'mce_insert_formats' );

Функция  add_more_buttons — добавит выпадающий список с пользовательскими стилями, а mce_insert_formats добавит в него стиль .prettyprint.

Теперь когда мы в редакторе TinyMCE выделим участок кода и в выпадающем списке выберем стиль «.prettyprint», наш код автоматически будет помещен в блок pre с классом .prettyprint, а при отображении записи плагин Prettify GC Syntax Highlighter подсветит наш синтаксис автоматически.

При желании можно посоздавать стили для разных языков: javascript, c# и т.д., которые автоматически будут добавлять классы «.prettyprint .lang-js», «.prettyprint .lang-csh».

Полный перечень поддерживаемых языков: aea, agc, apollo, bsh, c, cc, cl, cpp, cs, csh, css-str, cv, cxx, cyc, default-markup, el, fs, go, hs, htm, html, java, js, json, lisp, lua, m, ml, mxml, perl, pl, pm, proto, py, rb, scala, scm, sh, sql, vhd, vhdl, wiki, xhtml, xml, xsl, yaml, yml. Для php язык указывать не нужно.

Дополнительные возможности Prettify GC Syntax Highlighter.

Можно добавить нумерацию строк, для этого достаточно поместить код между тегами pre с классами .»prettyprint и .linenums. Если вы хотите чтоб нумерация начиналась с 18 строки, добавьте следующий код:

<pre class=»prettyprint linenums:18″> // Ваш код тут </pre>

Можно добавить подсветку одной или нескольких строк:

<pre class=»prettyprint lang-YOURLANG linenums highlight:1-3,5-6″> // подсвеченный синтаксис </pre>

Стоит заметить, что эта функция недоступна, только если нумерация строк отключена.

Плагин поддерживает также shortcode. Скачать плагин можно тут: http://wordpress.org/plugins/prettify-gc-syntax-highlighter/

  • Denys

    Использую библиотеку от гугла google-code-prettyprint, все устраивает. Не могу заставить делать перенос строк чтоб не улезало на сайдбар. Как бы это сделать?