ソースコードをwebサイトに表示する方法

2019/09/03

ソースコードをwebサイトに表示する方法を紹介します。

今回は、ソースコードをwebサイトに表示する方法を紹介します。

codeタグについて

code（computer codeの略）タグで囲んだものは、ソースコード（javascriptやHTMLなど）であると認識され、一般的なブラウザでは等幅フォントで表示されるようになります。

ただしデメリットとして、インデントや改行が消えてしまいます。


p{
	font-size: 16px;
	color: #333;
}

<code>
	p{
		font-size: 16px;
		color: #333;
	}
</code>

preformatted textの略で、フォーマット（整形）済みのテキストという意味になります。その名の通り、preタグで囲んだものは brタグなど使わずとも、改行や半角スペースをそのまま表示します。

preタグを使えば、
　改行などそのまま表示されます。

<pre>
preタグを使えば、
　改行などそのまま表示されます。
</pre>

ではどのように表示するのがベストかと言うと、codeタグ・preタグの特徴を活かして、両方で囲むことです。

まず、preタグで囲むだけではソースコードと認識されませんので、codeタグで囲みます。それをさらにpreタグでマークアップしましょう。


	p{
		font-size: 16px;
		color: #333;
	}

<pre>
	<code>
		p{
			font-size: 16px;
			color: #333;
		}
	</code>
</pre>

どうでしたか？
使う機会は限られると思いますが、使ってみてくださいね。