Подсветка синтаксиса на стороне браузера. Это готовый к использованию порт на Cotonti SyntaxHighlighter от Alex Gorbatchev.
Авторы:
GitHub: https://github.com/Cotonti-Extensions/syntax-highlighter
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)
Плагин включает набор готовых цветовых тем. Но вы можете подправить какую-либо из них под дизайн вашего сайта. Для этого скопируйте CSS файл темы из папки syntaxhighlighter/lib/
в папку styles
темы вашего сайта — themes/theme-name/styles
. Название нового файла должно иметь префикс syntaxhighlighter-
. Например полное имя файла может выглядить так: themes/theme-name/styles/syntaxhighlighter-my-awesome-theme.css
. Теперь вы можете изменить его в соответствии со своими нуждами. Или можно создать свою собственную цветовую тему. Все CSS файлы, расположенные в папке themes/theme-name/styles
"перекрывают" файлы с теми же именами в папке плагина.
Цветовая тема по-умолчанию:
Цветовая тема Cotonti:
Поблагодарили: 211 раз
Вот там есть такой интересный файл override.css, который грузится из папки с плагином. Конечно для своего сайта каждый захочет свои модификации. Может быть сделать настраиваемый путь загрузки этих стилей? Чтобы не перезаписать при обновлении?
Поблагодарили: 247 раз
Сделал его загрузку опциональной. Можно отключить в админке. А сами стили можно определить в теме сайта.