В своем блоге для подсветки кода я использую syntaxhighlight. Удобная штука, для того чтобы подсветить код его нужно заключить в теги

<pre class="brush:php">
</pre>

Ну и в странице, где этот код будет показан подключить необходимые скрипты и активировать подсветку

<link href='js/highlight/styles/shCoreDefault.css' rel='stylesheet' type='text/css'/>
<link href='js/highlight/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='js/highlight/scripts/shCore.js' type='text/javascript'></script>
<script src='js/highlight/scripts/shAutoloader.js' type='text/javascript'></script>
<script src='js/highlight/scripts/shBrushCss.js' type='text/javascript'></script>
<script src='js/highlight/scripts//shBrushXml.js' type='text/javascript'></script>
<script src='js/highlight/scripts/shBrushJScript.js' type='text/javascript'></script>
<script src='js/highlight/scripts/shBrushPhp.js' type='text/javascript'></script>
<script language='javascript'>
SyntaxHighlighter.config.bloggerMode = false;
SyntaxHighlighter.defaults.toolbar = false;
SyntaxHighlighter.defaults['pad-line-numbers'] = true;
SyntaxHighlighter.all();
</script>

Все бы ничего если бы не одна мелочь, вставлять код в ckeditor страшно неудобно. Приходиться извращаться с исходным текстом, что обычно неминуемо приводит к ошибке в html.

 

На выручку приходит плагинная структура ckeditor'a. Сперва я хотел написать такой плагин сам, но потом решил, что все должно быть украдено до нас.

Результатом поиска стал Plugin  ckeditor-syntaxhighlight . Установка его проста, как 5 копеек. Копируем папку syntaxhighlight из архива в папку ckeditor/plugins/

Далее в файле config.js добавляем пару строк 

config.extraPlugins = 'syntaxhighlight';
config.toolbar_Full.push(['Code']);

Тут нужно быть внимательным и не затереть другие уже установленные плагины. К примеру у меня эти строки выглядят так

config.extraPlugins = 'addseparator,syntaxhighlight';
config.toolbar_Full.push(['addseparator','Code']);

 

 

Если плагин успешно установлен вы увидите такую кнопку

 

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

                

Плагин удобен прежде всего еще и тем, что во вкладке Advanced(Расширения) можно настроить вид кодового блока.

          syntax highlighter ckeditor plugin          

Среди настроек наиболее интересные следующие:

  • Hide gutter & line numbers - скрыть нумерацию строк и черточку разделяющую номера строк от кода.
  • Collapse the code block by default. (controls need to be turned on) - блок кода по умолчанию будет свернут, и лишь при клике будет разворачиваться
  • Switch off line wrapping. - Включить перенос длинных строк. Длинные строки будут переноситься на новую строчку, что очень удобно, потому как  тег <pre> растягивает страницу
  • Default line count - нумерация начинается с заданной цифры, это бывает нужно когда вы к примеру хотите ясно указать на какой строчке в файле надо вносить правку
  • Highlight lines - позволяет подсветить нужные строки также, как бы это делал к примеру notepad++. Чтобы выделить несколько строк, надо написать в поле цифры строк через запятую.

Плагин не содержит локализацию на русский язык, что Ваш покорный слуга с удовольствием и поправил. Скачать плагин ckeditor syntaxhighlight на русском языке  или отдельно только файл локализации на русский язык

Единственно, что в файле ckeditor/plugins/syntaxhighlight/plugin.js нужно поменять ["en"] на ["ru"].

Вот результат. Если язык не проявляется, не забудьте почистить кеш.

          

Рассказать друзьям
author.jpg

Платная консультация по вопросам 2500 руб/час

Прочитали статью и остались вопросы? Меня зовут Валерий и я её автор. С радостью объясню Вам в скайпе все затруднительные моменты, которые остались за рамками статьи!

Подробнее ...

Добавить комментарий