Подсветка синтаксиса кода для сайта. Скрипт SyntaxHighlighter

Logo
Подсветка синтаксиса кода для любого сайта. Скрипт SyntaxHighlighter

В этой статье речь пойдет о подсветке синтаксиса кода для любого сайта. Для этого мы будем использовать специальный скрипт SyntaxHighlighter, который позволяет реализовать красивую подсветку синтаксиса на любом сайте. Данный скрипт поддерживает множество языков программирования, таких как, например, PHP, C++, JavaScript, C# и многие другие. В рамках данной статьи мы подробно рассмотрим процесс установки SyntaxHighlighter на сайт, а затем перейдем к подробной инструкции по использованию скрипта.

Хоть данный скрипт и может быть установлен на любой сайт, все же в качестве примера мы будем устанавливать его на сайт, работающий на движке WordPress (Как создать полнофункциональный сайт на WordPress). В заключение мы также рассмотрим код для добавления кнопок в редактор WordPress, который позволит вам значительно сэкономить время при добавлении кода в статьи.

Установка скрипта SyntaxHighlighter

Установка скрипта для подсветки синтаксиса очень простая и может быть разделена на 2 этапа.

  1. Копирование файлов скрипта на хостинг.
  2. Подключение необходимых файлов на страницах сайта.

Итак, для начала скачиваем файлы скрипта SyntaxHighlighter к себе на компьютер. Сделать это можно как на официальном сайте SyntaxHighlighter, так и перейдя по следующей ссылке (версия которую использую я).

Далее создаем папку на хостинге и копируем в нее файлы скрипта. Для примера создадим в корне сайта папку с названием «syntaxhighlighter» и скопируем туда все файлы из архива.

Теперь нам нужно подключить к сайту все необходимые файлы SyntaxHighlighter. Для этого в <head> страницы добавьте следующий код.

<!-- Подключаем таблицы стилей, ядро скрипта и добавляем функцию для подсветки синтаксиса-->
<link type="text/css" rel="stylesheet" href="/syntaxhighlighter/styles/shCore.css" />
<link type="text/css" rel="stylesheet" href="/syntaxhighlighter/styles/shThemeDefault.css" />
<script type="text/javascript" src="/syntaxhighlighter/scripts/shCore.js"></script>
<script type="text/javascript">SyntaxHighlighter.all();</script>

Далее нам необходимо будет подключить файлы, отвечающие за подсветку синтаксиса определенного языка программирования. Например, нам нужно подсвечивать php, c++ и javascript код у себя на сайте. Для этого необходимо добавить в <head> страницы следующий код.

<script type="text/javascript" src="/syntaxhighlighter/scripts/shBrushPhp.js"></script>
<script type="text/javascript" src="/syntaxhighlighter/scripts/shBrushCpp.js"></script>
<script type="text/javascript" src="/syntaxhighlighter/scripts/shBrushJScript.js"></script>

При необходимости можно объединить нужные файлы и подключать всего один файл. Это поможет немного ускорить загрузку страниц сайта за счет уменьшения количества подключений.

Также стоит заметить, что если вы используете WordPress, то вышеприведенный код нужно будет добавить в файл header.php вашей темы оформления. Более подробно о файлах тем оформления WordPress вы можете узнать в статье «Установка и редактирование темы WordPress».

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

Как реализовать подсветку синтаксиса при помощи SyntaxHighlighter

Для того чтобы выделить код на сайте нужно оформить блоки с кодом следующим образом.

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

где  brush: php отвечает за язык кода, синтаксис которого будет подсвечиваться.

Если выделяемый код будет написан на C++, то вместо brush: php нужно будет написать brush: cpp. При этом в <head> страницы обязательно должен быть подключен файл, отвечающий за подсветку синтаксиса кода соответствующего языка программирования.

Также стоит заметить, что для корректной подсветки кода его нужно заранее подготовить и преобразовать все специальные символы в HTML-сущности. Если этого не сделать, то после вставки в статью вместо отображения кода на странице он будет выполняться. Исходя из этого, перед добавлением кода все специальные символы необходимо преобразовывать в HTML-сущности и лишь потом добавлять код в статью.

Для преобразования спецсимволов в HTML-сущности можно воспользоваться любой подходящей программой, например, программой DreamWeaver или NotePad++ (выделить текст и нажать Меню — TextFX — TextFX Convert — Encode HTML (&<>«)). Кроме этого в интернете существует множество разнообразных бесплатных инструментов по обработке кода. Один из них вы можете найти на этой странице.

После обработки кода и добавления его на страницу у вас должно получиться примерно следующие (на примере подсветки php кода).

<?php
echo "Hello world!";
?>

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

Также при выделении кода рекомендую помещать его в специальный класс CSS с определенными свойствами. Это даст вам возможность более гибко изменять внешний вид кода на сайте. Для примера приведу класс CSS, который я использую у себя на сайте.

.code_sample {
border: 1px solid #DADADA;
font-size: 12px;
margin-bottom: 10px;
margin-top: 10px;
}

Как видите, в нем мы создаем рамку для блока с кодом, задаем размер шрифта и добавляем отступы. Данный класс нужно будет добавить в таблицу стилей вашего сайта. После этого для выделения кода на сайте нужно использовать следующую конструкцию.

<div class="code_sample"><pre class="brush: php">
echo "hello world!";
</pre></div>

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

Код кнопок подсветки синтаксиса для сайтов на WordPress

Для того чтобы добавить кнопки в редактор WordPress нам придется править специальный файл quicktags.js. Подробное руководство по вставке кода вы можете прочитать в статье «Как добавить новые кнопки в редактор WordPress». Здесь я приведу лишь пример кода, который нужно будет добавить в файл quicktags.js.

Код кнопки для подсветки PHP кода

edButtons[edButtons.length] =
new edButton('ed_php'
,'CodePHP'
,'<div class="code_sample"><pre>'
,'</pre></div>'
,''
);

t.Buttons[t.Buttons.length] = new edButton(name+'_php','CodePHP','<div class="code_sample"><pre>','</pre></div>','');

Код кнопки для подсветки JavaScript кода

edButtons[edButtons.length] =
new edButton('ed_js'
,'CodeJavaScript'
,'<div class="code_sample"><pre>'
,'</pre></div>'
,''
);

t.Buttons[t.Buttons.length] = new edButton(name+'_js','CodeJavaScript','<div class="code_sample"><pre>','</pre></div>','');

Код кнопки для подсветки CSS кода

edButtons[edButtons.length] =
new edButton('ed_css'
,'CodeCSS'
,'<div class="code_sample"><pre>'
,'</pre></div>'
,''
);

t.Buttons[t.Buttons.length] = new edButton(name+'_css','CodeCSS','<div class="code_sample"><pre>','</pre></div>','');

Аналогичным образом можно создать кнопки для подсветки C++, C#, XML и других языков программирования. Все зависит от вашего желания и потребностей.

На этом данная статья подошла к концу. Если у вас остались какие-то вопросы по установке и использовании скрипта SyntaxHighlighter, вы всегда можете задать их в комментариях к статье.

На этом все. Удачи вам и успехов в создании сайтов.

Обнаружили ошибку? Выделите ее и нажмите Ctrl+Enter

Комментарии 27

  • StarMan

    Отличная статья ! Я все сделал и все работает … спасибо ! но есть один маленький нюанс когда я вставляю HTML код то с синтаксисе не отображаются теги и . В чем может быть проблема ?

  • Дмитрий

    Попробуйте преобразовывать спецсимволы в HTML сущности. То есть у вас вместо таких символов как «<» должно быть «& lt;» и т.д. После замены всех спецсимволов все должно отображаться корректно.
    Для замены можете использовать программу NotePad++ или какой-то сторонний сервис.

  • StarMan

    да я по пробовал сделать как вы сказали, ну на сколько я понял надо открыть shBrushXml.js и заменить там все символы «>» на «& gt;» !!! но ничего не изменилось !

  • Дмитрий

    Вы меня неправильно поняли. Скрипт трогать не нужно. Нужно заменять спецсимволы в исходном коде, который вы хотите подсветить. То есть, перед вставкой кода на сайт, его нужно сначала обработать, а потом уже добавлять в статью. Обычно, если добавлять код через визуальный редактор, то спецсимволы будут заменены автоматически. Если это не произойдет, то замените их вручную, после чего уже добавляйте код на сайт.

  • StarMan

    Спасибо большое за помощь ! …. все сработало ! еще есть маленький вопрос:
    Как добавить иконку копирования при наведение на код ? ну чтоб автоматом в буфер копировать.

  • Дмитрий

    Насколько я помню, то данная функция установлена в скрипте по умолчанию. Лично у меня было именно так.

  • Ксения

    Люди добрые, у меня проблеммка. Каждый оператор в коде отображается с новой строки. В общем код не слеваа на право идет, а сверху вниз(. Подскажите как быть!

  • Дмитрий

    Причина проблемы кроется в таблицах стилей. Скорее всего для какого-то элемента прописано лишнее свойство. Рекомендую проверить стили для тега code, а именно чтобы в таблице стилей не было свойства display: block. Если оно есть, то удалите его. Должно помочь.

  • Pacifik

    А как сделать что бы был такой же бар как у вас на сайте ? Я нажимаю в настойках расширения показывать бар, у меня какой то зеленый квадратик появляется и все…

  • Дмитрий

    Напишите мне в «Контакты» и я постараюсь помочь вам.

  • Kavrasky

    Что мне делать если у меня bb редактор?

  • Дмитрий

    Попробуйте воспользоваться другим скриптом. В интернете я встречал разные вариации SyntaxHighlighter. Среди них были и версии, которые оптимизированные специально для работы с bb кодом.

  • Kavrasky

    xD Поменял CMS только из-за этого скрипта, и вполне ним доволен! Легок в настройках, установил за пару минут =)

  • Андрій

    Написано супер — лікарство то шо нада!!!! коротко і чотко. Поставте на сторінку +1

  • Денис

    Здравствуйте! Я сделал всё так, как вы говорили! Но есть проблема. если код длинный в одну строку, у меня появляется полоса прокрутки. А это совсем не красиво! Я вижу на этом сайте нет полосы прокрутки в в кнопке подсвечивания кода, а переносится на следующую строчку длинный код! Объясните как мне так сделать! Спасибо!

  • Дмитрий

    Здравствуйте, Денис! Да, такое иногда случается, когда публикуется неразрывный код. Если же код обычный, но полоса прокрутки все же появляется, то можете попробовать поэкспериментировать с настройками скрипта или стилями CSS. Если в настройках ничего не нашли, то измените размеры элементов, обтекание, отображение и т.д. В качестве примера можете использовать стили с данного сайта. P.S. Настройки скрипта можно найти в исходном несжатом файле shCore.js

  • Миша

    А в какие теги вставлять этот код? Чтобы отображало плз.

  • Дмитрий

    В статье детально все расписано. Если у Вас какой-то специфический вопрос — опишите его более подробно.

  • Roman

    Возможно ли сделать подсветку в <textarea> ?
    Что бы вставил туда текст и он сразу подсветил синтаксис !?
    Напишите все возможные варианты.

  • Дмитрий

    Возможно, но как все реализовать так сразу не скажу. Нужно все обдумать, реализовать и проверить. Скорее всего придется вводить новые теги или заменять уже существующие. Одним словом, отредактировать скрипт таким образом, чтобы он начал воспринимать нужные нам теги должным образом. Для удобства работы рекомендую использовать несжатый исходник, который можно будет найти в общей папке с остальными файлами скрипта SyntaxHighlighter.

  • Roman

    Спасибо, будем пробовать!

  • Никита

    Еще один вариант использования (по крайней мере у меня работает!)

    <div class="code_sample">[source language="html"]ваш код html[/source]</div>

  • Алексей

    Скажите, что нужно сделать чтобы при наведении курсора на иконку отображались русские слова такие как — посмотреть исходный код, скопировать, печать, помощь. Спасибо.

  • Дмитрий

    Алексей, ищите в исходном коде скрипта нужные подсказки и заменяйте их на русские. При этом не забудьте сохранить файл в кодировке UTF-8 без BOM. В противном случае будут проблемы с отображением русских символов.

  • Олег

    Не знаю почему, но у меня не отображаются кнопки копирования в буфер подсвеченного текста. Скрипт брыл с офф. сайта, подсвечивает нормально, а вот кнопок нет. Если можете, то подскажите как их добавить.
    Заранее благодарен.

  • Дмитрий

    Здравствуйте, Олег. Судя по всему кнопки отключены в настройках скрипта. Если не сможете найти необходимые параметры, то как вариант можете скопировать необходимые файлы с данного сайта. Ссылки на них без проблем можно найти в исходном коде страниц.

  • григорий

    спасибо! очень хорошая и полезная статья!!! (у меня всё заработало)

Оставить комментарий

отменить ответ