2021年11月現在、このプラグインは6年以上更新されていませんので、代わりとなる下記プラグインをおすすめいたします。

2021.11.24

記事内でソースコードを見やすく表示できるWordPressプラグイン「Highlighting Code Block」

プログラミングのハウツー系のブログ記事では、ソースコードのサンプルを記載することも多いと思います。ただ、WordPressデフォルトでは、色が変わらず、行数も表示されないので見やすいとはいえません。 そこで今回は、記事内のソースコードを見やすくするプラグイン「Highlighting Code...

技術系ブログやプログラミングについて解説したサイトを運営していると、ソースコードを記事内に書く機会もあると思います。しかしそのまま記事内にソースコードをただ羅列するだけでは、デザイン的にもまとまりがなく、どれくらいの規模感のプログラムなのかといったことが読者に伝わりづらいですよね。

そんな時におススメしたいのが今回ご紹介するWordPressプラグイン「Crayon Syntax Highlighter」です。このプラグインではソースコードにまとまりを持たせることで、誰でも簡単にプログラムを参照しやすくします。

Webサイト上でエディタ形式にソースコードを表示するプラグイン「Crayon Syntax Highlighter」

「Crayon Syntax Highlighter」のインストール

「Crayon Syntax Highlighter」は、記事本文にエディタ形式でソースコードをキレイに表示するプラグインです。そのまま記事内に直書きする時とは異なり、ソースコードを一箇所にまとめて表示できます。

その上、一つのオブジェクトとしてソースコードを表示するため、HTMLやCSSに慣れない読者の方へクリック一つでソースコードをコピー＆ペースト利用させることが出来ます。


コードを扱いやすいようにメニューが展開

ちなみにイメージとしてはこの通り。サイトのカスタマイズを日常的に行っている方は結構見慣れている画面ではないでしょうか。

「Crayon Syntax Highlighter」の使い方

それではさっそく使い方についても見ていきましょう。まずはWordPressの管理画面から「プラグイン」>「新規追加」で「Crayon Syntax Highlighter」と検索してプラグインをインストールして有効化します。

「Crayon Syntax Highlighter」を有効化

もしWordPress上の検索結果に「Crayon Syntax Highlighter」が表示されない場合は、下記のサイトからプラグインをダウンロードし、wp-content/pluginsディレクトリにインストールすることでも利用可能です。

Crayon Syntax Highlighter

ソースコードを追加してみる

プラグインを導入できたら、さっそく投稿画面から「テキスト」エディタを選択し、HTMLタグ一覧にある「crayon」という項目をクリック。

言語やタイトルを設定

するといくつか項目が表示されるので、「Title」欄に「ファイル名」を「Language」欄に「使用言語」を「Code」欄に記載したいコードをそれぞれ記述します。ちなみに、「Title」欄の記述をせずに技術系ブログにそのままソースコードを掲載している方もたびたび見かけますが、コードの知識に疎い方はここが空欄になっていると、どのファイルで書かれた記述なのかがわかりません。

可能であるならば必ず記載しておきましょう。

addボタンで追加

最後にウインドウ右上にある「Add」項目を選択すればコードの挿入は完了です。

表示はこの通り

実際にサイト上で表示してみるとこの通り。記事内に直書きするよりは見栄え良く配置することが出来ましたね。

また「Crayon Syntax Highlighter」には…

オプション機能

  • Line Range：これはCode欄に書かれたコードのうち、指定の行数だけを表示するというものです。
  • Marked Lines：指定した行数だけをマーカーで強調するというものです。
  • Inline：行数表示を消し、文章のように記事中にコードを羅列させる機能です。
  • Don’t Highlight：htmlのclass,id,URLなどパーツごとにデフォルトで色分けしている機能をOFFにして全文を黒文字で表示する機能です。
  • URL：リンク先のソースコードを全文表示する機能です。

といったような機能もございますので、必要に応じてこちらも合わせて使ってみましょう。

サイトの色に合わせてエディタをカスタマイズしてみよう！

とはいえ「Crayon Syntax Highlighter」を利用する際、そのまま使ってしまうとサイトならではの色が失われてしまいかねません。

そこでせっかくならサイトの色に合わせたエディタも選んでみましょう。

themeとfont

エディタをカスタマイズする方法は簡単。先ほど表示したコードを記載する画面の「Settings」欄よりお好みの「Theme」と「Font」を選ぶだけ。


背景色が黒いエディタから、デフォルトのエディタより見やすさを重視したエディタまでさまざまな種類を取り揃えていますので、自分のサイトの特色に合ったエディタを使いましょう。

まとめ

今回は、記事内にソースコードをキレイに表示するWordPressプラグイン「Crayon Syntax Highlighter」の機能とその使い方をご紹介しました。上記でご紹介した通り、とくに難しい操作は一切なく、誰でも簡単に見やすいデザインのソースコードを配置できるようになるので、技術系の解説サイトを運営されている方はぜひ導入してみてください。