HTMLでソースコードを表記する方法

世にある多くのIT系ブログではHTMLやCSSのソースコードが丁寧に説明されており、分からないタグを何かを調べるときには大変重宝しております。ですが、たくさん調べていくうちに「そもそもどうやってソースコードを表記しているのだろう？」と疑問を持ち始めました。

例えば、テキスト欄に

と記載すると、通常はコードとして読み込まれるため、

太字

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

実際にはどのような作業を行った結果、コードをコードのまま表記できるのか。この疑問を解消すべく、ソースコード表記の方法を調べたので備忘録として記します。

HTMLでソースコードを表記
1. 特殊文字を置換
2. <pre>タグを使用
おまけの装飾

HTMLでソースコードを表記

ソースコードを表記する方法は実にたくさんあります。
・SyntaxHighlighter
・google-code-prettifyなどなど。

wordpressのプラグインでは
・SyntaxHighlighter Evolvedなどが利用できます。

ですが、今回はブログ自体のCSSやテンプレートをいじることなく、ソースコードを表記する方法を記します。

特殊文字を置換

HTMLでは「<」や「>」などは特殊文字と云い、タグの記号であることからウェブ上では文字として表示されません。HTMLの特殊文字を表示させるためには、「<」は「<」、「>」は「>」と書き換えてタグを無効化（エスケープ）する必要があります。
この表記できない文字を表記する手法を文字実態参照と云います。

文字実態参照一覧
実態参照	特殊文字	意味
&	&	アンパサンド
<	<	小なり
>	>	大なり
		空白
"	"	クォーテーション
'	'	アポストロフィー
©	©	コピーライト

<pre>タグを使用

次は置換した特殊文字を<pre></pre>タグを使用して記述していきます。

<pre>～</pre>タグは、囲まれた範囲のソースに記述されたスペース・改行などを、そのまま等幅フォントで表示します。


&lt;pre&gt;テキスト入力画面&lt;/pre&gt;


<pre>ブラウザ表示画面</pre>

この方法で難しいプログラム等を利用せずに、HTMLの記述だけでソースコードを表記することができます。

おまけの装飾

ここからは外枠などの装飾を施したバージョンを紹介します。

外枠を設定

&lt;div style="border:1px solid #aaa; padding-left:2em;"&gt;
?? &lt;pre&gt;
??
枠線を引く
?? &lt;/pre&gt;
&lt;/div&gt;

<div style="border:1px solid #aaa; padding-left:2em;">
?? <pre>
??
枠線を引く
?? </pre>
</div>

枠内に色を付ける

&lt;div style="background:#ebebeb; border:1px solid #aaa; padding-left:2em;"&gt;
?? &lt;pre&gt;
??
枠内に色を付ける
?? &lt;/pre&gt;
&lt;/div&gt;

<div style="background:#ebebeb; border:1px solid #aaa; padding-left:2em;">
?? <pre>
??
枠内に色を付ける
?? </pre>
</div>

文字フォントを設定する


&lt;div style="background:#ebebeb; border:1px solid #aaa; padding-left:2em;"&gt;
?? &lt;pre&gt;
????? &lt;span style="font-family:Meiryo; font-size:small;"&gt;
文字フォントをメイリオに設定
????? &lt;/span&gt;
?? &lt;/pre&gt;
&lt;/div&gt;
??


<div style="background:#ebebeb; border:1px solid #aaa; padding-left:2em;">
?? <pre>
????? <span style="font-family:Meiryo; font-size:small;">
文字フォントをメイリオに設定
????? </span>
?? </pre>
</div>
??