【プラグイン】Crayon-Syntax-Highlighter をカスタマイズする方法

WordPressのプラグイン Crayon-Syntax-Highlighter は
サイト内で CSSコードなどを分かりやすく表示させるための
テキストエディタになります。

プラグインをインストールするだけで 数種類のエディタテーマから
自身のサイトイメージに合ったものを使用することができますが
さらに、こちらをカスタマイズすることで よりオリジナルの
テキストエディタにすることが可能となります。

Crayon-Syntax-Highlighter のカスタマイズ

管理画面かの設定から Crayon を開きます。

テーマは、イメージに近いものから選択するのが良いでしょう。
テーマを選択したら Duplicate 複製する を選択します。

オリジナルのテーマ名を設定します。 こちらは後で 何度でも変更できます。

複製されたテーマは 編集画面から編集・削除することができます。
作成したエディタを submit 参加する から公開することもできます。

テーマの編集

編集画面をクリックすると、左にプレビュー画面と右側に各項目の編集画面が表示されます。

i  情報画面ではエディタ名を編集することができます。

ライン – 背景 – のカスタマイズ

初めに背景の設定をしていきます。 文字色は背景の色によって見え方に影響が出るので
先に背景の設定をするのが望ましいと思います。

各項目の色の部分をクリックすると このような色の設定画面が表示されます。
いろんな方法でかんたんにイメージの色を表示することができます。

イメージが決まったら OK をクリック
キャンセル以外はすべて変更されてしまいますので気を付けてください！！

フレーム・番号・ツールバー も 同じ要領で設定していってください。

文字色の設定

文字色の設定は 特に必要ない場合もありますが
今回選択した SublimeTextでは 背景の黒に合わせて白を使用しているコードが多いようです。

濃い色のテーマでは白や薄い色を使用している場合が多く
薄い色に変更した場合などは コードが見えなくなってしまうことがありますので
変更する必要があります。

文字色の編集画面では、たくさんの項目がありますが CSSで使用するコードは主に、6つ。
本格的なプログラミングなどではないのでこの辺を押さえておけばいいかと思います。

1. Comment  /**/などを使用するコメント
2. String　under や FontAwesome のコードなど
3. Entity　CSSコードのプロパティなど
4. Identifier　CSSコードの値　色・サイズなど
5. Keyword　CSSコードのセレクタ　場所の指定
6. Type　class などのコード

編集したデザインが反映されない！？

一度では なかなか全体のバランスが思うようにいかないと思います。
私も何度も設定しなおしました。

その都度、保存をしますがサイトの画面上で
編集したデザインが反映されていませんでした。

原因は、テーマの名前です。
メディアのアップロードでも同じですが、同じ名前のモノは
初めのモノからアップロードされずにいますので 名前を変更する必要があります。

ですので、テーマを作成する場合、ほんとに仮の名前で設定しておいて
編集のたびに “0" ゼロを足してみたりして名前を変更・保存していました。

最終、納得のいくデザインに仕上がったら、正式な名称を付けてあげると
いう方法が いいのではないでしょうか？

凝りだすと、大変時間のかかる作業ですが、ぜひ一度
オリジナルのテーマを作成してみてください！！