WordPressでブログを運営するとhtmlやcss、phpなどを編集する必要が出てきます。
WordPressは世界で広く使われているシステムなので、カスタマイズのやり方がわからないときは検索すれば大抵見つかります。
カスタマイズのやり方を調べているときに、下のようなソースコード表示を見たことありませんか？
これはソースコードを綺麗に表示させるプラグインを使用しているのです。
『Crayon Syntax Highlighter（クレヨン・シンタックス・ハイライター）』というプラグインで表示されたものです。
見た目が綺麗なうえ、ユーザーがすぐ使えるようワンクリックでコピー出来たりと便利ですね。
けれど『Crayon Syntax Highlighter（クレヨン・シンタックス・ハイライター）』の開発は最終更新が3年前。
コレはこの先も放置状態では？！と思ったら使う気が全くおきません。
そこで他に同じ種類のプラグインを探したところ『Enlighter』というものが良さそうでした。
『Crayon～』に比べて機能面は劣りますが、最終更新4週間前とあり、WordPressの最新バージョンにも対応なので安心感が違います。
ここではソースコードを綺麗に表示させるプラグイン『Enlighter』の基本的な使い方を解説します。
細かいことよりひとまず綺麗に表示されればOKという人向けの記事です。
Enlighter – Customizable Syntax Highlighterの使い方
まずはインストール。すぐに有効化というボタンに変わるのでクリック。
WordPress管理画面の左側にEnlighterが追加されるのでクリック。
Enlighterの設定画面になります。
Enlighter管理画面の設定
タブがいくつかありますが、【Appearance】のままで設定を進めます。
Theme
テーマを選ぶことでデザインが変わります。デフォルトのままで綺麗ですが、17種類から選べるのでお好みで変更可能。
Default Language
コードを紹介するときはWordPressに関するものが中心なのでphpに変更。
Code-indent
コードのTabをSpaceに置き換える設定。No modification(keep tabs) を選択。
Show Linenumbers
この先の設定は画像のようにしました。見やすさ重視で行を示すのとハイライト以外はチェックを外してあります。
【Appearance】タブ内の設定は以上になります。
他のタブに関しては全てデフォルトのまま変更を保存です。
Enlighterはビジュアルエディタで使用する
WordPress管理画面で実際にソースをはるのはビジュアルエディタで行います。
プラグインをインストール⇒有効化としてあれば赤枠のボタンが表示されているのでクリック。
大きなポップアップが現れます。
プルダウンで選択する箇所がありますが、デフォルト設定のままでソースをはってOKをクリック。
プレビューを確認するとこうなっていました。
ソース内のTab部分もそのまま残り、シンプルで見やすく表示されています。
