ソースを分かりやすく表示するプラグイン【iG:Syntax Hiliter】
先日スーパーで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」フォルダ > 「css」フォルダ > 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; }
おー、さっそく使えてるじゃん、プラグインが(笑)。
導入してみて
あぁ、これは簡単だ。非常に便利。もっと早く導入しておけばよかった。
しばらくの間は無駄にソースを書くようなエントリーが増えそうな予感。