ソースを分かりやすく表示するプラグイン【iG:Syntax Hiliter】

2009年1月14日 | カテゴリー: WordPress

先日スーパーで2リットルの業務用ブルドックソースを発見しました。
が、しかし、そのソースではございません。フジカワです。こんにちわ。

code要素が使いづらい

さっきまでこのブログでソースの表示をするときには、b-quote要素を使っていました。
本来使うべきはcode要素であることは承知していたのですが、表示を整えるのがめんどくさくて「わかりゃいいじゃん」と思ってたから。仕事じゃないし。遊びだし。
でもまぁ、せっかく年も明けたし、ちょっとずつ適正な表示に直せるところは直していこう、というわけで以前から気になっていたプラグインを実践投入することにした。以下手順です。

まずはともあれ入手。

今回インストールしたプラグインはiG:Syntax Hiliter 日本語版。本家（アメリカか？）もあるようだけれど、表示が出来ない激烈遅いので却下。
まぁ、日本語版の方が便利だし、ということでMMRT daily lifeさんのところからDLさせていただく。

インストール

とはいってもファイルをアップロードするだけ。
DLしたファイルを解凍し、中にある「ig_syntax hiliter plugin」フォルダをそのまま「wp-content」 > 「plugins」に放り込みましょう。後はWordPress管理画面の「Plugins」で有効にするだけ。

設定しませう

WP管理画面の「設定」 > 「iG:Syntax Hiliter」で、表示のカスタマイズを行えます。コード原文に関する部分や、色など、お好みで選びます。こういった部分の設定があるプラグインの場合、日本語化されていることのありがたさが身に染みます

使い方

投稿画面にて記述したいソースをその言語をベースにした「コードタイプ」でくくればOK。
コードタイプは以下の通り。

Language Start Tag End Tag
ActionScript ［as］ ［/as］
ASP ［asp］ ［/asp］
C ［c］ ［/c］
C++ ［cpp］ ［/cpp］
C# ［csharp］ ［/csharp］
CSS ［css］ ［/css］
DELPHI ［delphi］ ［/delphi］
HTML ［html］ ［/html］
JAVA ［java］ ［/java］
JavaScript ［js］ ［/js］
MySQL ［mysql］ ［/mysql］
PERL ［perl］ ［/perl］
PHP ［php］ ［/php］
PYTHON ［python］ ［/python］
RUBY ［ruby］ ［/ruby］
SMARTY ［smarty］ ［/smarty］
SQL ［sql］ ［/sql］
Visual Basic ［vb］ ［/vb］
VB.NET ［vbnet］ ［/vbnet］
XML ［xml］ ［/xml］

たとえばhtmlを表示する場合、
［html］
裸のソース
［/html］
※上記の大カッコは大文字ですので、本番では半角使用のこと。
と記述すればOK。
するとこうなる。

<li><a href='http://blog.sugulab.com/?m=200812' title='2008 年 12 月'>2008 年 12 月</a></li>
<li><a href='http://blog.sugulab.com/?m=200811' title='2008 年 11 月'>2008 年 11 月</a></li>
<li><a href='http://blog.sugulab.com/?m=200810' title='2008 年 10 月'>2008 年 10 月</a></li>
<li><a href='http://blog.sugulab.com/?m=200809' title='2008 年 9 月'>2008 年 9 月</a>)</li>
<li><a href='http://blog.sugulab.com/?m=200808' title='2008 年 8 月'>2008 年 8 月</a></li>
<li><a href='http://blog.sugulab.com/?m=200807' title='2008 年 7 月'>2008 年 7 月</a></li>

同様に、javascriptだと、

//add thickbox to href & area elements that have a class of .thickbox
function tb_init(domChunk){
	$(domChunk).click(function(){
	var t = this.title || this.name || null;
	var a = this.href || this.alt;
	var g = this.rel || false;
	tb_show(t,a,g);
	this.blur();
	return false;
	});
}

という風になります。

ちょっとだけカスタマイズ

あとは最後にちょっとだけカスタマイズ。文字のサイズや枠のサイズなどなど。
「ig_syntax_hilite」フォルダ > 「ｃｓｓ」フォルダ > syntax_hilite_css.css
で調整。
枠の幅はブログのエントリー部分に併せたかったので、widthの指定は全て削除、
あと、文字のサイズとフォント、罫線の色なんかを調整するために、syntax_hilite_css.cssの最後に以下を追加。

/* ソースのフォントサイズ・罫線を変更*/
.syntax_hilite{
font-size:0.8em;
border:1px #dedede dotted;
}

/*「PLAIN TEXT」記述部分のデザイン変更*/
.igBar, li .igBar {
font-family:Arial, Helvetica, sans-serif;
font-size:0.8em;
background-color:#dedede;
border:1px solid #dedede;
}

おー、さっそく使えてるじゃん、プラグインが（笑）。

導入してみて

あぁ、これは簡単だ。非常に便利。もっと早く導入しておけばよかった。
しばらくの間は無駄にソースを書くようなエントリーが増えそうな予感。

コメントを残してみる

コメント