Установите плагин CKEditor-Syntaxhighlight для CKEditor
View more Tutorials:

CKEditor-SyntaxHighlight это plugin написанный для CKEditor 3+, который позволяет выделения синтаксиса.
Интеграция CKEditor-SyntaxHighlight в CKEditor позволяет вм писать с областью отображения Code для разных языков программирования. Смотрите иллюстрцию ниже:

Вы можете попробовать сi CKEditor-SyntaxHighlight:
Или:

Удостоверьтесь, что вы скачали CKEditor. Можете посмотреть руководство по скачиванию и использованию CKEditor по ссылке:
CKEditor-SyntaxHighlight это addon, неимеющийся в CKEditor при скачивании. Поэтому вам нужно интегрировать CKEditor-SyntaxHighlight в CKEditor.
После того, как вы скачали CKEditor и извлекли:


Вы можете посомтреть руководство обобщающее как установить CKEditor-SyntaxHighlight сразу после того, как нажмете кнопку download.

CKEditor-SyntaxHighlight запрашивает plugin Dialog, вам так же нужно скачать этот plugin.


Addon Dialog запрашивает plugin "Dialog User Interface" поэтому вам нужно скачать этот plugin:
Результаты скачивания:

Извлечь файлы скачанные до этого.

Скопировать файл syntaxhighlight,dialog, dialogui в файл 'plugins' в CKEditor. Если какой-то plugin уже существует в CKEditor вы все равно можете их скопировать .


Создать файл highlight-examples, примеры данной статьм будут находиться в этом файле:

example1.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Replace Textarea by Code</title> <script src="../ckeditor.js"></script> </head> <body> <h2>Replace Textarea Elements Using JavaScript Code</h2> <form action="" method="post"> <textareaid="editor1" name="editor1" cols="80" rows="10"> <p>Hello <strong>CKEditor</strong></p> </textarea> <script> CKEDITOR.replace( 'editor1' ,{ extraPlugins : 'syntaxhighlight', toolbar: [ ['Source'] , ['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink','-','About'] , ['Syntaxhighlight'] ] }); </script> </form> </body> </html>
Запуск примера:
Запуск результатов примера:

Вы можете нажать на "Source" чтобы посмотреть на созданный HTML код.

Выше, я вам показал как встроить CKEditor-SyntaxHighlight в редактор CKEditor. Обычно, после редактирования на CKEditor, содержание может быть отчетом, статьей, которая будет сохранена в Database, и будет страница отображающая содержание этой статьи.
Вам нужно скачать SyntaxHighlighter с разными style, чтобы он выделил содержание кода который вы написали в CKEditor.

Смотрите так же: