「Crayon Syntax Highlighter」で綺麗に便利にソースコードを見せよう【閲覧者のためにも】

ホームページやブログで、HTMLなどのソースコードの挿入が必要になることはありませんか。

プログラミングやWEBデザインに関するページの運営をされている方であれば必要になることが出てくるはずです。

そんな時に、ソースコードをそのまま入力することもできるのですが、テキストの表示のままだとなんだか味気無い画面になります。

WordPressのプラグイン「Crayon Syntax Highlighter」を利用すれば、簡単に見栄えのよい綺麗なソースコードを挿入することができます。

「Crayon Syntax Highlighter」を利用すればソースコードの表示だけでなくユーザーはコピーを簡単にすることができます。

「Crayon Syntax Highlighter」プラグインをインストールしよう

プラグインのインストールは簡単です。

WordPressのサイドバーのメニューよりプラグイン＞新規追加をクリックします。

プラグインの検索欄に「Crayon Syntax Highlighter」と入力し検索します。

下記のプラグインが表示されますので、「今すぐインストール」をクリックし、インストールが完了しましたら「有効化」するのも忘れないようにしましょう。

設定画面を確認しておきましょう

WordPressのサイドバーの設定より「Crayon」をクリックして設定画面を確認しましょう。

使用すr「Theme」を選んでみましょう。

正直、デザインの設定はそれぞれデフォルトのままで大丈夫だと思います。

細かいフォントの種類や大きさはお好みで変更されても良いかもしれません。

「Misc」欄の「Attempt to load Crayon’s CSS and JavaScript only when needed」にチェックを入れておきましょう。

「Crayon」が必要な時にだけ動くようにする設定です。

「Save Changes」をクリックして設定を保存しましょう。

ソースコードを挿入しましょう

記事の投稿画面のビジュアルエディタに以下のコマンドが追加されているのでクリックしましょう。

以下の画面が表示されますので、挿入したいソースコードを入力しましょう。

右上の「Add」をクリックすれば見栄えの良いソースコードの表示をすることができます。

個人的には、「Toolbar」欄の「Display the Toolbar」を「Always」にすることで、コピーなどのツールバーを固定することができるので利用する側から見ると使いやすくて良いかと思います。

サンプルとして以下のソースコードを挿入してみました。

別の記事で使用するソースコードになります。確認してみてください。

スマートな表示をさせて且つ利便性を求めましょう

「Crayon Syntax Highlighter」を利用すればソースコードの表示をきれいに見せるだけでなく、ユーザーの利便性を高めることができます。

設定も簡単ですので、利用されてみてはいかがでしょうか。