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