HTMLでソースコードを載せる

今回は、前回の記事『CSSで取り消し線』で初めてソースコードっぽいものを載せたので、あれのやり方をメモっときます。

まず、HTMLにはcode要素という、ソースコードであることを示す要素があるので、これを使います。一般的に等幅フォントで表示されるようです。
以下のように書けば...(使用しているソースコードはUnityのC#スクリプトを作成した時のデフォルトです)

	
	<code>
	using System.Collections;
	using System.Collections.Generic;
	using UnityEngine;
	
	public class UnityCSharpDefault : MonoBehaviour {
	
		void Start () {
			
		}
		void Update () {
			
		}
	}
	</code>
	
	

このように...

using System.Collections; using System.Collections.Generic; using UnityEngine; public class UnityCSharpDefault : MonoBehaviour { void Start () { } void Update () { } }

...改行とかインデントが上手く効いてないですね。
そこで、code要素と合わせてpre要素を使ってやります。これを使えば記述の通りに表示されます。以下のように書いて...

	
	<pre>
	<code>
	using System.Collections;
	using System.Collections.Generic;
	using UnityEngine;
	
	public class UnityCSharpDefault : MonoBehaviour {
	
		void Start () {
			
		}
		void Update () {
			
		}
	}
	</code>
	</pre>
	
	

どうだ!

	
	using System.Collections;
	using System.Collections.Generic;
	using UnityEngine;
	
	public class UnityCSharpDefault : MonoBehaviour {
	
		void Start () {
			
		}
		void Update () {
			
		}
	}
	
	

よっしゃ!
上手くいきましたね。しかし、例えば私の前回の記事のように、HTMLのソースコードを載せよう!と思った時にはもう一工夫必要になってきます。なぜならば以下のように記述すると...

	
	<pre>
	<code>
	<p>ほげほげー</p>
	</pre>
	</code>
	
	

以下のように表示されてしまいます。

	
	

ほげほげー

< と > がHTMLタグの一部として認識されてしまい、通常のp要素のように表示されてしまっているんですね。 < と > をそのまま表示させたい場合は、それぞれ &lt; &gt; と記述してやります。

	
	&lt;pre&gt;
	&lt;code&gt;
	&lt;p&gt;ほげほげー&lt;/p&gt;
	&lt;/pre&gt;
	&lt;/code&gt;
	
	

すると

	
	<pre>
	<code>
	<p>ほげほげー</p>
	</pre>
	</code>
	
	

ちゃんとソースコードとして表示できましたね~。
これらは特殊文字と言って、詳細はここでは省きますが、 &lt; や &gt; 以外にも、 & を表す &amp; など、色々なものが用意されています。
また、コードスニペットにしたい!とか、タグ部分に色付けさせたい!とかはJSとか使う必要があるかも。その辺は追々やっていこうと思います。

今回の記事は以上です~。