HTMLタグを無効化してソースコードをそのまま表示する方法
HTMLソースコードをそのまま表示する
自分が運営しているブログ、サイトでHTMLソースコードを表示したい場合どうすれば良いのか、対処法を大きく分けて三つ紹介します。
一つ目は「タグと認識される文字」を「タグと認識されない文字」に変換する方法です。
二つ目はソースコードと実行結果を表示できる外部Webサービスを利用する方法です。
三つ目はxmpタグを使用する方法です。
三つ目のxmpタグは対応していないブラウザがあるので、おすすめは一つ目の「エスケープ処理」、もしくは二つ目の「CodePen」を使用する方法
1:エスケープ処理を行う
HTMLコードをそのまま表示させたい時に厄介なのは「<」「>」「'」「&」「"」これらの意味を持つ文字です。
「<」を表示させようとした場合、タグの終わりがないことからエラーが発生しまうため、別の文字列で表現する必要があります。
<p>「<」</p> <!-- エラー -->HTMLで「<」を表示させたい場合は「<」と入力することでタグを無効化した「<」文字を出力することができます。
<p>「<」</p> <!-- 正解ー -->エスケープ処理とは「<」を「<」に変換することで、エスケープ処理を行うことでHTMLコードをそのまま表示することができます。
エスケープ処理サイト
上記のサイトで表示したいソースコードを入力すると、自動でエスケープ処理後のソースコードが出力されます。
出力されたソースコードをコピペするだけで、そのままのソースコードを表示させることができます。
codeタグはソースコードを表示させるタグ、preタグは空白や改行をそのまま表示させるタグです。
これらのタグがなくてもソースコードを表示することはできますが、便利なのでそのまま使ってもらって大丈夫です。
2:CodePenを使う
「CodePen」というWebサービスでは「HTML,CSS,JavaScript」のソースコードと実行結果を表示することができます。
See the Pen test1 by コココット (@cococodog) on CodePen.
十分に綺麗なデザインで出力されるためソースコード部分のデザインをする必要もなく、ソースコードを紹介することができます。
CodePenの使い方を知りたい方はこちら「Codepenの使い方を簡単に解説」を参考にしてみてください。
3:xmpタグを使う
xmpタグを使用するとその中に「<」などの特殊文字があってもそのまま出力することができます。
今回紹介した中では最も簡単な方法ですが、ブラウザによっては対応していない場合があるためお勧めできません。