<>

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 （テーマ）

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

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

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

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

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

Customize – Toolbar

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

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

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

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

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

Customize -Line

Crayon-Syntax-Highlighter-Setting解説-line


これが ストライプのイメージと５．６.７行目にマーキングを入れたイメージになります。

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

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

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

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

その他の比較

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

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

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

フォント設定

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

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

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

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

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

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

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

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

プラグインCSSコードエディタ,plugin

Posted by 45