google-code-prettifyを試してみた

Perlのソースをブログに書くために色々と調べてみた。参考あなたのソースコードを彩る、Syntax Highlighterまとめ - Blog.37to.net で、今の状況で導入が比較的簡単そうな「google-code-prettify」を試してみることにした。

A Javascript module and CSS file that allows syntax highlighting of source code snippets in an html page.

[google-code-prettify - Google Code]

README（Javascript code prettifier）のsetupをいい加減に訳すと、

ファイル一式をダウンロードします。
適用するドキュメントに、スタイルシートとJavaScriptをインクルードします。linkタグやscriptタグで指定します。
bodyタグのonloadに"prettyPrint()“を書きます。
スタイルシートをお好みで変更します。

という感じです。 MovableTypeに適用する場合、色々と面倒なので、テンプレートのヘッダーのスタイルシートを読み込んでいるあたりに、新しいスタイルシートを直接読み込みました。で、スクリプトのほうは、テンプレートのフッターのbodyの閉じタグの前で読み込み、その後prettyPrint()をそのまま実行することにしました。あとは、実際のコードを書いた部分のpreタグかcodeタグのclassを「prettyprint」に指定すれば、その部分をハイライトしてくれるようです。とあるスクリプトを改造して使っているのですが、それをソース表示してみます。

dl.pl

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23


#!/usr/bin/perl
use strict;
use LWP::Simple;
use File::Basename;
use Digest::MD5 qw(md5_hex);
use Perl6::Say;

my $uri = shift or die "uri please!. ";
my $content = get($uri);
my @l = $content =~ m{<a.*?href="?(http://[^ ]+?\.jpe?g)"?}gi; # 苦肉の策
# my @l = $content =~ m{<a.*?href="(http://[^"]+\.jpe?g)"}gi;# オリジナル
my $dir = md5_hex($uri);
mkdir $dir or die unless -d $dir;
say "make dir   > " . $dir;
foreach (@l) {
    my $filename = basename($_);
    mirror($_, sprintf("%s/%s", $dir, $filename));
    say "save image > " . $filename;
    sleep 1;
};
open my $fh, ">", "$dir/uri.txt" or die;
print $fh $uri;
close $fh;