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

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

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

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

① <code>を使いHTMLタグではなく文字列として認識させる
② <pre>を使いソースコードを整形済みテキストとして認識させる
③ 「<」や「&」などの特殊文字に置き換えて表示させる

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

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

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

<code>
この間にソースコードを記述する
</code>

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

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

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

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

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

<pre>
<code>
この間にソースコードを書きます
</code>
</pre>

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

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

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

表示記述
<&lt;
>&gt;
&&amp;

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

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

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

参考になれば幸いです。

CTA画像

ブログネタ探しています

webの「わからない」を教えてください。調べて解決いたします。その代わりブログのネタにさせてくださいm(_ _)mメッセージはラインからお願いします