アフィリエイト戦略ガイドAll rights reserved.

ソースコードを表示させるプラグイン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」を同時に押して検索の窓を開きます。



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



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


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



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



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