ckeditor syntaxhighlighter代码高亮插件配置分享

下面是详细的“ckeditor syntaxhighlighter代码高亮插件配置分享”的攻略：

1. 安装 SyntaxHighlighter 插件

首先，我们需要在我们的网站上安装 SyntaxHighlighter 插件。我们可以从其官方网站（http://alexgorbatchev.com），或者从 Github 上（https://github.com/syntaxhighlighter），下载最新版本的插件。

将文件解压后，将 SyntaxHighlighter 文件夹复制到我们网站的 plugins/ 目录下。

2. 引入插件文件

接着，我们需要在网站的 head 标签内引入 SyntaxHighlighter 插件文件。可以使用以下 CDN：

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.3.1/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.3.1/highlight.min.js"></script>

或者使用我们网站上的本地文件：

<link rel="stylesheet" type="text/css" href="/plugins/SyntaxHighlighter/styles/shCore.css">
<link rel="stylesheet" type="text/css" href="/plugins/SyntaxHighlighter/styles/shThemeDefault.css">
<script src="/plugins/SyntaxHighlighter/scripts/shCore.js"></script>
<script src="/plugins/SyntaxHighlighter/scripts/shBrushCpp.js"></script>
<script src="/plugins/SyntaxHighlighter/scripts/shBrushJava.js"></script>
<script src="/plugins/SyntaxHighlighter/scripts/shBrushPython.js"></script>

其中 shBrushCpp.js，shBrushJava.js 和 shBrushPython.js 是各种编程语言的高亮主题，可以根据自己需要调整。

3. 配置 CKEditor

接着，我们需要使用 CKEditor 的 config.js 文件来引入 SyntaxHighlighter 插件，并对其进行配置。

在 config.js 文件中添加以下内容：

CKEDITOR.editorConfig = function( config ) {
    // 将 SyntaxHighlighter 插件添加到 CKEditor 中
    config.extraPlugins = 'syntaxhighlighter';
    // 配置 SyntaxHighlighter 插件的选项
    config.syntaxhighlighter =
    {
      'code-class':'hljs',
      'toolbar':'true',
      'brushes': 'cpp;java;python'
    };
    // 其他的 CKEditor 配置选项
    config.toolbar = 'Full';
    config.height = 200;
    config.width = '100%';
};

其中 code-class 指定了用于高亮代码的 CSS 类名，默认为 brush；toolbar 指定了是否启用 CKEditor 的工具条；brushes 指定了支持的编程语言。

4. 在 CKEditor 中使用 SyntaxHighlighter

最后，在我们的 CKEditor 编辑器中，我们可以使用 <pre> 和 <code> 标签来包含我们的代码。并添加一个“Brush”类来指定语言。

下面是一个 C++ 代码示例：

<pre class="brush: cpp">
#include <iostream>

int main()
{
    std::cout << "Hello, world!" << std::endl;
    return 0;
}
</pre>

这个示例将会在页面中展示已经高亮的 C++ 代码。

另外，我们还可以使用 CKEditor 提供的 SyntaxHighlight 按钮来快速生成代码高亮的 <pre> 和 <code> 标签。

示例代码如下：

<p>
  Please check out the following code:<br>
  <textarea id="code" rows="10" cols="80">
    #include <iostream>

    int main()
    {
        std::cout << "Hello, world!" << std::endl;
        return 0;
    }
  </textarea>
</p>

<script>
    CKEDITOR.replace( 'code', {
      extraPlugins: 'syntaxhighlighter',
      height: 200,
      syntaxHighlighter_autoLoadSyntax: false, // Disable automatic language detection
      syntaxHighlighter_selectionWidget: true, // Enable widget that allow to change language
      syntaxhighlighter:
      {
        'code-class':'hljs',
        'toolbar':'true',
        'brushes': 'cpp;java;python'
      }
    });
</script>

以上就是完整的“ckeditor syntaxhighlighter代码高亮插件配置分享”的攻略，希望对您有所帮助。