「記事内にソースコードを記述したい場合、どうしたら綺麗に書くことができるのだろう？」
と思っているあなたに、Wordpressのプラグイン『Crayon Syntax Highlighter』をご紹介したいと思います。
— 2020/10/27 追記 —
『Crayon Syntax Highlighter』をインストールしよう
『Crayon Syntax Highlighter』は、記事内にエディタ形式でソースコードを表示できるとても便利なプラグインです。
それでは、早速インストールしてみましょう！！
WordPressの管理画面からプラグインの新規追加を開き『Crayon Syntax Highlighter』を検索します。
こちらをインストールして、有効化します。
『Crayon Syntax Highlighter』で検索して見つからない場合は、公式サイト からダウンロードして、wp-content/pluginsディレクトリにインストールして利用することもできます。
『Crayon Syntax Highlighter』を使ってみよう
『Crayon Syntax Highlighter』のプラグインをインストールすると、投稿画面に下の画像の赤枠で囲んだ<>のマークが表示されるようになります。
<>マークをクリックして、crayonのウィンドウを開いてみましょう。
| ① Title | ファイル名 |
| ② Language | 使用言語 |
| ③ Code | ソースコード |
① の『Title』に記述がないと、コードの知識があまりない方には分かりませんので、なるべく記述するようにしましょう。
④ の『Marked Lines』は、記述することで指定した行を強調することができます。
例えば、３行目を強調したいのであれば『３』と記入します。カンマで区切れば１行ずつ、ハイフンでつなげば複数行を指定できます。
上の画像では、１行目を強調したかったので『Marked Lines』に『１』と記述しました。背景がクリーム色になっていますね。
最後に ⑤ の『Add』をクリックしたら、完了です。
エディタをカスタマイズしてみよう
プラグインを有効化すると、Wordpressの管理画面の『設定』に『Crayon』という項目が追加されますので、そちらをクリックします。
私の場合は、下の画像の赤枠で囲んだ『Theme』と『Font』と『Toolbar』を変えて使っています。
水色の枠で囲んだ『Enable Live Preview』に を入れると、プレビュー画面が見られるようになります。
『Theme』をいくつかご紹介しますと・・・
初期設定のままでも充分使えますが、あなたのサイトに合わせてカスタマイズしてみてくださいね。
表示速度が遅くなってしまったら？
ブログの表示速度が遅くなってしまったら、Wordpressの管理画面 ＞ 設定 ＞ Crayon を開き、『Misc』の赤枠で囲まれた部分に を入れましょう。
こちらには『必要な時だけCrayonのCSSとJavaScriptを読み込むように試みる』と書かれています。
ただし、チェックを入れても、表示速度があまり変わらないこともあるようです。
まとめ
今回は、記事内にエディタ形式でソースコードを表示するプラグイン『Crayon Syntax Highlighter』をご紹介しました。
私もこちらのプラグインを取り入れてから、ソースコードの記述がとても楽になりました。
ぜひ、あなたもお試しください。