ブログの本文にソースコードを書いても、きちんと綺麗に表示してくれるプラグインが「SyntaxHighlighter Evolved」です。
WordPressには投稿中に「code」タグを簡単につけられる機能が元から備わっていますが、コードが途中で改行されてしまったり、行番号が表示されなかったりと少し不親切。「SyntaxHighlighter Evolved」では細かい設定をプラグイン画面からすぐに変更できるので、ソースコードの表示にこだわりたい人にはオススメのプラグインです。
準備編
まずは次のURLから「SyntaxHighlighter Evolved」をダウンロードします。
ダウンロードしてきたら、「plugins」フォルダにアップロードして、Wordpressの管理画面から「有効化」にします。
次に、現在自分が利用しているテーマの「header.php」に
<!--?php wp_head(); ?-->
「footer.php」に
<!--?php wp_footer(); ?-->
が記述されているか確認しましょう。この２つがないと「SyntaxHighlighter Evolved」が動作しなくなるので、注意してください。
設定編
もうこれだけでも、すぐに「SyntaxHighlighter Evolved」を使うこともできるのですが、実際にコードを表示してみる前に、どんな設定ができるのか確認しておきます。
以前は英語で表示されていた設定画面ですが、最新バージョンではすべて日本語化されているので、さらに使いやすくなりました。翻訳してくれた人に感謝ですね。
- 「バージョン」に２と３がありますが、ソースコードを途中で改行させて表示させたい人以外は３を選んでいればOKでしょう。
- 「テーマ」を変更することで、ソースコードを表示させる部分のデザインを変更することができます。
- 「すべてのブラシ〜」は「オフ」で。
- 「一般」のチェック項目でソースコードの表示を色々変えることができます。私は行番号が表示されるだけのシンプルな設定にしています。
使い方編
さて、それでは実際に「SyntaxHighlighter Evolved」を使って、ソースコードを表示してみましょう。次のように書きます。
[言語]ここにソースコードを記述[/言語]
使用できる言語
| 言語 | [☆]への書き方 |
|---|---|
| ActionScript3 | as3, actionscript3 |
| Bash/shell | bash, shell |
| ColdFusion | cf, coldfusion |
| C# | c-sharp, csharp |
| C++ | cpp, c |
| CSS | css |
| Delphi | delphi, pas, pascal |
| Diff | diff, patch |
| Erlang | erl, erlang |
| Groovy | groovy |
| JavaScript | js, jscript, javascript |
| Java | java |
| JavaFX | jfx, javafx |
| Perl | perl, pl |
| PHP | php |
| Plain Text | plain, text |
| PowerShell | ps, powershell |
| Python | py, python |
| Ruby | rails, ror, ruby |
| Scala | scala |
| SQL | sql |
| Visual Basic | vb, vbnet |
| XML | xml, xhtml, xslt, html, xhtml |
（参考）SyntaxHighlighter – Bundled Brushes
WordPressをカスタマイズしている人や、プログラミングを勉強した内容をブログに書いている人などには、はずせないプラグインですよね。ぜひ試してみてください。