Автор

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

Подсветка синтаксиса кода для любого сайта.
Скрипт 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!";

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


vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru


Статьи по темеJS

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

Вторичная панель содержимого, которая складывается плотно, поддерживается CSS-преобразованиями и jQuery.


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

В этой статье покажу способ создания всплывающего окна на любом сайте. Использовать будем jQuery плагин fancybox. А чтобы добавить смысловой нагрузки статье, вставим в модальное окошко форму отправки письма. Сразу хочу заметить модальные окна на этом плагине работают на всех браузерах. Приступим!


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

Все популярней становятся сайты, в котором реализованы интерактивные фоны, зачастую это анимацию, какие-то не значительные эффекты, ранее ресурсы не всем позволяли просматривать "тяжелые" сайты, но сейчас прогресс не стоит на месте и интернет и мобильные устройства идут почти в ногу со своими дестктопными товарищами. Все мы знаем, что такие мобильные устройства на iOS и Windows Phone не поддерживают просмотр видео реализованных с помощью flash проигрывателя, но они прекрасно работают с HTML5.


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

Отображение морфинга, которое оживляет в соответствии с размером его содержимого.


105 Публикаций

Раскрутка в соцсетях

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


Перейти в Блог

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Close