SyntaxHighlighter配合CKEditor插件轻松打造代码语法着色

要实现SyntaxHighlighter配合CKEditor插件以轻松在网页上打造代码语法着色，你需要首先确保你的网页已经集成了CKEditor，并且你拥有SyntaxHighlighter的JavaScript库。以下是一个基本的实现步骤和示例代码，帮助你将两者结合起来。

### 第一步：引入CKEditor和SyntaxHighlighter

确保你的HTML页面中已经包含了CKEditor和SyntaxHighlighter的CSS和JavaScript文件。你可以从它们的官方网站下载这些文件，或者使用CDN链接。

<!-- 引入CKEditor -->
<script src="https://cdn.ckeditor.com/4.17.2/standard/ckeditor.js"></script>

<!-- 引入SyntaxHighlighter的CSS和JS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shCore.css" rel="stylesheet" type="text/css" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shThemeDefault.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shCore.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushJScript.js" type="text/javascript"></script>
<!-- 根据需要引入其他语言的brush -->

### 第二步：配置CKEditor以支持代码块

CKEditor默认可能不支持直接插入带有语法着色的代码块。你可以通过自定义CKEditor的插件或扩展其功能来实现这一点，但更简单的方法是直接在编辑器中插入`

...

`这样的HTML代码块，并在编辑器内容加载或提交到服务器后，使用SyntaxHighlighter进行渲染。

### 第三步：在页面加载时应用SyntaxHighlighter

在页面加载完成后，你可以使用SyntaxHighlighter的API来自动渲染页面上所有的`

...

`块。

<script type="text/javascript">
  SyntaxHighlighter.all();
</script>

这行代码会查找页面上所有的`

...

`块，并根据``标签的`class`属性中的`brush:`值来应用相应的语法着色。

### 注意事项

- 确保你的``标签中的`class`属性正确设置了`brush:`值，比如`brush: js;`表示JavaScript语法着色。

- 如果你希望动态地添加代码块到编辑器中并实时渲染，你可能需要在添加新内容到编辑器后，手动调用`SyntaxHighlighter.highlight()`方法或重新调用`SyntaxHighlighter.all()`来更新渲染。

通过上述步骤，你可以在集成了CKEditor的网页上轻松实现代码语法的着色功能。