7325 Андрей Барткевич 4 Октября 2016



SyntaxHighlighter подключение подсветки листинга кодаJava Script

Syntax Highlighter позволяет подсвечивать синтаксис кода на вашей странице.

Написан на Javascript и работает на стороне клиента. 

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

Пример можно посмотреть на этом блоге, вставка кода происходит при помочи Syntax Highlighter.

Подключение Syntax Highlighter

Для подключения Syntax Highlighter на ваш сайт (блог, форум) необходимо скачать исходники http://alexgorbatchev.com/SyntaxHighlighter/download/ , распаковать и скопировать себе на сайт в папку syntaxhighlighter (к примеру).
Теперь нужно подключить к сайту все необходимые файлы из папки syntaxhighlighter .
Для этого в <head> страницы добавьте следующий код

<!-- Подключаем таблицы стилей, ядро скрипта и добавляем функцию для подсветки синтаксиса-->
<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" src="/syntaxhighlighter/scripts/shCore.js"></script> <script type="text/javascript">SyntaxHighlighter.all();</script>

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

 <script type="text/javascript" src="/syntaxhighlighter/scripts/shBrushPhp.js"></script>
 <script type="text/javascript" src="/syntaxhighlighter/scripts/shBrushJScript.js"></script>
Также необходимые файлы можно подключить через сервер CDN JS
( Подключение через CDN https://cdnjs.com/libraries/SyntaxHighlighter )


Вывод подсветки синтаксиса при помощи SyntaxHighlighter на сайте

Для того что бы подсветить код, его просто нужно заключить в тег < pre > с классом brush и альясом языка, подсветку которого необходимо осуществить, вот например для вывода js:
<pre class='brush: js'>Здесь листинг кода, который необходимо подсветить.</pre>
где  brush: js отвечает за язык кода, синтаксис которого будет подсвечиваться.

Если выделяемый код будет написан на PHP, то вместо brush: js нужно будет написать brush: php. При этом в <head> страницы обязательно должен быть подключен файл, отвечающий за подсветку синтаксиса кода соответствующего языка программирования.

Очень нужная вещь для сайта (блога, форума) ориентированного на публикацию листинга кода.

Если у Вас остались какие-то вопросы по установке и использовании скрипта SyntaxHighlighter, вы всегда можете задать их в комментариях к статье.
Скачать
Источник

Рейтинг:

Поделится с друзьями:

Вы можете оставить свой комментарий:


97

материалов о web-разработке

1345

читателей нашего блога

15

городов и стран

96

разработанных проектов