WordPressで記事を書くにあたり、本文中にプログラムのコードを引用することがあります。WordPressの初期設定では、このような表示になってしまいます。
▼初期設定の表示
悪くは無いのですが、もう少し見やすい表示のほうが良いのではないかと思います。
そこで、この記事では、プログラムのコードを見やすく表示する方法を紹介します。
今回実施すること
プラグインを選ぶ
| プラグイン | 特徴 |
|---|---|
| Urvanov Syntax Highlighter | クラシックエディターで使える |
| Highlighting Code Block | 日本語対応でわかりやすい |
| Code Block Pro | 標準的な機能・デザイン |
| Enlighter | 自分好みに細かく調整したい |
プラグインのインストール
使用するプラグインがきまったら、次はプラグインをインストールします。 プラグインのインストールも簡単で、WordPressの設定画面の左側にあるリストから、「プラグイン」の項目を選んで、プラグイン名を検索すると、該当するプラグインが表示されます。
■画面１■
「Urvanov Syntax Highlighter」を選んだところです。 「今すぐインストール」を選んで、「有効化」すれば、使用可能となります。
プラグインの機能を使ってみる
では、実際にプラグインの機能を使ってみます。
▼WordPressの投稿編集画面
WordPressの投稿編集画面の右上に「＜＞」マークのボタンがあります。これをクリックすると、編集画面がポップアップ表示されます。
▼ポップアップされた編集画面 
ここに記事上に表示したいコードを貼り付けます。表示に関して細かい設定等ができるようですが、今回は、特に変更はせず、そのまま使用してみます。
なお、都度フォントサイズを変更するのが面倒な場合は、デフォルトの設定を変更することができます。 サイドバーの設定からCrayonを選択すると設定画面が開きますのでここで設定変更を行いましょう。
▼サイドバーの設定からCrayonを選択 
結果を表示する
結果は、下のように表示されます。
▼プラグインの機能を使ってコードを表示
|
1 2 3 4 5 6 7 8 9 10 |
from flask import Flask app = Flask(__name__) @app.route('/') def hello(): return 'Hello World!' if __name__ == '__main__': app.run(debug=True) |
使用上の設定変更等
HTMLタグが文字化けする問題を解消する
このプラグイン「Urvanov Syntax Highlighter」でHTMLタグを記述すると文字化けします。
具体的には「＜」が文字コード「＆ｌｔ；」で表記されます。
▼文字化けをした状態のソースコード
これを解消するためには、
左サイドバーの「設定」→「Crayon」でも設定画面を開きます。
「Crayon Syntax Highlighter 設定」画面になりますので、少し下にスクロールして「コード」というカテゴリーの中の「 コード内のHTMLエンティティを出力」にチェックして保存します。
▼設定画面
これで解決です。
▼文字化け解消後のソースコード
文字の色や大きさ、背景色を変更
初期設定の文字の色や大きさ、背景色をお好みにあわせて変更したい場合、編集画面の左サイドバーの「設定」→「Crayon」で設定画面を開きます。
▼設定画面
- 「Crayon Syntax Highlighter 設定」画面になりますので、「テーマ」というカテゴリーの中から好みのものを選んでチェックします。使い慣れたVisual Studioの配色にしたいという方は、「 Vs2012 Black」にチェックしてください。
- ついでに「フォント」というカテゴリーで数値を変更して、文字サイズと行間を変更しておきます。
- そして保存。
すると、このように表示されました。
▼変更後の表示
テーマの色合いを紹介しているサイトがありますので、そちらが参考になります。（→参考サイト）
まとめ
プラグインを使用することでソースコードを綺麗に表示することができました。
これからWordPressでWEBサイトを立ち上げる方の参考になれば嬉しいです。
コメント