<>

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

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

Crayon-Syntax-Highlighterのデザインイメージ画像

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

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

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

Crayon-Syntax-Highlighter テーマの一例

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

1c-Kod
Crayon-Syntax-Highlighter-1c-Kod - シンプルなデザインのエディタ

809finest
Crayon-Syntax-Highlighter-809finest- 背景色が紺と赤と白の文字色

Ado
Crayon-Syntax-Highlighter-Ado- 行番号の部分がモノトーンのシンプルなエディタ

Amity
Crayon-Syntax-Highlighter-Amity- 行番号がグレーのシンプルなエディタ

capacitacionti
Crayon-Syntax-Highlighter-capacitacionti- 背景色がブルーグリーンとイエローの文字色のコントラストがカッコいいエディタ

Cg-cookie
Crayon-Syntax-Highlighter-Cg-cookie- 背景色と行番号全体が黒のオレンジの文字色を基調としたエディタ

Coy
Crayon-Syntax-Highlighter-Coy- ライトグレーの枠にペールブルーの背景色。全体にやさしいイメージのエディタ

Dark-terminal
Crayon-Syntax-Highlighter-Dark-terminal- 背景色がブラック・文字が白というシンプルかつカッコいいエディタ

Epicgeeks
Crayon-Syntax-Highlighter-Epicgeeks- 全体的にパステル調のイメージで行番号と背景にイエローやオレンジを使用

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

テーマのカスタマイズ

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

分かりやすく こちらのテーマ Flatui Light でカスタマイズしてみます。
Crayon-Stock-Theme-Flatui-Light-カスタマイズ前のイメージ画像
こちらが 何もカスタマイズされていない状態の シンプルなコード表示になります。

Crayon-Stock-Theme-Flatui-Light-カスタマイズ後のイメージ画像

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

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

プラグインの 新規追加から Crayon を検索します。
プラグイン-crayon-Syntax-Highlighter の画像
似たようなプラグインも多数表示されますが
少し下の方にこちらのプラグインがあるので探してみてください。
crayon-Syntax-Highlighter-プラグイン詳細画面
詳細画面はこんな感じです。
ここでは この私が今使用しているバージョンでは未検証と表示されます。

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

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

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

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


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