Syntax Highlighter for WordPress を導入

SyntaxHighlighter とは、ソースコードを色付けして見やすく表示してくれる JavaScript ライブラリです。 WordPress には、プラグインとして Syntax Highlighter for WordPress が用意されているので、簡単に導入して使用することが出来ます。 その他にも、ツールバーからソースコードをコピーしたり、印刷することも出来ます。

下記に書いてある言語の他にも、いろいろな言語に対応しています。

• C, C++, C#
• CSS
• Java
• JavaScript
• Perl
• PHP
• Python
• Ruby
• SQL
• XML
• (X)HTML

ダウンロード

WordPress › Syntax Highlighter for WordPress « WordPress Plugins http://wordpress.org/extend/plugins/syntax-highlighter/

ここから Syntax Highlighter for WordPress を適当な場所にダウンロードし、解凍しておきましょう。

インストール

• 解凍して出てきた syntax-highlighter ディレクトリを、[WordPress ルート]/wp-content/plugins 以下にアップロードします。
• WordPress の管理画面から、Syntax Highlighter for WordPress プラグインを有効にします。

使用方法

• [言語]コード[/言語] と記述すれば、自動的に整形して表示されます。

• 言語名 ([言語])

• C, C++ (cpp, c, c++)

• C# (csharp)

• CSS (css)

• Java (java)

• JavaScript (javascript)

• Perl (perl)

• PHP (php)

• Python (python)

• Ruby (ruby)

• SQL (sql)

• XML/HTML (xml, html, xhtml, xslt)

ほとんどそのままですね。 その他の言語の書き方ついては参考サイトに書いてあります。

• 例えば Ruby だと

[ruby]
puts "Hello, world!"
[/ruby]

こう記述すれば、

puts "Hello, world!"

と、整形して表示されます。

• CSS は

[css]
body {
  background: #FFFFFF url(images/bg.gif) repeat-x;
  color: #444444;
  font-size: 12px;
  font-family: Tahoma, Verdana, Arial;
  margin: 0px auto 0px;
  padding: 0px;
}

#wrap {
  background: #FFFFFF;
  margin: 0px auto 0px;
  padding: 0px;
}
[/css]

body {
  background: #ffffff url(images/bg.gif) repeat-x;
  color: #444444;
  font-size: 12px;
  font-family: Tahoma, Verdana, Arial;
  margin: 0px auto 0px;
  padding: 0px;
}

#wrap {
  background: #ffffff;
  margin: 0px auto 0px;
  padding: 0px;
}

• そのままのテキストは plain で

[plain]
てすてす！
hogehoge
[/plain]

簡単ですね！

オプション

大体はそのままで使用できると思いますが、指定した行をハイライトしたり、最初の行番号を指定したりと、オプションを指定することもできるみたいです。

参考サイトで、オプションについて解説してありますので、興味のある方は見てみてください。

参考サイト

WordPress Plugins/JSeries » Syntax Highlighter for WordPress (ソース整形表示) http://wppluginsj.sourceforge.jp/syntax-highlighter/