<>

Crayon-Syntax-Highlighterの設定のしかた|ルクセリタス

WordPress のプラグイン Crayon-Syntax-Highlighterの主な項目の表示イメージや設定などについてまとめていきます。

Crayon-Syntax-Highlighter – Settings

プラグインのインストールが終わりましたらプラグインの欄の
Crayon-Syntax-Highlighter にあります Settings か管理画面のメニュー項目から設定画面を開きます。

日本語に変換する方法

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

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

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

Settings – Theme (テーマ)

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

ランゲージ(言語)の設定変更によって ソースコードの色が変わります。
設定はこのプレビュー画面下の change the fallback language をクリックするか
設定画面下のプログラミング言語の項目で変更できます。

テーマのイメージや カスタマイズしたイメージを確認しながら設定していくことができます。

イメージのテーマを見つけるのは大変なのでいくつかピックアップしてみましたので良ければ参考にしてみてください。

CSSコードをサイト画面で分かりやすく表示できるプラグイン|Crayon-Syntax-Highlighter

Customize – Toolbar

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

外観のポイントは ツールバーの設定になります。
チェックを入れていない項目もありますが  こちらはお好みですのでご自由に選択してみてください。
Crayon-Syntax-Highlighter-Setting解説-toolbar

Display the Toolbar ツールバーの表示の仕方について
On mouseOver   マウスオーバーを選択した場合、1~3の設定をします。
Crayon-Settings画面-マウスオーバーのイメージ画像

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

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

Customize -Line

Crayon-Syntax-Highlighter-Setting解説-line

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

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

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

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

6. 7. 長文のコードの場合の表示のしかた
6. Wrap lines by default  デフォルトで行を折り返す
7. Enable line warp toggling 行折り返しの有効化
折り返しタグのイメージ画像

長文のコードの場合  Toolbar にタグが表示され スライドバーが出現します。

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

Customize – Code

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

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

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

その他の比較

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

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

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

フォント設定

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

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

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

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

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

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

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

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