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

 

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

 

ДЕМО
ИСХОДНИКИ

 

На данной странице я использую именно SyntaxHighlighter для более реальной демонстрации (на остальных страницах блога используется Highlight.js ).

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

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

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





















	

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

function test() : String
{
	return 10;
}

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

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

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

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

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

В папке /styles/ несколько стилей оформления, на скриншоте изображен стиль shThemeDefault.css

и темный стиль shThemeEmacs.css

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

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

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

echo "hello world!";

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


🔖 Выбор по тегам ×

Top