Search code examples
javascriptcssckeditorwysiwyg

Formatting CKEditor Text with Proper Styles and Syntax Highlighting

I am using CKEditor and have also added the Syntax Highlighter plugin ((Code Snippet)) to my setup. However, I am struggling to output CKEditor text with the correct styles (from CKEditor), including the desired syntax highlighting (from the Code Snipped Plugin).

I have been searching for a solution for over three hours and haven't been able to find a satisfactory answer. Can someone help me, with how to enable proper formatting of the text with respect to CKEditor's styling and syntax highlighting?

Here is an example:

Input:

Input:

Output:

Output:

And here is the corresponding code:

<h1>Hello world!</h1>
<p>I&#39;m an instance of <a href="http://ckeditor.com">CKEditor</a>.</p>
<pre>
   <code class="language-javascript">
      var i = "test";
      alert(i);
   </code>
</pre>
Solution

  • It's a bit funny that you said you've been looking for an answer for 3 hours as it is explained right in the official documentation for this feature. Sometimes it makes sense to just check the docs, probably :)

    Target Page

    To see the highlighter styles on the target page where CKEditor content is displayed, you will need to load the highlight.js script and theme's stylesheet on this page. You can either reuse a copy of highlight.js placed in the ckeditor/plugins/codesnippet/lib/highlight directory or download your own copy from the highlight.js download page. (...)

    Read more details and grab some code here: http://docs.ckeditor.com/#!/guide/dev_codesnippet-section-target-page