ソースコードをWebページで表示させるために、どんなHTMLを書いてますか？私はこれまで、<pre>…</pre> を使っていました。<code>…</code> というタグは知っていましたが、これだと半角スペースや改行がうまく反映されていない、という理由で使っていなかったのです。
が、Web標準の教科書という本を読んで、目からうろこが落ちました。
（pre要素の解説で）
pre要素は、code要素と組み合わせてスクリプト言語やプログラミング言語のソースコードを示すのに使うのが一般的である。
（code要素、var要素、samp要素、kbd要素の解説で）
コンピュータに特有のテキストを定義するには、次の4つの要素を使用する。
（略）
これらはインライン要素であり、インライン要素やテキストを含むことができる。
そうだったのかー！code要素はインライン要素なので、半角スペースや改行が反映されないのは当たり前なのでした。つまり、ソースコードをWebページで表示させるには、
<pre><code>
function someFunction() {
// code
}
</code><pre>
というふうに、pre要素の中にcode要素を含ませて書くのが正しいようです。ちなみにcode要素はインライン要素なので、次のような書き方もできます。
<p>1行目の<code>someFunction()</code>の中にコードを実装していきます。</p>
なお、<pre>…</pre>を使うと、一行が長い場合、
function someFunction() {
// code code code code code code code code code code code code code code code code code code code code code code code code code code code code code code code code
}
という感じで、横スクロールバーが表示されてしまいますが、以下のサイトで紹介されているcssハックを使えば、折り返すことができます。
» Making preformated <pre> text wrap in CSS3, Mozilla, Opera and IE
最近になって、ようやくWeb標準の勉強を始めたのですが、新しい発見がいっぱいあって楽しいです。
が、Web標準の教科書という本を読んで、目からうろこが落ちました。
（pre要素の解説で）
pre要素は、code要素と組み合わせてスクリプト言語やプログラミング言語のソースコードを示すのに使うのが一般的である。
（code要素、var要素、samp要素、kbd要素の解説で）
コンピュータに特有のテキストを定義するには、次の4つの要素を使用する。
（略）
これらはインライン要素であり、インライン要素やテキストを含むことができる。
そうだったのかー！code要素はインライン要素なので、半角スペースや改行が反映されないのは当たり前なのでした。つまり、ソースコードをWebページで表示させるには、
<pre><code>
function someFunction() {
// code
}
</code><pre>
というふうに、pre要素の中にcode要素を含ませて書くのが正しいようです。ちなみにcode要素はインライン要素なので、次のような書き方もできます。
<p>1行目の<code>someFunction()</code>の中にコードを実装していきます。</p>
なお、<pre>…</pre>を使うと、一行が長い場合、
function someFunction() {
// code code code code code code code code code code code code code code code code code code code code code code code code code code code code code code code code
}
という感じで、横スクロールバーが表示されてしまいますが、以下のサイトで紹介されているcssハックを使えば、折り返すことができます。
» Making preformated <pre> text wrap in CSS3, Mozilla, Opera and IE
最近になって、ようやくWeb標準の勉強を始めたのですが、新しい発見がいっぱいあって楽しいです。