Crayon-Syntax-Highlighterの設定のしかた｜ルクセリタス
WordPress のプラグイン Crayon-Syntax-Highlighterの主な項目の表示イメージや設定などについてまとめていきます。
Crayon-Syntax-Highlighter – Settings
プラグインのインストールが終わりましたらプラグインの欄の
Crayon-Syntax-Highlighter にあります Settings か管理画面のメニュー項目から設定画面を開きます。
日本語に変換する方法
セッティング画面は英語表記になっています。
大抵は マウスの右クリックで 日本語に翻訳 させることができます。
こちらで翻訳ができない場合 FTPファイルへの直接の編集で翻訳する方法もありますが
日本語翻訳で記事をまとめていますので参考にして頂ければと思います。
Settings – Theme （テーマ）
ボックスから テーマを選択します。
ランゲージ（言語）の設定変更によって ソースコードの色が変わります。
設定はこのプレビュー画面下の change the fallback language をクリックするか
設定画面下のプログラミング言語の項目で変更できます。
テーマのイメージや カスタマイズしたイメージを確認しながら設定していくことができます。
イメージのテーマを見つけるのは大変なのでいくつかピックアップしてみましたので良ければ参考にしてみてください。
CSSコードをサイト画面で分かりやすく表示できるプラグイン｜Crayon-Syntax-Highlighter
Customize – Toolbar
各設定の名称について分かりやすく表示してみました。
外観のポイントは ツールバーの設定になります。
チェックを入れていない項目もありますが こちらはお好みですのでご自由に選択してみてください。
Display the Toolbar ツールバーの表示の仕方について
On mouseOver マウスオーバーを選択した場合、１～３の設定をします。
1. ツールバーが表示される時、1段目の文章に重なって表示（オーバーレイ）するのか
1段目に重ならないように1段下がって表示（プッシュダウン）させるか
2. １で オーバーレイを選択した場合、
マウスのシングルクリックでツールバーを表示させたり、隠したりできる機能
Customize -Line
1. コード画面をストライプ状にする
＊選択するテーマによってこちらの機能が無い場合もあります。
2. 重要な行のマーキングを有効にする
こちらは投稿画面でマーキングを設定した場合その行に色がついて表示されます。
3. は行範囲の指定です。こちらはチェックなしで大丈夫です。
4. 5. 行番号の表示について
6. 7. 長文のコードの場合の表示のしかた
6. Wrap lines by default デフォルトで行を折り返す
7. Enable line warp toggling 行折り返しの有効化
長文のコードの場合 Toolbar にタグが表示され スライドバーが出現します。
コード全体が見やすいのは折り返し表示ですね。
どちらも選択しない場合、Toolbar にタグは表示されずにスライドバーが出現します。
Customize – Code
コードについては こちらの６項目 ツールバーに表示されるタグについての設定です。
タグのクリックで ＯＮ ＯＦＦ を切り替えることができます。
1.2. コードの表示
3. こちらのハイライトなしの状態の設定
4. コピー機能について
コピーのタグをクリックし全体選択されたら コピー＆ペーストします。
その他の比較
あとは プログラミング言語や フォントの設定で多少文字の感じが変わります。
プログラミング言語で比較
この設定で 文字色が少し変わります。実際のコードで表示しています。
フォント設定
フォントは テーマによって日本語の部分が イタリック書体にならないフォントで比較してみます。
記事作成 エディタ画面での使いかた
投稿のエディタ画面 右上にありますコードのマーク <> が
crayon-syntax-highlighter の入力画面になります。こちらをクリックします。
ポイントは タイトルとマークするライン マークするラインは先ほどの Line の項目の
2番 重要な行のマーキングを有効にする に チェックを付けている場合に 利用できる機能です。
１行ごとの設定は ,（カンマ）で区切り 数行の場合はマーキングしたい行
例えば 1-3 や 2-5 のようにハイフンをいれて記述します。
特に必要なければ 空白のままで大丈夫です。
コードの入力を済ませたら add （更新）をクリックして完了です。
画面下にテーマからコードまでのカスタマイズ設定画面がありますが
こちらの画面だけ、設定を変更したいときに使用します。