Crayon-Syntax-Highlighter でサイトにCSSコードを分かりやすく表示 【プラグイン】

Webサイトの投稿記事内に HTML や CSSなどのソースコードを
分かりやすく表示させることができるのが Syntax-Highlighter エディタ画面です。

Highlighter とは 蛍光ペン という意味で コードの種類ごとに
色分けされ 強調されることで とても見やすい画面になることが特徴です。

その中でも Crayon-Syntax-Highlighter はカラフルでポップなものから
モノトーンのシックでカッコいいものまで たくさんの テーマ があり
サイトのイメージにあった画面を設定することができます。

使い方はかんたんで WordPress ではプラグインをインストールするだけでかんたんに設定できます。

Crayon-Syntax-Highlighter テーマの一例

Crayon-Syntax-Highlighter> はテーマがたくさんありますので
その一部だけですが 抜粋してデザインを見ていきます。

1c-Kod

809finest

Ado

Amity

capacitacionti

Cg-cookie

Coy

Dark-terminal

Epicgeeks

ここに挙げたテーマのデザインから さらに 行のストライプ表示や
行番号の非表示など カスタマイズすることもできます。

テーマのカスタマイズ

テーマのカスタマイズは　Font や 文字サイズと 言語（language）選択
ツールバーやラインなどの 外観のイメージなどで多様に変化します。

分かりやすく こちらのテーマ Flatui Light でカスタマイズしてみます。

こちらが 何もカスタマイズされていない状態の シンプルなコード表示になります。

ツールバー・行番号・行をストライプで分かりやすく表示などを設定しました。
同じエディタでも カスタマイズでイメージが変わるのがお分かりいただけたと思います。

プラグインのインストール

プラグインの 新規追加から Crayon を検索します。

似たようなプラグインも多数表示されますが
少し下の方にこちらのプラグインがあるので探してみてください。

詳細画面はこんな感じです。
ここでは この私が今使用しているバージョンでは未検証と表示されます。

このプラグイン自体が 更新されていませんので新しいバージョンほど
未検証となってしまうのですが、ほぼ 正常に使用できていますので問題ないと思います。

行番号に対して文字がずれてしまうという現象が起こりましたが
コードを書き換えることで改善されましたので 問題なくご利用して頂けると思います。

文字のズレに関しましては こちらでご紹介していますので 合わせてご覧ください。

インストールできましたら 有効 にし セッティングに進みます。

---

続きはこちら→ Crayon-Syntax-Highlighter – 日本語変換と各項目の設定のしかた【WordPress プラグイン】