Install CKEditor-Syntaxhighlight Plugin for CKEditor
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:
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:
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:
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.
Create highlight-examples folders, examples in this document will be placed here:
You can click the "Source" to view the HTML code.
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.