Ноя

Подсвечиваем синтаксис с помощью Syntax Highlighter

LEXXiY

WordPress

подсветка синтаксиса

Греюсь подкидывая дровишки в твердотопливный котел из магазина viptermo.ru и пишу пост.

Подсветка синтаксиса SyntaxHighlighter

Некоторым блоггерам время от времени приходится выкладывать в постах листинги кодов всяких разных языков программирования или разметки. Очень часто это бывает проблематично из-за того, что код воспринимается движком собственно как код, а не как текст. Для этих целей умные люди написали скрипты позволяющие экранировать код от исполнения, а выводить именно то, что написано изначально. Рассмотрим данную проблему на примере плагина для wordpress под названием Syntax Highlighter. Почему именно он? Потому что он один из самых распространенных и может быть использован на многих движках, а не только на WordPress.

Плагин «подсвечивает» следующие языки разметки: Bash/shell, C#, C++, CSS, Delphi, Diff, Groovy, JavaScript, Java, Perl, PHP, Plain Text, Python, Ruby, Scala, SQL, Visual Basic, XML.

Установка Syntax Highlighter

Идем по ссылке к создателю плагина http://alexgorbatchev.com/SyntaxHighlighter/download/ или на страницу плагина на wordpress.org http://wordpress.org/extend/plugins/syntax-highlighter/ . Скачиваем плагин и устанавливаем его любым известным Вам методом. После установки плагина остается самая малость, сделать так, чтобы он работал Это оказалось не так просто как хотелось бы.

Заставляем работать плагин Syntax Highlighter

В большинстве мануалов по установке плагина подсветки синтаксиса указаны нужные строки которые требуется дописать в файл header.php в шаблоне, но указываются странно-относительные пути.

Итак имеем:

<link type="text/css" rel="stylesheet" href="/styles/shCore.css" />
<link type="text/css" rel="stylesheet" href="/styles/shThemeDefault.css" />

Эти поля всем хороши, кроме пути к плагину, меняем это на:

<link type="text/css" rel="stylesheet" href="http://ваш_сайт/wp-content/plugins/syntaxhighlighter/styles/shCore.css" />
<link type="text/css" rel="stylesheet" href="http://ваш_сайт/wp-content/plugins/syntaxhighlighter/styles/shThemeDefault.css" />

Еще блок:

<script type="text/javascript" src="/scripts/shCore.js"></script>
<script type="text/javascript" src="/scripts/shBrushCpp.js"></script>

Аналогично предудущему меняем пути на:

<script type="text/javascript" src="http://ваш_сайт/wp-content/plugins/syntaxhighlighter/scripts/shCore.js"></script>
<script type="text/javascript" src="http://ваш_сайт/wp-content/plugins/syntaxhighlighter/scripts/shBrushCpp.js"></script>

Далее вставляем функцию которая отвечает за выделение синтаксиса:

<script type="text/javascript">
SyntaxHighlighter.all();
</script>

Сохраняем header.php, обнуляем кэш если потребуется.

Кстати, оформление кода, с плагином syntaxhighlighter, для выделения осуществляется так:

<pre class="brush: php">
cout << "hello world!";
</pre>

2. Или шорткодами

[php] [/php]

[css] [/css]

и так далее.

Плагин работает отлично, результаты можете увидеть в этой статье или для примера вставлю кусок кода из исходников этой статьи

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="ru-RU">

<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>Подсвечиваем синтаксис с помощью Syntax Highlighter | LEXXiY</title>

Ну вот и все, а Вы смогли поставить плагин на свой сайт/блог без проблем? Если проблемы остались пишите в комментариях, попробуем исправить.

14 коммент. к записи “Подсвечиваем синтаксис с помощью Syntax Highlighter”

Ольга 13.12.2010 - 01:40
Интересная работа, много новенького узнала…

[Ответить]
LEXXiY Reply:
Декабрь 13th, 2010 at 08:43
@Ольга, надеюсь руководство Вам пригодилось

[Ответить]
Ольга Reply:
Декабрь 13th, 2010 at 11:59
@LEXXiY,Пригодилось. Я эту работу взяла в закладки..

[Ответить]
LEXXiY Reply:
Декабрь 13th, 2010 at 23:32
@Ольга, Будут проблемы обращайтесь, люблю допиливать то что не допиливается

[Ответить]
Ольга Reply:
Декабрь 13th, 2010 at 23:40
@LEXXiY, Ок. Не потеряемся, я у Вас подписалась еще на рассылку…

[Ответить]
Ольга 30.01.2011 - 01:47
Спасибо за статью, правда она не совсем подробная. Но мне удалось найти к ней дополнение, которое тоже было не совсем полным )))))

В итоге из двух статей я смастерила один приемлемый для меня вариант ))))

Все заработало

[Ответить]
LEXXiY Reply:
Январь 31st, 2011 at 01:20
Очень рад, что статья пригодилась Вам
А что в ней не хватает по Вашему мнению?

[Ответить]
apisklov 04.02.2011 - 10:49
у меня вроде работает на не до конца считает строчки. строчек -13 а он 9 насчитал

[Ответить]
LEXXiY Reply:
Февраль 4th, 2011 at 11:24
Ну скорее всего Вы считаете с переносом строк, которые насколько мне известно включены по умолчанию в большинстве редакторов. А плагин выводит строки с полосой прокрутки, без переносов, ну а если и срабатывает перенос то только у оочень длинных строк кода.
В редакторе попробуйте в меню Вид (View) отключите переносить по словам.

[Ответить]
KaronatoR 25.08.2011 - 23:34
Что-то у вас не подсвечивается код в конце статьи.
Вот и у нас на сайте сломался. Не знаете как пофиксить?

[Ответить]
LEXXiY Reply:
Август 25th, 2011 at 23:57
Здравствуйте
Плагин обновлялся недавно, обновите его и замените пути в шапке сайта, там добавились папки syntaxhighlighter2 и syntaxhighlighter3. По крайней мере в плагинах вордпреса.
Если у Вас не плагином, обновите версию и проверьте все пути к .js файлам.

[Ответить]
KaronatoR Reply:
Август 26th, 2011 at 01:50
@LEXXiY, Здравствйте, починил. Смотрб и вы в процессе =)

[Ответить]
LEXXiY Reply:
Август 29th, 2011 at 22:44
Отлично
Да я тоже потихоньку допиливаю

[Ответить]
mr. divan 01.01.2012 - 16:02
Искал подробную инструкцию и вот — нашёл. Спасибо.

[Ответить]