いい感じに行番号付きでソースコードを表示したい

Posted by
ぴろり
Posted at
2011/12/02 15:42
Trackbacks
関連記事 (1)
Post Comment
コメントできます
Category
電算室 カテゴリ

 特にプログラミングなどの話題を扱う技術系ウェブサイトなどでは、記事中にスクリプトや HTML などのソースコードの類を掲示することがあると思いますが、コード中の特定の行を指して説明したいときなど、行番号付きでコード表示されていると読者にも親切です。今まで、手を抜いて textarea にベタ書きだったものを、思い立って行番号付きで表示できるようにしてみました。

この記事を Delicious に追加する   このエントリーをはてなブックマークに追加  

結論

 黙って SyntaxHighlighter を使っておく。行番号を表示したいという動機で導入してみたら、シンタックス ハイライト機能が予想以上にステキでヒャッハー。

経緯

 今までソースコードを掲示する時には、適当なスタイルを当てた textarea ブロック内にコードをべた書きしていました。この方法であれば*1、HTML エンティティのエスケープなどを特に考えずに、コードをペタッとペーストするだけで、それなりにコード表示がされていました。また、テキスト編集可能なブロックで、表示されたコードのコピー&ペーストが確実に行え、長い行が自動的に折り返して表示されたり、行数が多いリストの場合には適切にスクロール バーが表示されるなど、いい感じに機能してくれていました。ただ、先にも述べたように、コード中の個々の行を指して叙述したい場合など、行番号表示がないと少し不便な面があります。機能仕様としてはこんな感じに;

  1. コードを掲示する際に行番号を振りたい
  2. 表示されたコードはコピー&ペーストで再利用できるようにしたい
  3. 記事にコードを含める時に手間は増やしたくない

 このサイトは Movable Type を利用して運用されているので、Movable Type のプラグインを利用し、HTML が生成される段階で、ソースコードの各行に行番号の文字列を追加する方法が考えられます。しかし、この方法では、掲示されたコードをコピー&ペーストした際に、プラグインによって追加された行番号まで一緒に取れてしまうため、ペーストした後にいったん行番号部分を削除する必要があります。ペーストする先が常に高機能なエディタとは限らないので却下。
 別の方法として、行番号を直接に挿入記述するのではなく、HTML の Ordered List を利用する方法が考えられます。コードの各行を li とし、コード全体を ol で囲んでしまう方法です。この方法であれば、行番号部分はブラウザが自動的に振ってくれるので上手くいきそうです。しかも、欲しい機能そのままの MTPrecode プラグインが公開されているではありませんか! 早速、導入してみます。

しかし

 メインで使っている Google Chrome ブラウザでは、期待した通りに行番号なしにコード部分だけをコピー&ペーストできました。しかし、Internet Exproler 8 ではしっかり行番号もペーストされることに気がつきましたorz 一方、Mozilla Firefox では行頭に # 記号が入りますo...rz ダメじゃーんヽ(TwT)ノ 折角なのでこの辺りにハマって右往左往したメモ。

  • Ordered List 内の li 要素をコピー&ペーストすると
    • Google Chrome では、文字列部分だけを取得できる
    • Internet Exproler 8 では、行頭に行番号付きで取得される
    • Mozilla Firefox 3.6.x では、行頭に # 記号付きで取得される
  • Mozilla Firefox の環境設定(about:config)に autocopy.optCopyWithoutFormating なる項目がある。名前的に「整形せずにコピー」と読めるが、いじってみてもよくわからない。
  • li 要素の行番号をコピーしないようにする Greasemonkey スクリプトを発見。動作確認済み。*2

 Chrome をメイン、Firefox に Greasemonkey スクリプトを導入して使う自分だけであれば問題なかったんですが、読者全員がそうとも限りません。 ...というわけで、SyntaxHighlighter を使うことにしました。続きます

この記事を Delicious に追加する   このエントリーをはてなブックマークに追加  

  1. *1 HTML の正当性はひとまず見なかったことにして
  2. *2 なんだけど、予想外のところで影響があって数時間無駄にしました。

この記事を読んだ人はこんな記事も読んでいます記事リコメンデーションについて

カバー画像:SyntaxHighlighter 導入の余談

関連記事/トラックバック (全 1 件中、最新 5 件まで表示しています)

Open MagicVox.net のスクリーンショット
タイトル
SyntaxHighlighter 導入の余談
Trackbacked at
2011/12/03 14:35
from
Open MagicVox.net
概要
 ソースコードを行番号付きで表示できるよう SyntaxHighlighter を導入しました。SyntaxHighlighter 自体について何かとい...

この記事にトラックバックを送るには?

コメントを投稿する

 
 (必須, 匿名可, 公開, トリップが使えます)
 (必須, 匿名可, 非公開, Gravatar に対応しています)
 (必須)
スパム コメント防止のため「投稿確認」欄に ランダムな数字 CAPTCHAについて を入力してから送信してください。お手数ですがご協力のほど宜しくお願いいたします。