Pimcore CKEditor Syntax Highlight; Code Snippet

#1

PimcoreのデフォルトエディターであるCKEeditorのプラグイン、Code Snippetにより各種プログラムコードを強調表示させる方法について。
Pimcoreに限らずブログ用CMSでCKEditorが標準装備されている場合の参考にして下さい。
Syantaxhighlighterなどで強調表示させる方法もあるようですが、標準実装されているCKEditorのプラグインに同等の機能を有するものが幾つかあるのでこれを導入します。

今回導入するプラグインは、

Code Snippet


とそれに関連した次のプラグインです。

Widget

Line Utilities

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を読み込むページの<head>...</head>の部分に以下を追加します。

<head>
    ...
    <link href="ckeditor/plugins/codesnippet/lib/highlight/styles/default.css" rel="stylesheet">
    <script src="ckeditor/plugins/codesnippet/lib/highlight/highlight.pack.js"></script>
    <script>hljs.initHighlightingOnLoad();</script>
</head>

htmlホームディレクトリからのパスを指定して下さい。
ブラウザの検証機能でパスの設定などのエラーが検出されないか確認して下さい。
強調表示の色配分などは指定するcssを変更することで可能です。詳細はプラグインのページで確認して下さい。

0 Likes

#2

デフォルトのCSSでは半角スペース、タブ、改行をそのまま表示しないため white-space: pre; overflow-x: auto; を
/web/bundles/pimcoreadmin/js/lib/ckeditor/plugins/codesnippet/lib/highlight/styles 内で
使用するcssファイルに追加します。

.hljs {
  display: block;
  padding: 0.5em;
  background: #002b36;
  color: #839496;
  white-space: pre;
  overflow-x: auto;
}

各cssの配色は下記リンク参照。

https://highlightjs.org/static/demo/

0 Likes

#3

CKEditor4.9.2 full にバージョンアップ

ダウンロード
https://download.cksource.com/CKEditor/CKEditor/

Code Snippetの依存プラグインは、

Widget

Dialog

Lineutils

Widgedselection

上記プラグインは、一部中身のないホルダーのみ格納されているため、ダウンロード、インストールが必要です。

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';
};

Screenshot%20from%202018-10-03%2022-34-04

0 Likes

#4

CKEditorビルダーページによる各プラグインオプションの追加とスキンを指定してダウンロード

https://ckeditor.com/cke4/builder

ckeditor_builder

  1. Fullを選択
  2. Reset presetを押してcode snippet, source dialog を選択
  3. Moonoスキンを選択
  4. Optimizedをチェックしてダウンロード

config.jsは編集する必要はありません。

/var/www/test-site/web/bundles/pimcoreadmin/js/lib内のckeditorを削除後コピーします。

0 Likes