Crayon-Syntax-Highlighter設定｜サイトにCSSコードを分かりやすく表示 【プラグイン】
Webサイトの投稿記事内に HTML や CSSなどのソースコードを
分かりやすく表示させることができるのが Syntax-Highlighter エディタ画面です。
Highlighter とは 蛍光ペン という意味で コードの種類ごとに
色分けされ 強調されることで とても見やすい画面になることが特徴です。
その中でも Crayon-Syntax-Highlighter はカラフルでポップなものから
モノトーンのシックでカッコいいものまで たくさんの テーマ があり
サイトのイメージにあった画面を設定することができます。
使い方はかんたんで WordPress ではプラグインをインストールするだけでかんたんに設定できます。
Crayon-Syntax-Highlighter テーマの一例
Crayon-Syntax-Highlighter はテーマがたくさんありますので
その一部だけですが 抜粋してデザインを見ていきます。
テーマは 実際のCSSコードを使って表示しています。
使うコードの種類によってカラーが設定されているため Crayon 設定画面でのサンプル画像と色合いが違っています。
シンプル系 ストライプ ありのテーマ 1c kod / Epicgeeks
ナンバー部分の強調されたテーマ Ado / Amity
パステル調の背景のテーマ Coy / Raygun
ダーク系 809finest / capacitacionti / Cg cookie / Dark-terminal
ここに挙げたテーマのデザインから さらに「行」のストライプ表示や
行番号の非表示など カスタマイズすることもできます。
テーマのカスタマイズ
テーマのカスタマイズは Font や 文字サイズと 言語（language）選択
ツールバーやラインなどの 外観のイメージなどで多様に変化します。
分かりやすく こちらのテーマ Flatui Light でカスタマイズしてみます。
こちらが 何もカスタマイズされていない状態の シンプルなコード表示になります。
ツールバー・行番号・行をストライプで分かりやすく表示などを設定しました。
同じエディタでも カスタマイズでイメージが変わるのがお分かりいただけたと思います。
Crayon のインストール方法
プラグインをインストールしていきますが このインストール画面、
現在使用しているバージョンでは未検証と表示されます。
プラグインからはインストールできない！？
プラグインの更新が止まってしまっているため正常に作動するか検証されていないようですが
４年前の時点では まだ問題なく使用することができました。
ですが2022年 現在、phpのバージョンアップによって 重大なエラーが発生してしまい
通常のプラグイン画面からも正常にインストールすることができなくなりました。
GitHub-Crunchify からダウンロード
重大なエラーが起こってしまった箇所を修正し サポートしてくれているのが
GitHub-Crunchify です。
GitHub-Crunchify – crayon-syntax-highlighterとPHP7.3の修正
このサイトから 修正されたCrayon のプラグインをダウンロードし
プラグインの新規追加からアップロードさせることでインストールします。
設定方法についてはこちらを参考にお願いします。
https://eureka45.net/wp-site/php-update/インストールできましたら 有効 にし セッティングに進みます。
Crayon-Syntax-Highlighter – Settings
Setting画面の開け方はインストール済み プラグインの欄の
Crayon-Syntax-Highlighter にあります Settings を押していただくか
管理画面のメニュー項目 設定 → Crayon のタブをクリックします。
日本語に変換する方法
セッティング画面は英語表記になっています。
大抵は マウスの右クリックで 日本語に翻訳 させることができます。
こちらで翻訳ができない場合 FTPファイルを編集することで翻訳できるのですが
日本語翻訳で記事をまとめていますので参考にして頂ければと思います。
Settings – Theme （テーマ）
ボックスから テーマを選択します。
プレビュー画面下の change the fallback language ランゲージ（言語）の変更画面へ移動でき
言語によって ソースコードの表示される色がかわります。
プレビュー画面下のチェックボックス
☑ Enable Live Preview リアルタイムのプレビュー画面を有効にする
テーマのイメージや カスタマイズしたイメージを確認しながら設定していくことができます。
Customize – Toolbar
各設定の名称について分かりやすく表示してみました。
外観のポイントは ツールバーの設定になります。
チェックを入れていない項目もありますが こちらはお好みですのでご自由に選択してみてください。
Display the Toolbar ツールバーの表示の仕方について
On mouseOver マウスオーバーを選択した場合、１～３の設定をします。
１ ツールバーが表示される時、1段目の文章に重なって表示（オーバーレイ）するのか
1段目に重ならないように1段下がって表示（プッシュダウン）させるか
２ １で オーバーレイを選択した場合、
マウスのシングルクリックでツールバーを表示させたり、隠したりできる機能
Customize -Line
１ コード画面をストライプ状にする
＊選択するテーマによってこちらの機能が無い場合もあります。
２ 重要な行のマーキングを有効にする
こちらは投稿画面でマーキングを設定した場合その行に色がついて表示されます。
３ は行範囲の指定です。こちらはチェックなしで大丈夫です。
４ ５ 行番号の表示について
6 7 長文のコードの場合の表示のしかた
６ Wrap lines by default デフォルトで行を折り返す
７ Enable line warp toggling 行折り返しの有効化
長文のコードの場合 Toolbar にタグが表示され スライドバーが出現します。
コード全体が見やすいのは折り返し表示ですね。
どちらも選択しない場合、Toolbar にタグは表示されずにスライドバーが出現します。
Customize – Code
コードについては こちらの６項目 ツールバーに表示されるタグについての設定です。
タグのクリックで ＯＮ ＯＦＦ を切り替えることができます。
１ 2 コードの表示
３ はこちらのハイライトなしの状態の設定
４ コピー機能について
コピーのタグをクリックし全体選択されたら コピー＆ペーストします。
その他の比較
あとは プログラミング言語や フォントの設定で多少文字の感じが変わります。
プログラミング言語で比較
この設定で 文字色が少し変わります。実際のコードで表示しています。
フォント設定
フォントは テーマによって日本語の部分が イタリック書体にならないフォントで比較してみます。
記事作成 エディタ画面での使いかた
投稿のエディタ画面 右上にありますコードのマーク <> が
crayon-syntax-highlighter の入力画面になります。こちらをクリックします。
ポイントは タイトルとマークするライン マークするラインは先ほどの Line の項目の
2番 重要な行のマーキングを有効にする に チェックを付けている場合に 利用できる機能です。
１行ごとの設定は ,（カンマ）で区切り 数行の場合はマーキングしたい行
例えば 1-3 や 2-5 のようにハイフンをいれて記述します。
特に必要なければ 空白のままで大丈夫です。
コードの入力を済ませたら add （更新）をクリックして完了です。
画面下にテーマからコードまでのカスタマイズ設定画面がありますが
こちらの画面だけ、設定を変更したいときに使用します。