How to output CKEditor code snippets with matching styles

问题

I have a question to the CKEditor... First I have to say, that I searched now for over 3 hours and I don't know, if I'm so bad or why I found nothing... I'm searching for a way, how to output CKEditor-Text with the right Styles AND I added a Syntax-Highlighter-Plugin (Code Snippet) for which I also want the right styles...

Can someone help me, how to format this with right styles?

Input:

Output:

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>

回答1:

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

来源：https://stackoverflow.com/questions/34981774/how-to-output-ckeditor-code-snippets-with-matching-styles