Install CKEditor-Syntaxhighlight Plugin for CKEditor

View more Tutorials:

Follow us on our fanpages to receive notifications every time there are new articles. Facebook Twitter

1- What is CKEditor-SyntaxHighlight?

CKEditor-SyntaxHighlight is a plugin originally written for CKEditor 3+ that enables code syntax highlighting.
Integrated Ckeditor-SyntaxHighlight into CKEditor allow you drafting with Code display area for different kinds of programming languages. See the illustration below:
You can try to CKEditor-SyntaxHighlight:

2- The installation requires

Make sure that you have downloaded CKEditor. You can see CKEditor download and using guides at:
CKEditor-SyntaxHighlight is an addon, which is not available on CKEditor when you downloaded. Thus you need to integrate CKEditor-SyntaxHighlight into CKEditor.
After downloading and unpacking ckeditor:

3- Download CKEditor-SyntaxHighlight

You can see the guide summarizes how to install CKEditor-SyntaxHighlight soon after you click the download button.
Ckeditor-SyntaxHighlight require Dialog plugin, you will also need to download this plugin.
Dialog plugin requires plugin "User Interface Dialog" so you also need to download this plugin:
Download results:

4- Installing CKEditor-SyntaxHighlight

Extract the file that you have downloaded before.
Copy syntaxhighlight , dialog, dialogui folder into plugins folder of CKEditor. If plugins are already available in CKEditor you still can copy over.

5- CKEditor-SyntaxHighlight examples

Create highlight-examples folders, examples in this document will be placed here:

<!DOCTYPE html>
    <meta charset="utf-8">
    <title>Replace Textarea by Code</title>
    <script src="../ckeditor.js"></script>

    <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>

            CKEDITOR.replace( 'editor1' ,{
              extraPlugins : 'syntaxhighlight',        
              toolbar: [
                     ['Source'] ,
                     ['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink','-','About'] ,

Try it:
Running results:
You can click the "Source" to view the HTML code.

6- SyntaxHighlighter

Above I have instructed you to embed CKEditor-SyntaxSighlight in the CKEditor editor. Usually after editing on CKEditor, content can be an article, an article, it will be stored on the database, and will have a page showing the contents of that article.
You need to download SyntaxHighlighter with styles, so that it highlights the code you wrote in CKEditor.
See more:

View more Tutorials: