暇人じゃない

Syntax Highlighter for WordPress を導入
JavaScriptWordPress

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/

About

chocoby (GitHub / Twitter)

フリーのソフトウェア開発者です。 Ruby を使った Web 開発を得意としています。