Установите CKEditor-Syntaxhighlight Plugin в CKEditor

1- What is CKEditor-SyntaxHighlight?

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

2- The installation requires

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

3- Download CKEditor-SyntaxHighlight

Вы можете посомтреть руководство обобщающее как установить CKEditor-SyntaxHighlight сразу после того, как нажмете кнопку download.
CKEditor-SyntaxHighlight запрашивает plugin Dialog, вам так же нужно скачать этот plugin.
Addon Dialog запрашивает plugin "Dialog User Interface" поэтому вам нужно скачать этот  plugin:
Результаты скачивания:

4- Installing CKEditor-SyntaxHighlight

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

5- CKEditor-SyntaxHighlight examples

Создать файл  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 код.

6- SyntaxHighlighter

Phía trên tôi đã hướng dẫn bạn nhúng CKEditor-SyntaxHighlight vào trình soạn thảo CKEditor. Thông thường sau khi soạn thảo trên CKEditor, nội dung có thể là một bài báo, một bài viết, nó sẽ được lưu trữ trên Database, và sẽ có một trang hiển thị nội dung của bài viết đó.
Вам нужно скачать  SyntaxHighlighter с разными  style, чтобы он выделил содержание кода который вы написали в  CKEditor.
Смотрите так же: