ソースコードを書きたい！エスケープシーケンス（特殊文字）の書き方

サンプルコードを記事にしたい時、タグをそのまま書いてもブラウザでは表示されません。

HTMLタグやスクリプトなどのコードは ブラウザで「タグ」や「プログラム」と認識されるので、画面上に文字として表示されないようです。

こういったタグやスクリプトに使われる記号を文字として表示するためには、「エスケープシーケンス（特殊文字）」という決まった書き方で、画面上に表示することが出来ます。

サンプルコードでよく使う記号の書き方

個人的によく使う記号のメモです。

小なり記号「<」&lt;

大なり記号「>」&gt;

ダブルクオーテーション「"」 &quot;

セミコロン「;」&#059;

エスケープシーケンスの書き方を表示させるには？

「エスケープシーケンス」で特殊記号を「文字として」表示する事ができました。

では、エスケープシーケンス自体の書き方を載せたい時はどうするのでしょうか。

エスケープシーケンスは、「特殊な記号を文字として表示させる」書き方なので、こう書くんだよ！と記事にしようとしても、記号になってしまいますよね。

結論から言うと、上記のように
「<」を「&lt;」と表示させたい時は、
「&amp;lt;」とHTML上で記述すると、ブラウザ上では「&lt;」と表示できます。

ちょっと分かりづらいですが、文字にしたいエスケープ文字先頭に「&amp;」を書けば文字として表示できる、といった感じ。

ちょっとややっこしいですね。

一緒に覚えておきたいタグ

記事でソースコードを書くときには、その部分がソースコードであると表す「code」タグと、改行をそのまま表示できる「pre」タグを一緒に使うのが一般的です。

2つにタグを実際使うとこんな感じになります。

<pre>
<code>
code {
  font-size: 16px;
  line-height: 1.5;
}
</code>
</pre>

<code></code>

ソースコードであることを表すHTMLタグ。
囲まれた範囲は「等倍フォント」になり、他のテキストと区別されます。

<pre></pre>

「pre」は「preserve(保存する)」の略で、「pre」タグで囲んだ範囲のテキストは「整形済みテキスト」として表示されます。

テキストエディターで書いた改行は、ブラウザ上では「半角スペース」として表示されますが、「pre」タグを使うとそのまま「改行」として表示できます。

詩やソースコード、アスキーアートなど、改行や空白を維持したまま表示させたい時に使います。

ただし、「pre」タグにはデフォルトではテキストの折り返しがないため、長文になるとテキストが画面から溢れ出てしまいます。

レイアウト崩れが気になる場合は、溢れた部分をスクロールで表示させるか、画面いっぱいで折返しさせる事もできます。