ブラウザ上にソースコードをそのまま表示する

pre要素とセマンティックのためにcode要素を使ってソースコードをマークアップする

  1. <pre><code>
  2. <!-- ここにソースコードを貼り付ける -->
  3. </code></pre>

 

※注意

　・表示するソースの以下の文字列は置き換える（エスケープ）必要がある。

　　　「<」は「&lt;」、

　　　「>」は「&gt;」、

　　　「&」は「&amp;」

　　　　　　　　

【サンプル】

1
2
3
4
5
6
7
8
9
<pre>
<code>
body{
    color:#ffff;
    background-color:#0000;
    font-size:12px;
}
</code>
</pre>

【プレビュー】 

body{
    color:#ffff;
    background-color:#0000;
    font-size:12px;
}