ブログの記事内にソースコードを表示させる３つの方法

ブログの記事内にソースコードを表示させて紹介しているのを見かけますのよね。

あれってどうやっているのか。

ソースコードを表示させる３つの方法

<code>を使いHTMLタグではなく文字列として認識させる

<code>とは computer codeの略で、プログラムのコードであることを知らせる時に使用します。

HTMLは<p>や<br>などを使って形成されています。これらのタグを表に表示させたい場合はコードであるとことを明示する必要がありその場合に使用します。

使い方は上記のように<code>タグの間にソースコードを記載することで表示させることができます。

<pre>を使いソースコードを整形済みテキストとして認識させる

<pre>とは、Preformatted Textの略です。
整形済みのテキストを表すときに使用しこの要素内の空白文字や改行はそのまま反映されてブログ内に表示されます。

使い方は<code>と同じように<pre>~</pre>の間に記述をします。

ソースコードを表示させたい場合は<code>~</code>を入れ子にした状態で記述してください。

「<」や「&」などの特殊文字に置き換えて表示させる

「<」や「&」はそのままでは表示することができません。その際に使うのが『特殊文字』です。

特殊文字に置き換えて記載することでブラウザで見た際に「<」や「&」に表示されるようにします。

手打ちで入力もできますが、変換サイトなどもあるので複数変換する際は利用したほうが便利かもしれません。

>>>>特殊文字変換サイト

以上がブログ内にHTMLを表示させる簡単な方法です。

参考になれば幸いです。