Автор

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

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

Meta редирект наихудший из редиректов его используют лишь в случае когда остальные виды редиректа в htaccess и php не доступны, но как говорится: на безрыбье и рак рыба, поэтому лучше сделать такой редирект чем потерять посетителей навсегда. При всем при этом у нас есть возможность, кстати отсутствующая при предыдущих вариантах редиректа сообщить пользователям о том, что сайт переехал на новый домен и это тоже неплохо.


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

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


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

К данному решению пришел не сразу, способ реализации был третьим по счёту, как мне кажется, вполне достойным внимания. Основная фишка в том, что для реализации вообще не используется JavaScript.

Внимание! Метод не работает в IE8 и ниже, в нашем проекте решили не ориентироваться на эти браузеры, по крайней мере на этапе Бета.

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

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


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close