プログラム・コードを Web ページに掲載する際，コードを pre タグでマークアップするのが一般的ではないだろうか。Syntax
いま現在の SyntaxHighlighter 最新バージョンは 3.0.83。ダウンロード・ページから syntax
使い方を簡単に説明すると以下のとおりである。Syntax
- プログラム・コードを掲載したい HTML（以下「対象ページ」）のヘッダ部に shCore
.js と shCore.css を読み込むよう指定する。 - 出力様式のタイプがテーマ Theme として管理されており，好みのものを選択して，そのスタイルシートを対象ページに指定する。一覧は Syntax
Highlighter - Themes にある。とくにこだわりがなければ標準 Theme: shTheme Default. css を指定しておけばよい。私は Eclipse Theme について表示色等カスタマイズしたものを shTheme Site. css として保存して使うことにした。 - 対象ページで掲載したいプログラム・コードの言語に応じて Syntax
Highlighter の JavaScript を選択し，それらを対象ページに指定する。JavaScript の一覧は Syntax Highlighter - Bundled Brushes にある。
上記までで対象ページのヘッダ部は以下のようなものとなる。ここではシェルスクリプト，XML（HTML 含む），Java，C/C++，Perl，JavaScript を扱うものとした。これは SyntaxHighlighter の出力例でもある。
<link type="text/css" rel="stylesheet" href="/sh/styles/shCore.css" /> <link type="text/css" rel="stylesheet" href="/sh/styles/shThemeDefault.css" /> <script type="text/javascript" src="/sh/scripts/shCore.js"></script> <script type="text/javascript" src="/sh/scripts/shBrushBash.js"></script> <script type="text/javascript" src="/sh/scripts/shBrushXml.js"></script> <script type="text/javascript" src="/sh/scripts/shBrushJava.js"></script> <script type="text/javascript" src="/sh/scripts/shBrushCpp.js"></script> <script type="text/javascript" src="/sh/scripts/shBrushPerl.js"></script> <script type="text/javascript" src="/sh/scripts/shBrushJScript.js"></script>
プログラム・コードは pre タグでマークアップする。class オプションに Syntax
<pre class="brush: perl; first-line: 1; tab-size: 4; highlight: null;"
title="xlstocsv.pl">
first-line: 1; は行番号の開始を 1 とするということである。行番号を出力したくない場合，gutter: false; を指定する。個別に行をハイライトしたいなら，highlight: [2, 4, 9]; のようにすればよい。プログラム・コードのマークアップが済んだら，最後に以下の JavaScript コードを書いておく。おまじないのようなものである。同一ページ内にいくつも Syntax
<script type="text/javascript">SyntaxHighlighter.all()</script>
昨日作成した Excel 一括 CSV 出力の Perl コードは，以下のように表示される。
#!/usr/bin/perl -w
# -*- coding: utf-8; mode: cperl; -*-
# Excel to CSV
use strict;
use utf8;
use Spreadsheet::ParseExcel;
use Spreadsheet::ParseExcel::FmtJapan;
binmode STDOUT, ":utf8"; binmode STDERR, ":utf8";
($#ARGV < 0) && die "Usage: $0 xls-file\n";
my $fnm = $ARGV[0]; # Excel file name
my $ct = 0; # 出力行数
# Excel object
my $xls = Spreadsheet::ParseExcel->new();
my $fmt = Spreadsheet::ParseExcel::FmtJapan->new(); # 日本語あり
my $bko = $xls->parse($fnm, $fmt); # Excel Book object
my @wsa = $bko->worksheets(); # Worksheet object 配列
utf8::decode($fnm);
# ワークシート毎の処理
foreach my $ws (@wsa) {
my $wsnm = $ws->{"Name"};
my $mxrow = $ws->{"MaxRow"};
my $mxcol = $ws->{"MaxCol"};
print STDERR "*** $0 $fnm - sheet: $wsnm start.\n";
if ((defined $mxrow) && (defined $mxcol)) {
# 行毎の処理
for (my $row = 0; $row <= $mxrow; $row++) {
my $line = "";
# 列毎の処理
for (my $col = 0; $col <= $mxcol; $col++) {
# セル値をセット
my $cell = $ws->get_cell($row, $col);
$line .= $cell->value() if (defined $cell);
$line .= ",";
}
print "$line\n";
$ct++;
}
}
}
print STDERR "*** $0 from $fnm wrote $ct lines\n";
ただし，オリジナルの shBrushPerl.js では # 文字があるとそれ以降がすべてコメントとみなされてしまうので，$#ARGV など配列末添字番号変数の表示がおかしくなるので，上掲では少し訂正したものを用いた。53 行目の正規表現の先頭に [^\$] を追加し，以下のとおりに訂正した。
this.regexList = [
{ regex: new RegExp('[^\$]#[^!].*$', 'gm'), css: 'comments' },
{ regex: new RegExp('^\\s*#!.*$', 'gm'), css: 'preprocessor' },
ちょっと使ってみて制約があった。XML のタグのように < > で囲まれたテキストがあるとき，開始タグに対して終了タグがないと，終了タグが最後に強制的に付加されてしまう仕様のようである。空要素タグ < /> の場合も例外ではない。たとえば C/C++ の #include <stdio.h> の行をそのまま記述すると，終了タグを探しても当然ないので，ソースコード表示の最後に </stdio.h> なるゴミが出てしまうのである。私はまだ Syntax