Table of Contents
Подсветка синтаксиса
Если вы хотите при работе в редакторе использовать подсветку синтаксиса – вам для этого потребуется скрипт Alex Gorbatchev’a SyntaxHighLighter ПЛЮС плагин Syntax-Highlighting для CKEditor.
Скачайте необходимые скрипты
Скачайте скрипт Syntax-Highlighter-Script отсюда.
Разархивируйте его в папку на локальной машине и загрузите на сервер в подпапку “syntaxhighlighter” в папку /admin/template/js/.
Скачайте плагин SyntaxHighLighter-Plugin для CKeditor
Загрузите плагин на сервер
Разархивируйте его в папку на локальной машине и загрузите эту папку в директорию плагинов редактора admin/template/js/ckeditor/plugins.
Интеграция подсветки с GetSimple
Для активации подсветки синтаксиса понадобится отдельный пользовательский файл конфигурации редактора, если вы еще такой файл не создали ранее. Добавьте в этот файл две строки:
CKEDITOR.editorConfig = function( config ){
// Define changes to default configuration here. For example:
// config.removePlugins = 'elementspath,resize' ; // hide element path and resizer
config.extraPlugins = 'syntaxhighlight',
config.syntaxhighlightLangDefault = 'php'
};
Если вы уже указывали параметр extraPlugins, добавьте к значению 'syntaxhighlight' через запятую, например:
config.extraPlugins = 'fileicon,video,syntaxhighlight','templates',
Если это пока не было сделано – укажите свой файл пользовательской конфигурации редактора в файле gsconfig.php:
Для вывода кнопки подсветки синтаксиса на панель инструментов необходимо прописать эту опцию в параметре GSEDITORTOOL в файле gsconfig.php, например, вместо стандартной строки
# WYSIWYG toolbars (advanced, basic or [custom config])
define('GSEDITORTOOL', 'advanced');
определите следующие кнопки панелей инструментов:
define('GSEDITORTOOL',"['Source','Cut','Copy','Paste','PasteText','PasteFromWord','Undo','Redo','Find','Replace','SelectAll','RemoveFormat'],
'/',
['Bold','Italic','Underline','Strike','Subscript','Superscript','JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
['TextColor','BGColor','Rule','PageBreak'],['NumberedList','BulletedList','Outdent','Indent'],
'/',
['Blockquote','Smiley'],['Link','Unlink','Anchor'],
['Image','Flash','video','fileicon','Table','HorizontalRule','SpecialChar'],
'/',
['Styles','Format','Font','FontSize'],['ShowBlocks'],['Code'],['Templates']
");
Опция
['Code']
размещает кнопку подсветки синтаксиса на панели инструментов редактора.
Отредактируйте файл template.php вашей темы
Теперь для обеспечения работы подсветки добавьте ссылки на необходимые файлы стилей и скрипты в секцию <head> файла шаблона.
<!-- SyntaxHighlighter --> <link type="text/css" rel="stylesheet" href="<?php get_site_url(); ?>admin/template/js/syntaxhighlighter/styles/shCore.css"/> <link type="text/css" rel="stylesheet" href="<?php get_site_url(); ?>admin/template/js/syntaxhighlighter/styles/shThemeDefault.css"/> <script type="text/javascript" src="<?php get_site_url(); ?>admin/template/js/syntaxhighlighter/scripts/shCore.js"></script> <script type="text/javascript" src="<?php get_site_url(); ?>admin/template/js/syntaxhighlighter/scripts/shBrushCss.js"></script> <script type="text/javascript" src="<?php get_site_url(); ?>admin/template/js/syntaxhighlighter/scripts/shBrushJScript.js"></script> <script type="text/javascript" src="<?php get_site_url(); ?>admin/template/js/syntaxhighlighter/scripts/shBrushPhp.js"></script> <script type="text/javascript" src="<?php get_site_url(); ?>admin/template/js/syntaxhighlighter/scripts/shBrushPlain.js"></script>
Если после этого подсветка синтаксиса на вашем сайте все-таки не работает, попробуйте добавить еще один скрипт в файл шаблона template.php:
<script type="text/javascript">SyntaxHighlighter.all()</script>
Как работать с подсветкой
После всего этого вы увидите новую иконку на панели инструментов:
Кликните ее и убедитесь, что по умолчанию языком подсветки является PHP.
Теперь вы можете ввести в открывшуюся форму фрагмент своего кода, и после сохранения
он будет вставлен в вашу страницу уже с подсветкой.
Скриншот:
