ブログにソースコードを"それっぽく"載せるためのwordpressプラグイン『SyntaxHighlighter』を使ってみた。

wordpressブログをいろいろとカスタマイズする方法を調べてみると、ソースコードをそれっぽく掲載しているブログをちょこちょこと目にすることがありまして。
それってどうやってるんだろう？細かくCSS使って書いてるのかな〜？
なんて思っていたんだけど、プラグインを一つ入れておくだけで、うまいこと“それっぽく”見せることが出来るみたい。
そのプラグインの名前は『SyntaxHighlighter』。
早速、導入してみました。

まずはプラグインをインストール

プラグインをインストール、有効化します。

WordPress › SyntaxHighlighter Evolved « WordPress Plugins
「SyntaxHighlighter」の配布サイト

SyntaxHighlighterの使い方

使い方は超カンタン。掲載したいコードを、[language][/language]で囲むだけ。

[html]
〈p〉こんな感じで、〈/p〉
〈p〉コードをタグで囲むだけ！〈/p〉
[/html]

すると、↓このように表示されます。
[html]
<p>こんな感じで、</p>
<p>コードをタグで囲むだけ！</p>
[/html]

対象の言語は、html、PHP、cssなどwordpress関連で使う言語だけにとどまらず、[c][/c][java][/java]などなど主要言語はかなり網羅されている感じ。
ちなみに、対応言語の一覧はコチラ。

SyntaxHighlighter – Bundled Brushes
SyntaxHighlighter対応言語一覧

wordpressのテンプレートなどのようにhtmlとPHPが混在しているコードをキレイに色分けするには、htmlscript=”true”のオプションをつければOK。

[php htmlscript=”true”]　←こんな感じで！

オプションの有無での見え方の違いは、、、
[html title=”html”]
<h1><a href="<?php echo home_url(); ?>">
<?php if(get_header_image()): ?>
<div id="image"><img src="<?php header_image(); ?>" alt="*"
width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" /></div>
<?php else :
bloginfo( ‘name’ );
endif; ?>
</a></h1>
[/html]

[php title=”php”]
<h1><a href="<?php echo home_url(); ?>">
<?php if(get_header_image()): ?>
<div id="image"><img src="<?php header_image(); ?>" alt="*"
width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" /></div>
<?php else :
bloginfo( ‘name’ );
endif; ?>
</a></h1>
[/php]

[php htmlscript=”true” title=”php htmlscript=true”]
<h1><a href="<?php echo home_url(); ?>">
<?php if(get_header_image()): ?>
<div id="image"><img src="<?php header_image(); ?>" alt="*"
width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" /></div>
<?php else :
bloginfo( ‘name’ );
endif; ?>
</a></h1>
[/php]
微妙な違いではありますが、[php htmlscript=”true”]としておくのがベストでしょう。

他にも開始タグにオプションをつけることで、
コードにタイトルをつけたり、、、

[html title=”タイトル”]
[html title=”タイトル”]
<p>こんな感じで、</p>
<p>コードをタグで囲むだけ！</p>
[/html]

特定の行をハイライトしたり、、

[html highlight=”1″]
[html highlight=”1″]
<p>こんな感じで、</p>
<p>コードをタグで囲むだけ！</p>
[/html]

開始行の行番号を指定したり、、、

[html firstline=”5″]
[html firstline=”5″]
<p>こんな感じで、</p>
<p>コードをタグで囲むだけ！</p>
[/html]

その他、設定から見た目を変更することもできます。
eclipse風とか、