preタグの使い方

preタグでソースコードを表示したいときの備忘録。

使い方

preタグ内で<や>を使用する場合、特殊文字と解釈されるので&lt;や&gt;と記述します。
ちなみに<や>をブラウザ上で表示させたい場合は、&を&amp;と記述します。（ややこしい。。）

サンプルコード

<pre>
  <code>
この中にコードを記述します。
  </code>
</pre>

HTML

<pre>
  <code>
&lt;div id="sample"&gt;
  &lt;p&gt;サンプルテキストテキスト&lt;/p&gt;
&lt;/div&gt;
  </code>
</pre>

CSS

<pre>
  <code>
#sample {
  padding: 10px;
}
#sample p {
  margin: 0;
  padding: 10px;
  color: #ffffff;
  text-align: center;
  background: #3498DB;
}
  </code>
</pre>

preタグの使い方のデモページ