如何输出匹配样式的 CKEditor 代码片段

Question

我有问题要问 CKEditor... 首先，我必须说，我现在搜索了 3 个多小时，但我不知道，如果我太糟糕了，或者为什么我什么也没找到…… 我正在寻找一种方法，如何使用正确的样式输出 CKEditor-Text AND 我添加了一个 Syntax-Highlighter-Plugin (Code Snippet) 我也想要正确的风格...

谁能帮帮我，如何用正确的样式格式化它？

输入：

输出：

代码：

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

Answer 1

你说你已经找了 3 个小时的答案有点好笑，因为它在官方 documentation for this feature 中有解释。有时只检查文档是有意义的，可能 :)

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. (...)

阅读更多详细信息并在此处获取一些代码：http://docs.ckeditor.com/#!/guide/dev_codesnippet-section-target-page

如何输出匹配样式的 CKEditor 代码片段

How to output CKEditor code snippets with matching styles

javascript

css

ckeditor

wysiwyg

Target Page