Ноя
20

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

Греюсь подкидывая дровишки в твердотопливный котел из магазина 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, для выделения осуществляется так:

1.

<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>

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



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

  • Ольга 13.12.2010 - 01:40

    Интересная работа, много новенького узнала…

  • LEXXiY 13.12.2010 - 08:43

    @Ольга, надеюсь руководство Вам пригодилось 🙂

  • Ольга 13.12.2010 - 11:59

    @LEXXiY,Пригодилось. Я эту работу взяла в закладки..

  • LEXXiY 13.12.2010 - 23:32

    @Ольга, Будут проблемы обращайтесь, люблю допиливать то что не допиливается 🙂

  • Ольга 13.12.2010 - 23:40

    @LEXXiY, Ок. Не потеряемся, я у Вас подписалась еще на рассылку… 🙂

  • Ольга 30.01.2011 - 01:47

    Спасибо за статью, правда она не совсем подробная. Но мне удалось найти к ней дополнение, которое тоже было не совсем полным )))))

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

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

  • LEXXiY 31.01.2011 - 01:20

    Очень рад, что статья пригодилась Вам 🙂
    А что в ней не хватает по Вашему мнению?

  • apisklov 04.02.2011 - 10:49

    у меня вроде работает на не до конца считает строчки. строчек -13 а он 9 насчитал

  • LEXXiY 04.02.2011 - 11:24

    Ну скорее всего Вы считаете с переносом строк, которые насколько мне известно включены по умолчанию в большинстве редакторов. А плагин выводит строки с полосой прокрутки, без переносов, ну а если и срабатывает перенос то только у оочень длинных строк кода.
    В редакторе попробуйте в меню Вид (View) отключите переносить по словам.

  • KaronatoR 25.08.2011 - 23:34

    Что-то у вас не подсвечивается код в конце статьи.
    Вот и у нас на сайте сломался. Не знаете как пофиксить?

  • LEXXiY 25.08.2011 - 23:57

    Здравствуйте
    Плагин обновлялся недавно, обновите его и замените пути в шапке сайта, там добавились папки syntaxhighlighter2 и syntaxhighlighter3. По крайней мере в плагинах вордпреса.
    Если у Вас не плагином, обновите версию и проверьте все пути к .js файлам.

  • KaronatoR 26.08.2011 - 01:50

    @LEXXiY, Здравствйте, починил. Смотрб и вы в процессе =)

  • LEXXiY 29.08.2011 - 22:44

    Отлично 🙂
    Да я тоже потихоньку допиливаю 🙂

  • mr. divan 01.01.2012 - 16:02

    Искал подробную инструкцию и вот — нашёл. Спасибо.

  • 4enki 17.07.2012 - 17:45

    символ «<" заменяется на его код "&lt". как от этого избавится? при повторном редактировании статьи всё сбивается.
    есть ли решение?

  • Абдулазиз 23.05.2013 - 16:10

    @4enki,
    Вам нужно установить плагин типограф.

  • LEXXiY 11.06.2013 - 11:53

    Спасибо за подсказку!

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


Следуйте за мной на Twitter! Twitter!
Я на Твиттере

Рекомендую

Не ленись, подпишись!

Последние статьи

Обсуждаемое

Тучка

Статистика