技術系ブログをやる場合、結構頭をひねるのがソースの表示方法。
別に、フツーに<pre>タグでくくっちまえばイイという話もありますが。
殆どデフォルトと化しているのが、Javascriptライブラリの「Syntax Highlighter」。
そのWordpressのplug-inの１つが、「Syntax Highlighter for WordPress」でございます。
同じような意図を持ったplug-in、実は色々あるのですが、これを選んだ理由は主に２つ。
- 開発者が日本語であること。
- 生成されるソースがdiv/spanベースであること
まず、日本発plug-inというコトで、ありかは「WordPress Plugins/JSeries」。
「Syntax Highlighter for WordPress (ソース整形表示)」にございます。
大まかな話はそちらに記載してあるので、インストール方法や使い方を知るために、わざわざ英語の長文読解にチャレンジしなくても良いし、改めてGoogle先生に尋ねる必要もなし。
Wordpress.orgの「Plugin Directory」に登録されていない分、アップデートしても自動更新されないという制約はつきますが、まぁその辺はイイでしょう。
アップデート情報を知るのには、専用plug-inの「JSeries Notifer」を入れるという手があります。
で。生成されるソースとは何ぞや。
とりあえず、実験してみましょう。
<?php
$year = date('Y');
$month = date('m');
$day = date('d');
print "ようこそ！\n";
print "今日は".$year. "年".$month."月".$day."日です。\n";
?>
この部分のソースを見てみると……。
<pre class="brush: php; auto-links: false;"> <?php $year = date('Y'); $month = date('m'); $day = date('d'); print "ようこそ！\n"; print "今日は".$year. "年".$month."月".$day."日です。\n"; ?> </pre>
となっているのですが、FirebugでJavascriptによって見栄えを考えて生成し直したソースを見てみると……。
<div id="highlighter_819959" class="syntaxhighlighter"> <div class="bar"> <div class="toolbar"><a class="item viewSource" href="#viewSource" title="プレインテキスト" style="width: 16px; height: 16px;">プレインテキスト</a><a class="item printSource" href="#printSource" title="印刷" style="width: 16px; height: 16px;">印刷</a><a class="item about" href="#about" title="?" style="width: 16px; height: 16px;">?</a></div> </div> <div class="lines"> <div class="line alt1"><code class="number">1.</code><span class="content"><span class="block" style="margin-left: 0px ! important;"><code class="plain"><?php</code></span></span></div> <div class="line alt2"><code class="number">2.</code><span class="content"><code class="spaces"/><span class="block" style="margin-left: 40px ! important;"><code class="variable">$year</code><code class="plain">=</code><code class="functions">date</code><code class="plain">(</code><code class="string">'Y'</code><code class="plain">);</code></span></span></div> <div class="line alt1"><code class="number">3.</code><span class="content"><code class="spaces"/><span class="block" style="margin-left: 40px ! important;"><code class="variable">$month</code><code class="plain">=</code><code class="functions">date</code><code class="plain">(</code><code class="string">'m'</code><code class="plain">);</code></span></span></div> <div class="line alt2"><code class="number">4.</code><span class="content"><code class="spaces"/><span class="block" style="margin-left: 40px ! important;"><code class="variable">$day</code><code class="plain">=</code><code class="functions">date</code><code class="plain">(</code><code class="string">'d'</code><code class="plain">);</code></span></span></div> <div class="line alt1"><code class="number">5.</code><span class="content"><code class="spaces"/><span class="block" style="margin-left: 40px ! important;"><code class="plain">print</code><code class="string">"ようこそ！¥n"</code><code class="plain">;</code></span></span></div> <div class="line alt2"><code class="number">6.</code><span class="content"><code class="spaces"/><span class="block" style="margin-left: 40px ! important;"><code class="plain">print</code><code class="string">"今日は"</code><code class="plain">.</code><code class="variable">$year</code><code class="plain">.</code><code class="string">"年"</code><code class="plain">.</code><code class="variable">$month</code><code class="plain">.</code><code class="string">"月"</code><code class="plain">.</code><code class="variable">$day</code><code class="plain">.</code><code class="string">"日です。¥n"</code><code class="plain">;</code></span></span></div> <div class="line alt1"><code class="number">7.</code><span class="content"><span class="block" style="margin-left: 0px ! important;"><code class="plain"></code></span></span></div> </div> </div>
うぎゃあっ(>_<)ヽ 以外の何ものでもありません。
但し、各パーツはspan/codeと、W3C上では一応問題のない構造になっています。
Wordpress.orgの「Plugin Directory」で「SyntaxHighlighter」を検索してみると、「SyntaxHighlighter Evolved」っつーのが真っ先に上がって、過去ログ見たらかなり老舗ぽかったのでありますが、なぜか自動生成、<table>タグでやってしまってるのですね。さすがに今時、コレはないんじゃなかろーか……。
という訳で。とりあえずはコレで、カッコがついた訳でございます。
Related posts:
- Syntax Highlighterのフォントサイズの件。 Syntax Highlighterを導入したはイイが、文字ソース部分だけなぜかフォントサイズがでかくなってしまい、むーん。。。 いやまぁ、完全にテーマ本体のcss設計のせいなのですが。とりあえずは対処法。 生成される [...]...
関連記事はYARPP関連記事プラグインによって表示されています。
