WordPressの記事上でソースコードをわかりやすく表示するには、ソースコード表示用プラグインの1つである SyntaxHighlighter Evolved (詳細) を利用する。このプラグインはWordPressのショートコード機能を用いて、ソースコードの修飾を行っている。

具体的には、

  1. SyntaxHighlighter Evolved をインストールする
  2. 記事中のソースコード領域を使用言語タグで囲む

の手順で実現できる。

1. SyntaxHighlighter Evolved をインストールする

  • WordPressの管理画面から、プラグイン → 新規追加 に進む。
  • SyntaxHighlighter Evolved を検索し、インストールした後に有効化する。
  • 設定 ページで以下の設定を行う。
    • バージョンを選択する。→ 今回は Version 3.x を使用
    • ソースコード中のリンクを無効化したい場合は、「自動リンクを有効にする」のチェックを外す。

2. 記事中のソースコード領域を使用言語タグで囲む

  • 修飾したいソースコード領域を [使用言語] と [/使用言語] で囲む。
[html]
<html>
<body>
  <p class="test">
    Hello Wonderful World !
    <a href="http://aokiji.science/blog">AoYu's Blog</a>
  </p>
</body>
</html>
[/html]

      ↓

<html>
<body>
  <p class="test">
    Hello Wonderful World !
    <a href="http://aokiji.science/blog">AoYu's Blog</a>
  </p>
</body>
</html>
  • あるいは、修飾したいソースコード領域を [code language=”使用言語”] と [/code]で囲む。
  • language以外にも複数のパラメータを設定することができる。
[code language="html" title="Example" highlight="5" autolinks="true" collapse="true"]
<html>
<body>
  <p class="test">
    Hello Wonderful World !
    <a href="http://aokiji.science/blog">AoYu's Blog</a>
  </p>
</body>
</html>
[/code]

      ↓

<html>
<body>
  <p class="test">
    Hello Wonderful World !
    <a href="http://aokiji.science/blog">AoYu's Blog</a>
  </p>
</body>
</html>
  • 利用できる言語 (ショートコード) は以下の通り
    1. actionscript3
    2. bash
    3. clojure
    4. coldfusion
    5. cpp
    6. csharp
    7. css
    8. delphi
    9. erlang
    10. fsharp
    11. diff
    12. groovy
    13. html
    14. javascript
    15. java
    16. javafx
    17. matlab
    18. objc
    19. perl
    20. php
    21. text
    22. powershell
    23. python
    24. r
    25. ruby
    26. scala
    27. sql
    28. vb
    29. xml
以下の情報を参考にさせていただきました。