HTMLソースを表示するブックマークレット（GeSHiでシンタックスハイライト版）

投稿日：2008年1月8日

似たようなブックマークレットが続きますが、ご容赦下さい。
先日作ったHTMLソース表示ブックマークレット（Yahoo!Pipes版）は、Pipes側の制限で、一部タグが見えなかったりして使い勝手が微妙でした。なので、HTMLのスクレイピングも自前で行うスクリプトを作ってブックマークレット化しました。
POP HTML SOURCE
上記リンクをブックマークして下さい。
中身はこんな感じです。

javascript:(function(){window.open('http://labs.creazy.net/bookmarklet/pop_source.php?url='+encodeURIComponent(location.href),'_blank');})();

HTMLを表示したいページで上記ブックマークレットを実行すると、別ウィンドウでシンタックスハイライトされたHTMLソースを表示します。
シンタックスサンプル
今回、HTMLのハイライトを「GeSHi」というphpライブラリを使って実装してみました。
・GeSHi – Generic Syntax Highlighter :: Home
この辺りも、もしかしたら参考になるかもしれないのでソースを載せときます。

指定されたURLのHTMLソースをシンタックスハイライトして表示するサンプル

上記ブックマークレットで呼び出しているPHPアプリのソースを抜粋します。

mb_internal_encoding("UTF-8");
mb_language("japanese");
// get HTML contents
if ( !$html = mb_convert_encoding( file_get_contents($_GET['url']),"UTF-8","auto") ) {
die("Failed to get contents.");
}
// get title
if ( preg_match ( '/<title>(.*)<\/title>/i', $html, $match ) ){
$title = $match[1];
} else {
$title = "";
}
// replace tab to 4 spaces
$html = str_replace("	","    ",$html);
//----------------------------------------------------------
// Syntax Highlight by GeSHi(Generic Syntax Highlighter)
//----------------------------------------------------------
require_once("/path/to/geshi/geshi.php");
$geshi = new GeSHi($html, "html4strict");                              // HTML mode initialize
$geshi->enable_line_numbers(GESHI_FANCY_LINE_NUMBERS, 2);              // show line numbers
$geshi->set_line_style('background: #FFFFFF;','background: #EEEEEE;'); // line colors

ブックマークレットでは、このPHPに「url」というパラメータで見ているページのURL（location.href）を渡しています。
・file_get_contentsでHTMLファイルを取得（便宜上UTF-8に変換してます）
・表示用にtitleタグ抜き出し
・GeSHiでシンタックスハイライト
な感じです。
これで、ソースを表示したいところで $geshi-$gt;parse_code() すればOKです。

GeSHiの呼び出しサンプル

一番シンプルな呼び出し方は、下記の通り

<?
// まずは、ライブラリをincludeします
include_once('geshi.php');
// ハイライト変換したい文字列
// ファイルをまるまる読む場合は $source = file_get_contents($file_name); とか
$source   = '<html>
<head>
<title>test</title>
<body>
this is test
</body>
</html>';
// 文法モード
$language = 'html4strict';
// GeSHiクラス初期化
$geshi =& new GeSHi($source, $language);
// 出力（parse）
echo $geshi->parse_code();
?>

公式のドキュメントではこの辺に書いています
・http://qbnz.com/highlighter/geshi-doc.html#basic-usage
コンストラクタの GeSHi に渡す第２引数に文法モードを渡します。
htmlの場合は “html4strict” を渡しますが、他にも “php”, “perl”, “javascript”, “css” 等を指定します。
$geshi->parse_code() でハイライトされた文字列が返りますので、echoで出力するなり変数に代入するなりします。

ブックマークレットで使っているパラメータの詳しい解説

require_once("/path/to/geshi/geshi.php");
$geshi = new GeSHi($html, "html4strict");                              // HTML mode initialize
$geshi->enable_line_numbers(GESHI_FANCY_LINE_NUMBERS, 2);              // show line numbers
$geshi->set_line_style('background: #FFFFFF;','background: #EEEEEE;'); // line colors

■３行目[enable_line_numbers]
行番号を表示するかを指定できます。
・http://qbnz.com/highlighter/geshi-doc.html#line-numbers
　- GESHI_NORMAL_LINE_NUMBERS – 普通に表示
　- GESHI_FANCY_LINE_NUMBERS – 特定の行毎にスタイルを指定できます
　- GESHI_NO_LINE_NUMBERS – 行番号を表示しない（デフォルト）
例では、GESHI_FANCY_LINE_NUMBERSを指定して第２引数で数字を指定していますが、これは２の倍数の行で別のスタイルを表示するという意味です。つまり、奇数行と偶数行で色分けをするための設定です。
■４行目[set_line_style]
行にスタイルを設定します。
・http://qbnz.com/highlighter/geshi-doc.html#styling-line-numbers
　- enable_line_numbersがGESHI_NORMAL_LINE_NUMBERSの場合は一つ指定
　　$geshi->set_line_style(‘background: #fcfcfc;’);
　- enable_line_numbersがGESHI_FANCY_LINE_NUMBERSの場合は二つ指定
　　$geshi->set_line_style(‘background: #fcfcfc;’, ‘background: #f0f0f0;’);
他にも、マニュアルには色々な設定項目が書いてありますので読んでみて下さい。（英語だけど）
GeSHi Documentation

参考ページ

・GeSHi – Generic Syntax Highlighter :: Home
・コードハイライト用PHPライブラリ:GeSHi:phpspot開発日誌

HTMLソースを表示するブックマークレット（GeSHiでシンタックスハイライト版）

指定されたURLのHTMLソースをシンタックスハイライトして表示するサンプル

GeSHiの呼び出しサンプル

ブックマークレットで使っているパラメータの詳しい解説

参考ページ

関連エントリー