ソースコードを表示させるプラグインCrayon Syntax Highlighterの設定と使い方

ワードプレスで記事内にソースコードを表示するなら「Crayon Syntax Highlighter」が便利です。このプラグインをインストールすることで、コピペで貼り付けることのできるソースコードをきれいに作成することができます。

今回はソースコードをコンテンツに挿入するためのプラグイン、Crayon Syntax Highlighterを紹介します。

Photo by Artem Sapegin on Unsplash

これまでソースコードを表示したいときには、Githubを利用していました。Githubはソフトウェア開発のプラットフォームで、初心者から開発者の方まで自由に利用できる優れたサービスです。

ただ、もっと使いやすいツールがあるのでは！と思い、見つけたのがCrayon Syntax Highlighterというプラグインになります。これをインストールすることでソースコードを下の画面のように表示することが出来ます。

設定さえ済ませれば、作業はほとんどコピペです。ワードプレスでソースコードを表示するなら、こちらの方が便利で使いやすいので活用してみて下さい。

Crayon Syntax Highlighterのインストールと設定

まずは管理画面のプラグインから「新規追加」をクリックします。

キーワード（検索）に「Crayon Syntax Highlighter」と入力すると表示されます。「今すぐインストール」をクリックして下さい。

「有効化」をクリックします。

管理画面の「設定」から「Crayon」をクリックします。

設定する場所は多いですが、2個所だけに変更を加えれば十分に使えると思います。まずは、「Toolbar」を見て下さい。Display the Toolbarが「On MouseOver」になっていると思います。この設定の場合、マウスをツールバーに当てないとツールバーが表示されないので「Always」に変更します。

次に「Code」を見て下さい。ここに「Always display scrollbars」があります。ソースコードが長い場合は、スクロールバーがあると見やすいです。初期設定ではチェックが入っていないので、チェックを入れていきましょう。

最後に「Save　Changes」をクリックします。

これでCrayon Syntax Highlighterの設定は完了です。

Crayon Syntax Highlighterの使い方

では、実際に使ってみましょう。まずは、挿入したいソースコードをコピーします。

次に、ソースコードの挿入場所をクリックしてから、エディタ画面にある「crayon」のボタンをクリックします。これはビジュアル画面ではなく、必ずテキスト画面でして下さい。

すると下の画面が出てきます。

ソースコードをペーストしてから「Title」が必要な場合は記入して「Add」をクリックします。

作業を保存して投稿をプレビューして下さい。下のようにソースコードが表示されていればOKです。

テキストエディタには、下のようなコードが挿入されていると思います。

これでコードの挿入は完了です。

また、このコードの中で特に目立たせたいところがある場合は、下の画面のように「Marked Lines」のところにカンマで区切って行番号を入力してください。

以下のように色が付いていればOkです。

スクロールバーの幅を変更する(初期設定は細すぎる）

この記事で紹介しているスクロールバーはある程度の幅があるかと思います。しかし、初期設定のスクロールバーは本当に細すぎて分かりにくいです。

これは実際に設置した時に確認して下さい。スクロールバーは見やすさ使いやすさという点で、少し幅がある方がいいですよね。そこで、スクロールバーの幅を変更していきましょう。

ただこの編集は、賢威テンプレートではうまく機能していますが、他のテンプレートでは機能しない可能性もあります。テーマに編集を加えるので、取りかかる前に必ずバックアップを取って下さい。

まずは管理画面の「外観」から「テーマの編集」をクリックします。

画面右側にテーマファイルがあります。子テーマを使っている場合はテーマを切り替えて下さい。賢威なら編集するテーマを選択して変更できます。「テーマフッター（footer.php)」のファイルをクリックして下さい。

テーマフッターを表示したら、Windowsの場合は「ctrl」＋「F」、Macの場合は「command」＋「F」を同時に押して検索の窓を開きます。

そこに下のコードをコピペで貼り付けて下さい。

上のコードが見つかったら、そのすぐ下に次のコードを貼り付けます。

貼り付けると以下のようになります。

最後に「ファイルを更新」をクリックします。

スクロールバーの太さを確認してみて下さい。初期設定よりも、幅が広くなり使いやすくなっていれば成功です。初期設定は複雑そうに見えますが、簡単な設定で使いやすいソースコードを表示することが出来ます。ぜひ、活用してみてくださいね。