Crayon Syntax Highlighterプラグインの設定方法と使い方を徹底解説

この記事では、Crayon Syntax Highlighterプラグインのインストールから基本的な使い方、これだけはやっておいた方が良いという設定を中心にまとめております。

プラグインの特徴やメリットなどについては、前回の記事で紹介していますので、以下の関連記事と合わせて見てていただけると幸いです。

STORKでコードを<pre>表示するにはCrayon Syntax Highlighterを併用しよう

2019年2月5日

Crayon Syntax Highlighterのインストール方法

WordPress管理画面の「プラグイン」から「新規追加」に進み、「Crayon Syntax Highlighter」を検索します。
Crayon Syntax Highlighterプラグインの設定方法と使い方を徹底解説

Crayon Syntax Highlighterプラグインをインストールして有効化します。
Crayon Syntax Highlighterプラグインの設定方法と使い方を徹底解説

有効化したら、管理画面の「設定」から「Crayon」をクリックします。
Crayon Syntax Highlighterプラグインの設定方法と使い方を徹底解説

Crayon Syntax Highlighterの基本設定

Crayon Syntax Highlighterの設定画面に進むと分かりますが、設定項目は非常に多いです。
でも、以下の最低限の設定だけチェックしておけば大きな問題はありません。

Crayon Syntax Highlighterの基本設定
  1. 管理画面の日本語化
  2. テーマの変更
  3. ツールバーの表示設定
  4. 行の折り返し表示
  5. その他チェックしておくポイント

それでは1つずつ見ていきます。

Crayon Syntax Highlighterで管理画面の日本語化

Crayon Syntax Highlighterの管理画面は、初期状態では英語表記になっています。
Crayon Syntax Highlighterプラグインの設定方法と使い方を徹底解説

この画面を日本語に翻訳することができるのですが、日本語化するにはFTPが必要があります。

FTP
サーバーとパソコンの間でファイルを転送したり、サーバー上のファイルを編集するにはFTPというソフトが必要です。Macの話になりますが、オススメのFTPソフトはFileZillaです。

FileZillaの使い方は別のコンテンツで紹介しますが、この記事ではFileZillaでサーバーに接続したという前提で進めます。

FTPでサーバーに接続し、wp-content/language/plugins/フォルダにアクセスします。
Crayon Syntax Highlighterプラグインの設定方法と使い方を徹底解説

フォルダ内に以下の2つのファイルがあるので、

crayon-syntax-highlighter-ja.mo
crayon-syntax-highlighter-ja.po
これらをサーバーから削除してください。
Crayon Syntax Highlighterプラグインの設定方法と使い方を徹底解説

削除したら、再び管理画面の「設定」から「Crayon」メニューをクリックして、
Crayon Syntax Highlighterプラグインの設定方法と使い方を徹底解説

画面が日本語化されていることを確認します。
Crayon Syntax Highlighterプラグインの設定方法と使い方を徹底解説

注意点
プラグインをバージョンアップするたびに、サーバー上で言語ファイルが自動で生成されます。なので、バージョンアップ後は一旦、画面が英語表示に戻ってしまいますが、上記手順で2つの言語ファイルを消去すれば日本語化されます。

テーマの変更

プラグインバージョン2.8.4で使えるテーマは100種類以上あります。
Crayon Syntax Highlighterプラグインの設定方法と使い方を徹底解説

具体的にはこんなテーマや、
Crayon Syntax Highlighterプラグインの設定方法と使い方を徹底解説

こんな感じのテーマ、
Crayon Syntax Highlighterプラグインの設定方法と使い方を徹底解説

他にも、GithubやSublime Text、Xcodeなんかもありますので、好みのテーマを選んでみてください。
Crayon Syntax Highlighterプラグインの設定方法と使い方を徹底解説
Crayon Syntax Highlighterプラグインの設定方法と使い方を徹底解説
Crayon Syntax Highlighterプラグインの設定方法と使い方を徹底解説

Crayon Syntax Highlighterプラグインのテーマサンプル一挙紹介【2019年版】

2019年5月13日

ツールバーの表示設定

ソースを選択してコピーできるようにしたり、拡大表示するためのツールバー。
Crayon Syntax Highlighterプラグインの設定方法と使い方を徹底解説

初期設定は「マウスオーバー時」になっていますが、ソースコード部分にマウスが乗るたびにピコピコ動くのが嫌だなという人は「常に表示」か「表示しない」にしておくことをオススメします。(個人的には「常に表示」が良いかなと思います。)
Crayon Syntax Highlighterプラグインの設定方法と使い方を徹底解説

コードの折り返し表示

長いソースコードを<pre>で囲むと、下図のようにスクロールバーによって省略して表示されます。
Crayon Syntax Highlighterプラグインの設定方法と使い方を徹底解説

ツールバーを使って折り返し表示にすることもできますが、最初から折り返しさせておいた方が可読性が良いので、行設定の「Wrap lines by default」にチェックを入れておくと良いです。
Crayon Syntax Highlighterプラグインの設定方法と使い方を徹底解説

こんな感じでわかりやすくなりますね。
Crayon Syntax Highlighterプラグインの設定方法と使い方を徹底解説

その他チェックしておくポイント

あとは基本的には初期設定のままでいいですが、以下の3箇所を最後に確認しておきましょう。

フィント

ハイライト表示させる際のフォントの種類や文字サイズを変更することができます。この辺はお好みで設定値を変更すると良いです。
Crayon Syntax Highlighterプラグインの設定方法と使い方を徹底解説

サイズ

ハイライト表示させる要素のサイズ(横幅x高さ)や余白の調整を行います。
Crayon Syntax Highlighterプラグインの設定方法と使い方を徹底解説

高さ、横幅のチェックを外しておくことでブラウザの幅に応じたサイズで表示され、レスポンシブ対応のブログでも適切に表示してくれますが、自由にサイズを指定することもできます。

このブログではSTORKのテーマを使っていますが、STORKだと最初からレスポンシブ対応のテーマなので、サイズは特に変更する必要はないです。

その他

ページ下部のその他の欄ですが、ここは主に読み込みの最適化を行うなどパフォーマンス関連の設定です。

1点だけ「必要な時だけCrayonのCSSとJavaScriptを読み込むように試みる」にチェックをしておきましょう。他は、基本このままでOKです。
Crayon Syntax Highlighterプラグインの設定方法と使い方を徹底解説

Crayon Syntax Highlighterの使い方

それでは実際にCrayon Syntax Highlighterでどのようにソースコードをハイライト表示させるかについて紹介します。

Crayon Syntax Highlighterの使い方
◎preタグで囲む
◎特定の行を強調する
◎特定の行数のコードのみ表示する
◎言語(CSSやJavacript、PHPなど)を指定する

preタグで囲む

まずは基本的な使い方して、本文中のハイライト表示したいソースコードをマウスで選択して、「< >」ボタンをクリックします。
(テキストエディタの場合、 ハイライトしたいコードの前後を<pre>で囲みます。)
Crayon Syntax Highlighterプラグインの設定方法と使い方を徹底解説

そうすると、Add Codeという画面が起動するので、コード内の記述を確認してから画面右上の「挿入」リンクをクリックします。
Crayon Syntax Highlighterプラグインの設定方法と使い方を徹底解説

こんな感じで本文にコードが挿入されました。(実際のデザインは、設定ページの「テーマ」で選んだものが表示されます。)
Crayon Syntax Highlighterプラグインの設定方法と使い方を徹底解説

特定の行を強調する

続いて、ソースコードの中の特定の行だけを強調表示したい場合ですが、Add Codeの画面でマークするラインに強調したい行番号を入れるだけでOKです。
(テキストエディタだと<pre class=”mark:2″>のようにmarkのclassを使います。)
Crayon Syntax Highlighterプラグインの設定方法と使い方を徹底解説

すると、こんな感じで強調表示されます。(テーマにより強調色は異なります。)
Crayon Syntax Highlighterプラグインの設定方法と使い方を徹底解説

また、複数行を強調表示させることもできるようになっていますが、設定方法は以下の関連記事の方にまとめていますので、合わせて参考にしてもらえればと思います。

STORKでコードを<pre>表示するにはCrayon Syntax Highlighterを併用しよう

2019年2月5日

特定の行数のコードのみ表示する

ソースコードの中で特定の範囲(例えば2行目から5行目まで)だけをハイライト表示させることもできます。これもAdd Codeの画面でLine Rangeに表示したい行番号を入れます。例えば、2行目から4行目までを表示させる場合は2-4となります。
Crayon Syntax Highlighterプラグインの設定方法と使い方を徹底解説

下図のように、指定された行だけが表示されるようになります。
Crayon Syntax Highlighterプラグインの設定方法と使い方を徹底解説

言語(CSSやJavacript、PHPなど)を指定する

ソースの言語を指定することもできます。
例えばコードがjavascriptの場合、プログラム言語から「javascript」を選択します。
Crayon Syntax Highlighterプラグインの設定方法と使い方を徹底解説

すると、このように表示されます。
Crayon Syntax Highlighterプラグインの設定方法と使い方を徹底解説

言語は指定しなくても適切なカラーで見やすく表示してくれるので、必須ではありません。
また、言語別にどのように表示が変わって見えるかについては、詳しいやり方を以下の関連記事でまとめていますので参考にしてみてくださいね。

STORKでコードを<pre>表示するにはCrayon Syntax Highlighterを併用しよう

2019年2月5日

Crayon Syntax Highlighterプラグインの設定方法と使い方のまとめ

最後に、Crayon Syntax Highlighterの設定や使い方をまとめるとこんな感じです。

  1. プラグインは管理画面からインストールできる
  2. やっておく基本設定は画面の日本語化テーマの変更ツールバーや行設定必要な時だけCSSとJSを読み込むようにする設定あたりを中心に。あとは初期設定のままでもOK
  3. 使い方は、ソースコードコードを選択して「< >」ボタンでハイライト表示するだけ
  4. 特定の行だけ強調して表示させることもできので、見せ方を工夫すると良いでしょう

Crayon Syntax Highlighterは、他にも固定ページや投稿ごとにテーマや設定を自由に変更することもできます。この辺の設定についても関連記事で紹介していますので、参考にしてみてください。

STORKでコードを<pre>表示するにはCrayon Syntax Highlighterを併用しよう

2019年2月5日
関連記事

コメントを残す

ABOUTこの記事をかいた人

STORKのテーマやプラグインなど、WordPressを使ったアフィリエイトに関する記事を中心に紹介しています。そのほかにもMacやiPhone、HTML、CSS、Javascript、PHPなどの記事もちょこちょこ書いています★