ソースコードをそのまま表示できないかと考えました。
ポイントは以下の3点。
・"<"と">"を、"<";、">"に変換することなく表示することはできないか。
・タブ文字をそのまま表示して、コピペしたときにタブを保持したい。
・読みやすいように、改行をうまく処理したい
"<"と">"を、"<";、">"に変換することなく表示することはできないか
関連するタグは<pre>、<code>、<xmp>。※Smartyなどを使って変換する方法は除外します。
<pre>:
<pre>タグはPreformatted Text(整形済みテキスト)の略で、<pre>~</pre>で囲まれた範囲に記述された空白や改行をそのまま等幅フォントで表示します。ただし、"<"と">"は特殊文字として解釈されるので、"<"と">"に置換する必要があります。
>> <pre> | HTMLタグリファレンス
<code>:
<code>~</code>で囲んだテキストが、プログラムのソースコードであることを意味します。 Internet ExplorerやNetscape Navigator等の一般的なブラウザでは、等幅フォントで表示されます。インデント(字下げ)や改行をそのまま表示させるときには、<pre>~</pre>で外側を囲みます。
>> <code> | HTMLタグリファレンス
<xmp>:
ソース中のタグ・スペース・改行などを等幅フォントでそのまま表示します。
<xmp>はhtmlの初期の仕様にあった要素で、html4.0では廃止されています。 ソースをそのまま表示させる目的には、<pre>を使用することが推奨されています。
>> <xmp> | HTMLタグリファレンス
要は、
・ソースコードを表示するときは<code>で囲む
・空白や改行をそのまま表示したいときはさらにそれを<pre>で囲む
・"<"、">"をそのまま表示するのは推奨されないので、必ず"<"、">"を使う
ってことですね。
タブ文字をそのまま表示して、コピペしたときにタブを保持したい。
また、<pre>タグ内のタブ文字の使用について少し調べてみると、HTML4.0の仕様書において、禁止はしていないが、使用しないことを強く要請する、となっています。
エンジニアの方々の意見を見てみても、移植する際に認識できず障害になるケースが多々あるようで、
推奨されていません。
コピペしたときに使いやすいかな、と思ったんですけど、そうでもないんですね。
ここは世間の常識に従っておきましょう。タブ文字は使わずに空白でインデントすることにします。
ちなみに、ブラウザ上でタブ文字を表示したいときは、 に置換することで表示できます。
また、ブラウザ上でのタブストップは8文字ですが、これを4文字などに成形するcss要素はありません。
読みやすいように、改行をうまく処理したい
<pre>タグで囲むことにしたのはいいのですが、そのままだと、1行が長い時、横幅をはみ出して表示されてしまいます。まず、これを改行できないかと考えたところ、ありました。
ブラウザによって書き方が異なるようですが、以下のcssを指定することで改行できるようになります。
>> white-space | スタイルシートリファレンス
white-space: -moz-pre-wrap; /* Mozilla */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: pre-wrap; /* CSS3 */
word-wrap: break-word; /* IE 5.5+ */
で、やってみたんですが、やっぱり、改行しない方が見やすいなぁ、と思いました。
1行が長すぎて横幅を越えてしまうときだけ横スクロールバーが出ればいいなと思ったら、
都合のいいのがありました。
>> overflow | スタイルシートリファレンス
overflow: scroll;
これでいい感じになりました。
以上。