Вход
Вы вошли на сайт, как Гость
Авторизация через ВконтактеАвторизация через FacebookАвторизация через TwitterАвторизация через ОдноклассникиАвторизация через Mail.RuАвторизация через GoogleАвторизация через Яндекс
Внешний вид сайта

Какой вид сайта Вы предпочитаете?



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

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

Ваше имя: *

Ваш e-mail: *

* Звёздочкой помечены обязательные поля для заполнения

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

Статистика
Сейчас на сайте:
Cтатей: 79
Партнёрских продуктов: 136
Файлов: 63
Секретных материалов: 108
Товаров: 3
Галерей: 2
Альбомов: 0
Заметок: 26
Комментариев: 13
Пользователей: 71
Подписчиков: 165
Посетителей на сайте: 16
Реклама
Мы Вконтакте
Tak.ru

Syntax Highlighter

Syntax Highlighter

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

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

SyntaxHighlighter 3.0.83

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

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

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

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

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

<script type="syntaxhighlighter" class="brush: язык кода"><![CDATA[код для подсветки]]></script>,

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

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

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

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

SyntaxHighlighter Test

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

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

Оцените заметку: 0 1 2 3 4 5


Понравился материал?
Поделись со своими друзьями в социальных сетях!

Нравится:



Расскажите о нас своим друзьям:






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

Ваше имя: *

Ваш e-mail: *

* Звёздочкой помечены обязательные поля для заполнения

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


Комментарии Вконтакте:

Комментарии Facebook:


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

Здесь комментариев пока нет.

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

Ваш e-mail необходим только для связи с Вами и не публикуется на сайте.

* Звёздочкой помечены обязательные поля для заполнения

Поиск
Поисковый запрос должен быть не менее 4-х символов
WMR-бонус

Получи WMR-бонус!
Для получения WMR-бонуса введите Ваш WMR-кошелёк и код с картинки и нажмите на кнопку "Получить бонус"

WMR-кошелёк:

Код
Код:
Поддержка