WordPressでソースコードをきれいに見せる方法

2014年1月2日：WordPress

ワードプレスでソースコードをきれいに見せるためのプラグインや、記事を書く際に簡単にソースコードを記述できるプラグインを紹介します。

PS Disable Auto Formatting

まず、PS Disable Auto Formattingというプラグインを導入しましょう。このプラグインは、記事投稿の際のビジュアルとテキストの切り替えで余計な処理を防止するためのプラグインです。

これがないと、せっかくコードを記入しても、テキストとビジュアルを変換するとコードがおかしくなります。

これを防止するためにPS Disable Auto Formattingというプラグインを導入します。

プラグインの導入には、「プラグイン>>新規追加」で「PS Disable Auto Formatting」を検索してインストールしましょう。有効化もお忘れなく。

SyntaxHighlighter Evolved

ソースコードをきれいに表示するためのプラグインです。これを使えば

int x,y,z;
x=1;
y=1;
z=x+y;

のようにソースコードを記事にいれることができます。

開始番号の設定やハイライトも可能です。

導入は簡単で、「プラグイン>>新規追加」で検索してインストールします。

設定

設定に関しては「設定>>SyntaxHighlighter」があるのでここで設定します。

Version 3とVersion 2があり好きなほうを選択できます。

Version 3だとコピペするとき行番号を選択できないようになります。Version 2だと行番号もコピペされます。ただし、Version 2だと、ソースにマウスポインタをもっていくと右上にソースの表示や印刷マークが表示されます。よって、Version 2でソースをコピーしたい場合は、この表示ボタンを押してコピペすることになります。

本サイトでは、Version 3を利用しています。というのも表示ボタンを知らない人が多数だと思うし、いちいち表示ボタンをおしてソースをコピペするのは面倒だと考えたからです。

あとは、すきなテーマや一般を設定しましょう。

SyntaxHighlighter TinyMCE Button

記事を書くときに、簡単にソースを挿入するためのプラグインです。記事投稿のツールに現れる「code」を押せばソースを挿入できるようになります。

コードの挿入

導入は「プラグイン>>新規追加」より検索してインストールします。

設定は「設定>>SH TinyMCE Button」ですることができます。SyntaxHighlighter Evolvedをチェックしておきましょう。

著者：安井 真人(やすい　まさと)

TOP