Open MagicVox.net
特にプログラミングなどの話題を扱う技術系ウェブサイトなどでは、記事中にスクリプトや HTML などのソースコードの類を掲示することがあると思いますが、コード中の特定の行を指して説明したいときなど、行番号付きでコード表示されていると読者にも親切です。今まで、手を抜いて textarea にベタ書きだったものを、思い立って行番号付きで表示できるようにしてみました。
黙って SyntaxHighlighter を使っておく。行番号を表示したいという動機で導入してみたら、シンタックス ハイライト機能が予想以上にステキでヒャッハー。
今までソースコードを掲示する時には、適当なスタイルを当てた textarea ブロック内にコードをべた書きしていました。この方法であれば*1、HTML エンティティのエスケープなどを特に考えずに、コードをペタッとペーストするだけで、それなりにコード表示がされていました。また、テキスト編集可能なブロックで、表示されたコードのコピー＆ペーストが確実に行え、長い行が自動的に折り返して表示されたり、行数が多いリストの場合には適切にスクロール バーが表示されるなど、いい感じに機能してくれていました。ただ、先にも述べたように、コード中の個々の行を指して叙述したい場合など、行番号表示がないと少し不便な面があります。機能仕様としてはこんな感じに；
このサイトは Movable Type を利用して運用されているので、Movable Type のプラグインを利用し、HTML が生成される段階で、ソースコードの各行に行番号の文字列を追加する方法が考えられます。しかし、この方法では、掲示されたコードをコピー＆ペーストした際に、プラグインによって追加された行番号まで一緒に取れてしまうため、ペーストした後にいったん行番号部分を削除する必要があります。ペーストする先が常に高機能なエディタとは限らないので却下。
別の方法として、行番号を直接に挿入記述するのではなく、HTML の Ordered List を利用する方法が考えられます。コードの各行を li とし、コード全体を ol で囲んでしまう方法です。この方法であれば、行番号部分はブラウザが自動的に振ってくれるので上手くいきそうです。しかも、欲しい機能そのままの MTPrecode プラグインが公開されているではありませんか！ 早速、導入してみます。
メインで使っている Google Chrome ブラウザでは、期待した通りに行番号なしにコード部分だけをコピー＆ペーストできました。しかし、Internet Exproler 8 ではしっかり行番号もペーストされることに気がつきましたorz 一方、Mozilla Firefox では行頭に # 記号が入りますo...rz ダメじゃーんヽ(TwT)ノ 折角なのでこの辺りにハマって右往左往したメモ。
# 記号付きで取得されるabout:config)に autocopy.optCopyWithoutFormating なる項目がある。名前的に「整形せずにコピー」と読めるが、いじってみてもよくわからない。Chrome をメイン、Firefox に Greasemonkey スクリプトを導入して使う自分だけであれば問題なかったんですが、読者全員がそうとも限りません。 ...というわけで、SyntaxHighlighter を使うことにしました。続きます。
English