KONOTI

この世界で得た知識・情報まとめ

HTMLファイルにソースコードを埋め込み、表示する方法

  • 作成日:2018/06/20

ソースコードを記事にする場合、通常の書き方ではうまく表示されません。 codeタグとpreタグを使う必要があります。

HTMLファイルにソースコードを埋め込み、表示する方法

codeタグとpreタグの使い方

まずはソースコードの記事を書く上で基本となるcodeタグとpreタグについてご紹介します。

codeタグ

codeタグはこのタグで囲まれたものがソースコードであることを意味します。

HTML

h1タグの使い方は<code><h1>見出し1</h1></code>です。
                        

このように、ソースコードを意味する文章はcodeタグで囲みます。 上記はHTMLのh1要素を囲んでいる例ですが、どのプログラミング言語でも同じです。

preタグ

preタグは半角スペースや改行などをそのまま表示するタグです。

通常、HTMLファイルに半角スペースや改行などを記述してもそのまま表示されずに、 以下のような変換が勝手に行われてブラウザに表示されます。

  • 複数の半角スペースは1つの半角スペースになる
  • タブや改行は半角スペース1つになる

よって、半角スペースを複数使う場合や改行をそのまま出力したい場合はpreタグで囲む必要があります。 具体的な使用場面はプログラミングのソースコードを紹介するときなどですね。 これは次項でご紹介します。

ソースコードを表示させる

記事内でソースコードを表示させるにはpreタグとcodeタグの両方を使います。 例として、JavaScriptのソースコードを紹介する場面を考えてみましょう。

HTMLファイル内でJavaScriptのソースコードを紹介するには以下のように書きます。

HTML
<pre><code>

    var tmp = document.getElementsByClassName("hoege") ;
    var char="testID";
    tmp[0].setAttribute("id",char);

</code></pre>

codeタグを使うことで囲まれた範囲がソースコードであることを明示します。さらにpreタグで改行・半角スペースをそのまま表示させます。 ちなみに、preタグを使用しないと以下のようになります。

HTML
<pre><code> var tmp = document.getElementsByClassName("hoege") ; var char="testID"; tmp[0].setAttribute("id",char); </code></pre>

改行や空白が自動的に変換されて詰めて表示されてしまい見にくいですね。 ソースコードを書くときはcodeタグとpreタグはセットで使うことが多いです。

特殊文字のエスケープ

ソースコードの中に特殊文字が含まれる場合、preタグとcodeタグで囲むだけではいけません。 特殊文字をエスケープして置き換える必要があります。

エスケープとは

文字列処理の1つで、ある特殊な文字を表示するために実施する置き換え処理

ソースコード内でよく使われる特殊文字は「<」「>」「'」「"」「&」です。 これらの特殊文字はそのまま書くのではなく以下のような文字に置き換えます。

置換前 置換後
< &lt;
> &gt;
' &#39;
" &quot;
& &amp;

具体的には以下のようにエスケープして置き換えます。

置換前
HTML
<pre><code>    

  <h1>見出し1</h1>

  </code></pre>
置換後
HTML
<pre><code>    

  &lt;h1&gt;見出し1&lt;/h1&gt;

  </code></pre>

h1タグの「<」と「>」が置き換わっているのがわかります。 このように、preタグ・codeタグ内で特殊文字を扱うときはエスケープして置き換えることを忘れないようにしましょう。

この記事のシェアはこちらから

当サイトについて

当サイト(KONOTI)は、日常生活において運営者が得た情報をご紹介するサイトです。 ジャンルに多少の偏りはありますが、基本的には様々な情報を取り扱っていく予定です。

Contact

当サイトへのご連絡は以下よりお願いします。

PAGE TOP ▲

© Copyright 2019 KONOTI