0

ページ上にソースコードを表示する方法

ページ上にソースコードを表示する方法

webページ上に、htmlソースなどを表示したい場合は、「pre要素」と「code要素」を利用します。

「pre要素」は、要素ないのテキストの改行やスペースをそのまま表示してくれますので、インデントなどを含む複数行のコードの場合に使います。ただし、pre要素自体は「整形済みのテキスト」という意味合いしかありません。本来はプログラムのソースコードを表す「code要素」というものがあります。「code要素」はインライン要素として定義されており短いソースコードを記述する場合に適しています。その場の状況により使い分けていくと良いでしょう。

例を挙げてみると、

 

上記のようなコードをwebページ上に表示したい場合は、下記のように記述します。

 

<pre>
&lt;ul class=&quot;sample&quot;&gt;
&lt;li&gt;リスト1&lt;/li&gt;
&lt;li&gt;リスト2&lt;/li&gt;
&lt;li&gt;リスト3&lt;/li&gt;
&lt;li&gt;リスト4&lt;/li&gt;
&lt;/ul&gt;
</pre>

ソースコード中の「<」「>」「」はそのまま記述してしまうと、htmlタグとして認識されてしまうので、「&lt;」「&gt;」「&quot;」と記述しなければなりません。

 

簡単ではありますが、以上になります。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

mororeco > HTML > ページ上にソースコードを表示する方法