PimcoreのデフォルトエディターであるCKEeditorのプラグイン、Code Snippetにより各種プログラムコードを強調表示させる方法について。
Pimcoreに限らずブログ用CMSでCKEditorが標準装備されている場合の参考にして下さい。
[Syantaxhighlighter](http://alexgorbatchev.com/SyntaxHighlighter/)などで強調表示させる方法もあるようですが、標準実装されているCKEditorのプラグインに同等の機能を有するものが幾つかあるのでこれを導入します。
今回導入するプラグインは、
**Code Snippet**
> **[Code Snippet](https://ckeditor.com/cke4/addon/codesnippet)**
>
> This plugin lets you insert rich code snippets with syntax highlighting into the editor.
とそれに関連した次のプラグインです。
**Widget**
> **[Widget](https://ckeditor.com/cke4/addon/widget)**
>
> This plugin introduces the Widget API. It is required by all plugins that create widgets. Widgets let you standardize, manage and control the layout and style of specific sections of your WYSIWYG area, all this at the press of a button.
**Line Utilities**
> **[Line Utilities](https://ckeditor.com/cke4/addon/lineutils)**
>
> A set of utilities to find and create horizontal spaces in edited contents.
CKEditorのバージョンに合致するものをダウンロードして解凍します。
CKEditorのpluginsフォルダに解凍したフォルダをコピーします。
CKEditorの設定ファイルである **config.js** にプラグインの設定を記述します。
`config.extraPlugins = 'codesnippet,widget,lineutils';`
を追加します。
```
CKEDITOR.editorConfig = function( config ) {
// Define changes to default configuration here. For example:
// config.language = 'fr';
// config.uiColor = '#AADC6E';
config.extraPlugins = 'codesnippet,widget,lineutils';
};
```
CKEditorを読み込むページの`...`の部分に以下を追加します。
```
...
```
htmlホームディレクトリからのパスを指定して下さい。
ブラウザの検証機能でパスの設定などのエラーが検出されないか確認して下さい。
強調表示の色配分などは指定するcssを変更することで可能です。詳細はプラグインのページで確認して下さい。
---
**CKEditor4.9.2 full にバージョンアップ**
**ダウンロード**
[https://download.cksource.com/CKEditor/CKEditor/](https://download.cksource.com/CKEditor/CKEditor/)
Code Snippetの依存プラグインは、
**Widget**
> **[Widget](https://ckeditor.com/cke4/addon/widget)**
>
> This plugin introduces the Widget API. It is required by all plugins that create widgets. Widgets let you standardize, manage and control the layout and style of specific sections of your WYSIWYG area, all this at the press of a button.
**Dialog**
> **[Dialog](https://ckeditor.com/cke4/addon/dialog)**
>
> This plugin provides the dialog API for other plugins to build an editor dialog from a definition object.
**Lineutils**
> **[Line Utilities](https://ckeditor.com/cke4/addon/lineutils)**
>
> A set of utilities to find and create horizontal spaces in edited contents.
**Widgedselection**
> **[Widget Selection](https://ckeditor.com/cke4/addon/widgetselection)**
>
> This plugin improves selection handling for Widget elements. Due to some browser bugs additional handling is required to allow the widget selection.
上記プラグインは、一部中身のないホルダーのみ格納されているため、ダウンロード、インストールが必要です。
CKEditorの設定ファイルである **config.js** には **Code Snippet** のプラグインのみを記述します。
```
CKEDITOR.editorConfig = function( config ) {
// Define changes to default configuration here. For example:
// config.language = 'fr';
// config.uiColor = '#AADC6E';
config.extraPlugins = 'codesnippet';
};
```
---