WEBページにプログラミングソース（いろいろあるらしい、CとかDとか）やCSS・javascript・HTMLそのものを表示させる時に、何でマークアップするか？について。
これはもう圧倒的に<pre><code> 〜 </code></pre>派が多いようだけど、僕は<textarea> 〜 </textarea>派だった（過去形）。多くのブラウザは<textarea>上での全選択・コピーメニューが実装されているのがその理由。ソースコードは性質上ユーザがコピーしやすい方が便利かなーなんて思ったりしてた。とかいいつつ、その時の酒量 気分で<div class="code"> 〜 </div>とかインライン使ったりとか、もーメチャメチャだったりもする。
<pre>を避けていたのは、横スクロールバーの扱いでうまい方法が思いつかないって理由もある。（<textarea>なら適当な所で改行してくれる）ただ<pre>の、インデントをそのまま表現したり、他の要素を入れ子にして強調したりアンカーを張ったりできるって点は捨てがたい。
何かいい方法はないかなーと思っていたら、答えはすぐ近くにあった。Another HTML-lint gateway様だ（叱られてもタダは起きない）ここではソースコードを<ol>（序列リスト）で表している。ソースコードを文字列が集まったリストと考えるのは妥当だし、環境ごとの表示幅の違いによって途中で折り返しされたとしても論理行は保持される。コピーのさい行番号は選択されないので使い勝手も悪くない。Firefox1では行番号（リストマーク含む）がコピーされます。IE6ではどちらもコピーされない。（追記:2005-06-06）何よりソースの説明する時「XX行目のhogeをpageに修正してください」という使い方ができる。イケてるじゃんキミ（どこの立場からモノ言ってるんだ、オレは）
マークアップは単純なのだが、ソースが長くなるとめんどくさいんでスクリプトを書いた 。
自分用に書いたんでしょぼいです。需要があればちゃんとするかも。これで過去記事のソースコード部分を書き直していくショゾン。
RSSを拾ってくださってる方へ。「春木屋、更新してるじゃん」と思われても、それは過去記事（のしかもマークアップ部分）です。紛らわしくてスミマセン。（エントリタイトルと全然無関係に終ってゆくのであった）
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html lang="ja"><head><meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"><meta http-equiv="Content-Style-Type" content="text/css"><meta http-equiv="Content-Script-Type" content="text/javascript"><title>src convert</title><script type="text/javascript"><!--var x; function remove() { x = document.getElementsByTagName( 'textarea' )[0].value.replace( /&/g,'&' ).replace( /</g,'<' ).replace( />/g,'>' ); x = x.replace( /\x0D\x0A/g,'\n' ).replace( /\x0D/,'\n' ).replace( /\x0A/,'\n' ).replace( /\n$/,'' ); x = x.replace( /^\s*\d+\. |^\s*\* /g,'' ).replace( /\n\s*\d+\. |\n\s*\* /g,'\n' );}function input() { x = document.getElementsByTagName( 'textarea' )[0].value.replace( /&/g,'&' ).replace( /</g,'<' ).replace( />/g,'>' ); x = x.replace( /\x0D\x0A/g,'\n' ).replace( /\x0D/,'\n' ).replace( /\x0A/,'\n' ).replace( /\n$/,'' ); x = x.replace( /\n /g,'\n ' ).replace( / /g,' ' ).replace( / /g,' ' ).replace( /\t/g,' ' );} function output() { document.getElementsByTagName( 'textarea' )[0].value = x; document.getElementsByTagName( 'DIV' )[0].innerHTML = x;}function make_ol() { input(); x = '<ol class="code">\n<li><code>' + x.replace( /\n/g,'<\/code><\/li>\n<li><code>' ) + '<\/code><\/li>\n<\/ol>'; output();} function make_pre() { input(); x = '<pre class="code"><code>\n' + x + '\n<\/code><\/pre>'; output();} function make_textarea() { input(); x = '<textarea cols="56" rows="4" class="code">' + x + '<\/textarea>'; output();}function cleanup() { remove(); x = '<textarea cols="56" rows="4" class="code">' + x + '<\/textarea>'; output();}//--></script> <style type="text/css"><!--body {padding: 0; margin: 1em 2em;} ol.code {font-family: monospace;font-size: .85em;margin: 0; padding: .5em;padding-right: 1.5em;height: 200px;overflow: auto;border: 1px solid #303030;}ol.code li {color: #999;line-break: strict;word-break: break-all;word-wrap: break-word;padding: 0; margin: 0;margin-left: 3em;}ol.code code {color: #303030;font-size: 1.2em;line-height: 1.1;} pre.code {width: 95%;height: 200px;overflow: scroll;padding: 0; margin: 1em 0;border: 1px solid #303030;}pre.code code {color: #303030;display: block;padding: 1em;} textarea.code {color: #303030;width: 95%;height: 200px;padding-left: 1em;border: 1px solid #303030;}div {margin: 1em 0;}.copy {margin: 0;text-align: center;}--></style></head><body><h1>src convert</h1><p> | <a href="javascript:x='';output()" title="入力欄を空にする">clear</a> | <a href="javascript:make_ol()" title="序列リストでマーク"><ol></a> | <a href="javascript:make_pre()" title="整形済みテキストでマーク"><pre></a> | <a href="javascript:make_textarea()" title="テキストエリアでマーク"><textarea></a> | <a href="javascript:cleanup()" title="リストマーク除去">clean up</a> |</p><textarea style="width: 100%; height: 150px;" onblur="if ( this.value == '' ) this.value='ソースを貼り付けてください';" onfocus="if ( this.value == 'ソースを貼り付けてください' ) this.value='';">ソースを貼り付けてください</textarea><p>プレビュー</p><hr><div></div><hr><div class="copy"><a href="http://blog.fc2.com/" title="FC2 BLOG">©2004-2005 FC2</a></div></body></html>丸ごとコピペ → hoge.htmで保存すれば、ローカルで使えます。たぶん。
< 何故なら前後がわかりやすいし | 生きろ > | 表紙へ戻る |
これ、UA依存では…？
Firefoxでは行番号がついちゃいます。
ctrl-a→ctrl-cが楽でいいので、私はtextarea派…かな。
-05日22時
「ソースコードのマークアップに関する議論リンク集」
http://www.akatsukinishisu.net/itazuragaki/source_markup.html
> コピーのさい行番号は選択されない
実はFirefoxだとol要素の行番号やul要素のマーカーもコピペされちゃうんですよ（この機能は便利だと思ってたんですが）。
自分は面倒なのでpreを使っていますがolも悪くないと思います。-05日22時
＞＞コピーのさい行番号は選択されないので使い勝手も悪くない。
報告ありがとうございます。おっしゃる通りでした。記事を修正しときます。
ディスプレイの選択範囲に含まれないんで、てっきりコピーされないものかと･･･
＞私はtextarea派…かな。
僕もソース見るとコピペしてみたくなるんでそうしてました。
上級者（謎）の読者が多いサイト向けだと思います。
＞いらっしゃいませ、みりばーるさん。
＞こんなリンク集もあるようです。
拾い読みしてみました。みなさん熟考されてますね。うちなんかが思いつきで書くのとは雲泥の差です。
＞olも悪くないと思います。
すでにマークアップ部分をolに修正しちゃったんで、しばらくコレで様子見します。不便なようなら再修正ということで。
-06日20時
→ http://blog2.fc2.com/s/sug/file/srcconv.htm
clean up で Firefox（など）からコピーしたソースの中から、行番号・リストマークを除去します。-06日21時