Создание сайтов. Веб Студия «sOn»

Категории
Информация

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

Автор admin 15.06.2017 0 Комментарии

Итак, наступил момент, когда вам понадобилось встроить на ваш сайт подсветку синтаксиса кода. Для этого мы будем использовать специальный скрипт SyntaxHighlighter, который позволяет реализовать красивую подсветку синтаксиса на любом сайте. Данный скрипт поддерживает множество языков программирования, таких как, например, PHP, C++, JavaScript, C# и многие другие.

 

Приступим к установке скрипта.

 

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

 

Рассмотрим пример интеграции.

 

1. Создайте папку в корне сайта. Пусть это будет папка с названием: syntaxhighlighter. Закачайте разархивированные файлы скачанного архива в эту папку.

 

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

<script type="text/javascript" src="syntaxhighlighter/scripts/shCore.js"></script>
<script type="text/javascript" src="syntaxhighlighter/scripts/shBrushBash.js"></script>
<script type="text/javascript" src="syntaxhighlighter/scripts/shBrushCpp.js"></script>
<script type="text/javascript" src="syntaxhighlighter/scripts/shBrushCSharp.js"></script>
<script type="text/javascript" src="syntaxhighlighter/scripts/shBrushCss.js"></script>
<script type="text/javascript" src="syntaxhighlighter/scripts/shBrushDelphi.js"></script>
<script type="text/javascript" src="syntaxhighlighter/scripts/shBrushDiff.js"></script>
<script type="text/javascript" src="syntaxhighlighter/scripts/shBrushGroovy.js"></script>
<script type="text/javascript" src="syntaxhighlighter/scripts/shBrushJava.js"></script>
<script type="text/javascript" src="syntaxhighlighter/scripts/shBrushJScript.js"></script>
<script type="text/javascript" src="syntaxhighlighter/scripts/shBrushPhp.js"></script>
<script type="text/javascript" src="syntaxhighlighter/scripts/shBrushPlain.js"></script>
<script type="text/javascript" src="syntaxhighlighter/scripts/shBrushPython.js"></script>
<script type="text/javascript" src="syntaxhighlighter/scripts/shBrushRuby.js"></script>
<script type="text/javascript" src="syntaxhighlighter/scripts/shBrushScala.js"></script>
<script type="text/javascript" src="syntaxhighlighter/scripts/shBrushSql.js"></script>
<script type="text/javascript" src="syntaxhighlighter/scripts/shBrushVb.js"></script>
<script type="text/javascript" src="syntaxhighlighter/scripts/shBrushXml.js"></script>
<link type="text/css" rel="stylesheet" href=" syntaxhighlighter/styles/shCore.css">
<link type="text/css" rel="stylesheet" href=" syntaxhighlighter/styles/shThemeDefault.css">
    <script type="text/javascript">
        SyntaxHighlighter.config.clipboardSwf = ' syntaxhighlighter/scripts/clipboard.swf';
        SyntaxHighlighter.all();
    </script>

 

3. Скрипт SyntaxHighlighter подключен. Как оформить пронумерованные блоки кода следующего вида:

function test() : String{
    return 10;
}

 

Для этого нужно блок с программным кодом обернуть следующим образом:


Для css кода:

<pre class="brush:css;">Добавляем css код здесь</pre>


Для html кода:

<pre class="brush:html;">Добавляем html код здесь</pre>


Для JavaScript кода:

<pre class="brush:javascript;">Добавляем JavaScript код здесь</pre>

 

Таблицу классов для вывода всех типов программных кодов вы найдете на официальном сайте скрипта SyntaxHighlighter.

 

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

 

Все это позволяет значительно упростить работу пользователей при сохранении кода со страниц сайта.

 

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

 

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

Комментарий