ブログにソースコードを“それっぽく”載せるための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風とか、

Emacs風とか!

というわけで、ブログにコードを掲載するなら超お手軽で、超便利。
超オススメのプラグインです。
ぜひとも、お試しあれ!!

ちなみに、[html]みたいなタグを本文中に記載したいなら、、

今日の記事を書いていて思ったのは、本文の中に[html]という文字列を掲載したいな〜と思っても、いざ書いてしまうと、SyntaxHighlighterが動いてしまって表示することができません。
どうしようかと思いましたが、HTML特殊文字を使えばいいだけでした。

つまり、
[html]
&#91;html&#93;
[/html]
と書けば、

[html]

と表示されるってわけです。

『SyntaxHighlighter』の解説をしている当記事以外で使う場面があるかはわかりませんが、備忘録として書いておきます。


Commentsこの記事についたコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です