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

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

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

関連記事

Crayon-Syntax-Highlighter の使いかたはこちら
CSSコードをサイトに表示させるなら Crayon-Syntax-Highlighter【プラグイン】

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

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

Crayon-編集1-基本のデザイン-エディタを複製する
テーマは、イメージに近いものから選択するのが良いでしょう。
テーマを選択したら Duplicate 複製する を選択します。

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

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

テーマの編集

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

Crayon-編集5-情報画面 - エディタ名の変更
i  情報画面ではエディタ名を編集することができます。

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

Crayon-編集6-背景色のカスタマイズ画面
初めに背景の設定をしていきます。 文字色は背景の色によって見え方に影響が出るので
先に背景の設定をするのが望ましいと思います。

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

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

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

文字色の設定

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

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

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

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

編集したデザインが反映されない!?

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

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

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

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

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

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

プラグイン