Навигация

Вход

Внешний вид сайта

Подпишись на Telegram-канал, чтобы первым узнать все новости сайта:

Рассылка

Подпишитесь на рассылку наших новостей, чтобы всегда быть в курсе последних обновлений!

Ваши данные никому не передаются. Вы можете отписаться от рассылки новостей в любой момент.

Статистика

Сейчас на сайте:

Cтатей: 107
Партнёрских продуктов: 164
Файлов: 83
Секретных материалов: 127
Товаров: 5
Курсов: 62
Галерей: 2
Альбомов: 0
Заметок: 26
Комментариев: 13
Пользователей: 83
Подписчиков: 165
Посетителей на сайте: 6

Мы Вконтакте

Tak.ru

Главная » Новости » Полезные статьи » Syntax Highlighter

Syntax Highlighter

Опубликовано: 12 июня 2013, 23:58:32 | Автор: rolar | Рубрика: Полезные статьи

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

Для таких случаев существуют специальные библиотеки для подсветки синтаксиса и программного кода. Одной из самых популярных на сегодняшний день является библиотека SyntaxHighlighter, разработанная Алексом Горбачёвым.

В чем же её особенности?

Во-первых, простота установки. Для подключения на веб-сайт достаточно скопировать файлы библиотеки на свой хостинг (обычно это отдельная папка syntaxhighlighter) и подключить ядро скрипта shCore.js, таблицы стилей shCore.css и shThemeDefault.css и необходимые библиотеки кистей для подсветки, например shBrushXml.js, shBrushCss.js, shBrushPhp.js и shBrushJScript.js для веб-программирования.

Во-вторых, простота использования. Для вставки программного кода на страницу нужно поместить его между дескрипторами

<pre class="brush: язык кода">код для подсветки</pre>,

где в классе прописывается язык кода, который должен быть подсвечен. Также существует ещё один метод вставки между дескрипторами

подсвечиваемый код вставляется между включением CDATA, а в классе также прописывается язык подсвечиваемого кода.

В-третьих, настройка. Скрипт для подсветки синтаксиса можно настраивать под свои требования:

– автоматически блокировать ссылки,
– добавлять классы и соответствующие стили для каждого подсвечиваемого элемента,
– сворачивать/скрывать подсвечиваемые блоки,
– изменять номер первой строки,
– выключать поле с номерами строк,
– выделять наиболее важные строки,
– подсвечивать HTML-код совместно с JavaScript, PHP или CSS,
– включать/отключать "умные" вкладки для нескольких подсвечиваемых блоков,
– устанавливать нужный интервал для табуляции,
– включать/отключать отображение панели управления,

а также,

– использовать режим интеграции для сайта http://blogger.com,
– менять текст сообщений по умолчанию (перевести их на русский язык),
– включать/отключать игнорирование символов переноса строки (теги <br />),
– использовать любой другой тег вместо <pre> для вставки подсвечиваемого кода.

Подробнее о всех настройках Syntax Highlighter можно ознакомиться здесь.

Последняя на данный момент версия 3.0.83 и она значительно отличается от предыдущих версий 2.x и 1.x. В этой версии есть следующие нововведения и возможности:

– динамическая загрузка нужной кисти для подсвечиваемых блоков,
– копирование кода в буфер обмена без использования Flash, достаточно двойным нажатием мыши выделить весь код и нажать Ctrl+C,
– блок с номерами строк и блок с подсвеченным кодом идут отдельно, что облегчает процесс копирования блока с подсвеченным кодом,
– есть возможность добавлять названия к подсвеченным блокам, которые появятся над самим блоком (это работает и для свернутых блоков),
– совместимость с Common JS и AJAX, которое дает веб-разработчикам более широкое применение Syntax Hightlighter,
– улучшенная поддержка CSS, которая упрощает процесс создания новых тем и их добавление к основной теме.

Просмотров: 2485 | Комментариев: 0 | Рейтинг: