Syntax Highlighter

Подсветка синтаксиса на стороне браузера. Это готовый к использованию порт на Cotonti SyntaxHighlighter от Alex Gorbatchev.

Авторы:

• SyntaxHighlighter: Alex Gorbatchev
• Плагин для Cotonti: Vladimir Sibirov (Trustmaster)
• Плагин для Cotonti: Alexey Kalnov (Alex300)
• Цветовая тема Cotonti: Andrey Matsovkin, (Macik)

GitHub: https://github.com/Cotonti-Extensions/syntax-highlighter

#1. Установка

• Скачайте плагин и распакуйте папку "syntaxhighlighter" в папку "plugins" вашего сайта.
• Установите его в панели администратора.
• В настройках плагина выберите подходящую цветовую тему и при необходимости установите другие настройки.

#2. Использование

C HTML парсером: для подсветки синтексиса на каком-либо языке используйте такме теги:

<pre class="brush:language;">
    Your code here
</pre>

Список доступных языков и цветовых тем: https://github.com/syntaxhighlighter/syntaxhighlighter/wiki/Brushes-and-Themes

Плагин для CKEditor: https://ckeditor.com/cke4/addon/syntaxhighlight, https://github.com/dbrain/ckeditor-syntaxhighlight (включен в "коробку" Cotonti)

#3. Цветовые темы

Плагин включает набор готовых цветовых тем. Но вы можете подправить какую-либо из них под дизайн вашего сайта. Для этого скопируйте CSS файл темы из папки syntaxhighlighter/lib/ в папку styles темы вашего сайта — themes/theme-name/styles. Название нового файла должно иметь префикс syntaxhighlighter-. Например полное имя файла может выглядить так: themes/theme-name/styles/syntaxhighlighter-my-awesome-theme.css. Теперь вы можете изменить его в соответствии со своими нуждами. Или можно создать свою собственную цветовую тему. Все CSS файлы, расположенные в папке themes/theme-name/styles "перекрывают" файлы с теми же именами в папке плагина.

#4. Примры

Цветовая тема по-умолчанию:

Цветовая тема Cotonti: