[WordPress]ソースコードを綺麗に表示するプラグイン”Crayon Syntax Highlighter”

このブログではシステム開発メモを記しているのでソースコードを書くこともありますが、色々なブログで見かけるようにかっこよくオシャレに表示したいと思い始めました。

調べたところWordPressには簡単にかっこよくソースコードを表示出来る便利なプラグイン”Crayon Syntax Highlighter”があることがわかったので早速使って見たいと思います。

“Crayon Syntax Highlighter”の初期設定

プラグインの追加

管理画面のプラグイン→新規追加→プラグインの検索で”Crayon Syntax Highlighter”で検索し、インストールと有効化をします。

2019年3月時点でバージョンは4.2.0、最終更新は３年前となっています。

WordPressのバージョン5.1.1ではテストされていないそうですが、今のところ問題なく利用出来ています。

有効化した後、管理画面の設定タブにCrayonが追加されている事を確認してください。

日本語化する方法

インストール直後の設定画面を見てみると、全てが英語で記載されていていまいち設定内容がわからないので日本語化させます。

“Crayon Syntax Highlighter”をインストールした際に翻訳ファイルもインストールされてしまっているため、そのファイルを削除する事で日本語化することが出来ます。

FTPソフトかサーバーに直接入り該当ファイルを削除してください。

WordPressをインストールしたディレクトリ(DocumentRoot)の直下、wp-content/languages/pluginsに該当ファイルが存在します。

再度、管理画面からCrayonの設定画面を表示すると下記のように日本語で表示されていることが確認できると思います。

テンプレートを決める

自分のサイトのイメージカラー等と相談して、どのようなテンプレートにするかを決めてきます。

私はVisualStudioの配色テーマとかも濃色が好きなので、下記のような濃い色にしています。

私が初期値から変更したのは３点です。

設定をする際は変更後に、画面下部の変更を保存ボタンを押し忘れないように注意しましょう。

・テーマ　濃色が好きなのでTwilightを選びました。

・ツールバー　カーソルが当たる度にツールバーが見え隠れするのが嫌だったので常に表示に変更しました。

・コード　常にスクロールバーを表示するにチェック

記事を投稿する時に”Crayon Syntax Highlighter”を使用する

記事を投稿する際に使用方法は簡単です。

記事投稿画面に移動すると、ツールバーに＜＞のようなマークが増えているかと思います。

ソースコードを挿入したい場所にカーソルを当ててから、この＜＞ボタンを押すとソースコードを書く画面が表示されます。

タイトルにはツールバーに表示したい文言を、コードという欄に入れたいソースコードを入れて挿入ボタンを押せば完了です。

記事作成画面では変化がわかりませんが、プレビュー表示してみると変化していることがわかるかと思います。

設定した情報を修正したい場合は再度＜＞ボタンを押すことで修正出来ます。

まとめ

かっこよくソースコードが表示出来るようになりました！

記事を書くために準備することはなるべく早く設定して、記事の書き方が同じようになるようにしたいと個人的には思います。

１度設定してしまえば後は簡単にソースコードを書くことが出来るので、この際に試して見てはいかかがでしょうか。

バージョン情報