<>

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-Stock-Theme-Flatui-Light-カスタマイズ後のイメージ画像

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

Crayon のインストール方法

プラグインをインストールしていきますが このインストール画面、
現在使用しているバージョンでは未検証と表示されます。

プラグイン-crayon-Syntax-Highlighter の画像

プラグインからはインストールできない!?

プラグインの更新が止まってしまっているため正常に作動するか検証されていないようですが
4年前の時点では まだ問題なく使用することができました。

ですが2022年 現在、phpのバージョンアップによって 重大なエラーが発生してしまい
通常のプラグイン画面からも正常にインストールすることができなくなりました。

GitHub-Crunchify からダウンロード

重大なエラーが起こってしまった箇所を修正し サポートしてくれているのが
GitHub-Crunchify です。
GitHub-Crunchify – crayon-syntax-highlighterとPHP7.3の修正

このサイトから 修正されたCrayon のプラグインをダウンロードし
プラグインの新規追加からアップロードさせることでインストールします。

設定方法についてはこちらを参考にお願いします。

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

Crayon-Syntax-Highlighter – Settings

Setting画面の開け方はインストール済み プラグインの欄の
Crayon-Syntax-Highlighter にあります Settings を押していただくか
管理画面のメニュー項目 設定 → Crayon のタブをクリックします。

日本語に変換する方法

セッティング画面は英語表記になっています。
大抵は マウスの右クリックで 日本語に翻訳 させることができます。

マウスを使って翻訳する方法

こちらで翻訳ができない場合 FTPファイルを編集することで翻訳できるのですが
日本語翻訳で記事をまとめていますので参考にして頂ければと思います。

Settings – Theme (テーマ)

ボックスから テーマを選択します。
Crayon-Settings-Themeの選択とプレビュー画面

プレビュー画面下の change the fallback language ランゲージ(言語)の変更画面へ移動でき
言語によって ソースコードの表示される色がかわります。

プレビュー画面下のチェックボックス
Enable Live Preview リアルタイムのプレビュー画面を有効にする
テーマのイメージや カスタマイズしたイメージを確認しながら設定していくことができます。

Customize – Toolbar

各設定の名称について分かりやすく表示してみました。
Crayon-画面名称を分かりやすく図解

外観のポイントは ツールバーの設定になります。
チェックを入れていない項目もありますが  こちらはお好みですのでご自由に選択してみてください。
Crayon-Syntax-Highlighter-Setting解説-toolbar
Display the Toolbar  ツールバーの表示の仕方について
On mouseOver   マウスオーバーを選択した場合、1~3の設定をします。
Crayon-Settings画面-マウスオーバーのイメージ画像

ツールバーが表示される時、1段目の文章に重なって表示(オーバーレイ)するのか
1段目に重ならないように1段下がって表示(プッシュダウン)させるか
Toolbar-Overlayのイメージ画像

1で オーバーレイを選択した場合、
マウスのシングルクリックでツールバーを表示させたり、隠したりできる機能

Customize -Line

Crayon-Syntax-Highlighter-Setting解説-line

Crayon-カスタマイズーストライプとマーキング設定したイメージ画像
コード画面をストライプ状にする
選択するテーマによってこちらの機能が無い場合もあります。

重要な行のマーキングを有効にする
こちらは投稿画面でマーキングを設定した場合その行に色がついて表示されます。

は行範囲の指定です。こちらはチェックなしで大丈夫です。

4 5 行番号の表示について
Crayon-Tag-Line-numberの画像

6  7 長文のコードの場合の表示のしかた
折り返しタグのイメージ画像
Wrap lines by default  デフォルトで行を折り返す
7  Enable line warp toggling 行折り返しの有効化
長文のコードの場合  Toolbar にタグが表示され スライドバーが出現します。

コード全体が見やすいのは折り返し表示ですね。
どちらも選択しない場合、Toolbar にタグは表示されずにスライドバーが出現します。

Customize – Code

コードについては こちらの6項目 ツールバーに表示されるタグについての設定です。
タグのクリックで ON  OFF を切り替えることができます。
Crayon-Syntax-Highlighter-Setting解説-code

1 2 コードの表示
はこちらのハイライトなしの状態の設定
コードタグをクリックした時のイメージ画像

4 コピー機能について
コピーをクリックした時のイメージ画像
コピーのタグをクリックし全体選択されたら コピー&ペーストします。

その他の比較

あとは プログラミング言語や フォントの設定で多少文字の感じが変わります。

プログラミング言語で比較

この設定で 文字色が少し変わります。実際のコードで表示しています。

フォント設定

フォントは テーマによって日本語の部分が イタリック書体にならないフォントで比較してみます。

記事作成 エディタ画面での使いかた

Crayon投稿画面での使いかた-投稿エディタ画面
投稿のエディタ画面 右上にありますコードのマーク <> 
crayon-syntax-highlighter の入力画面になります。こちらをクリックします。

Crayon投稿画面での使いかた-コード入力画面

ポイントは タイトルとマークするライン マークするラインは先ほどの Line の項目の
2番 重要な行のマーキングを有効にする チェックを付けている場合に 利用できる機能です。

1行ごとの設定は ,(カンマ)で区切り 数行の場合はマーキングしたい行
例えば 1-3 や 2-5 のようにハイフンをいれて記述します。

特に必要なければ 空白のままで大丈夫です。
コードの入力を済ませたら add (更新)をクリックして完了です。

画面下にテーマからコードまでのカスタマイズ設定画面がありますが
こちらの画面だけ、設定を変更したいときに使用します。