ホームページ上で自作したコードたちを紹介していこうと思います。
ただ、そのままコードを記述するとうまくいかないだろうなと思い、ホームページ上にプログラミングのコードを表示する方法を調べてみました。
h1タグにテキストを記載しています
これはh2タグです。
ホームページ上にHTMLのコードを記載するには、preとcodeというタグを使用します。
preは記載した通りの段落を表現してくれます。そしてcodeの中をHTMLコードとして認識してくれます。
以下の通り、コードを書きます。説明の都合上、＜＞は全角にしていますが、実際は半角にする必要があります。
-----------------------------
＜pre＞
＜code＞＜/code＞
＜/pre＞
-----------------------------
さて、これを使って記載してみます。
すると、以下のようにh1やh2タグが効いた状態で表示されてしまいました。
h1タグにテキストを記載しています
これはh2タグです。
ちなみに以下の通りコードを書いています。
また、不等号記号を全角で記載しています。
全角で書けばいいんではと思ってきますが、これだと段落の表現が難しいですね。
-----------------------------
＜pre＞
＜code＞
＜h1＞h1タグにテキストを記載しています＜/h1＞
＜h2＞これはh2タグです。＜/h2＞
＜/code＞
＜/pre＞
-----------------------------
さて、何が原因かというと不等号の書き方のようです。
「＜」を「＆ｌｔ；」、「＞」を「＆ｇｔ；」と記載しなおす必要がありました。
書き直してみたのが以下です。思っている形になりました。
<h1>h1タグにテキストを記載しています</h1>
<h2>これはh2タグです。</h2>
ちなみにコードは以下です。
-----------------------------
＜pre＞
＜code＞
＆ｌｔ；h1＆ｇｔ；h1タグにテキストを記載しています＆ｌｔ；/h1＆ｇｔ；
＆ｌｔ；h2＆ｇｔ；これはh2タグです。＆ｌｔ；/h2＆ｇｔ；
＜/code＞
＜/pre＞
-----------------------------
地道に不等号の変換をするのは大変なので、Javascriptを使って、楽します。
使ったコードは以下です。replaceの中の「＜」「＞」「＆ｌｔ；」「＆ｇｔ；」はHTMLにうまく表示するため例のごとく全角なので、使うときは半角に修正しています。
var cl = document.getElementsByClassName("code-display");
for (i=0;i < cl.length;i++){
var clstr =cl[i].innerHTML;
clstr = clstr.replace(/＜/g,'＆ｌｔ；');
clstr = clstr.replace(/＞/g,'＆ｇｔ；');
document.getElementsByClassName("code-display")[i].innerHTML = clstr;
}
このとき使っているHTMLは以下です。
divを追加しています。
-----------------------------
＜pre＞
＜code＞
＜div class="code-display"＞＜/div＞
＜h1＞h1タグにテキストを記載しています＜/h1＞
＜h2＞これはh2タグです。＜/h2＞
＜/div＞
＜/code＞
＜/pre＞
-----------------------------
divで囲んだコードの不等号をJavascriptで自動的に文字実態参照に置き換えています。
ちなみに、Javascriptを別ファイルで作成したので、それを適用したHTMLファイルのbodyタグの内側にscript src=...を記述する必要があります。書き方は調べればすぐ出てくるので、ここでは一旦省きます。
divの中を取得しています。divにはClass名をcode-displayと付けているので、getElementsByClassNameで取得できます。
documentはJavascriptを置いたHTMLファイル全体を指しています。
取得したcode-displayの数を数えて、その分カッコ内の作業を繰り返します。
divにClass名を付け、forで繰り返すことで、一つのファイルに複数変換したい部分があっても対応可能です。
取得したdivの中にあるHTMLを取得しています。
まずは＜を文字実態参照に置き換えます。/＜/gと書いているのはスラッシュの中に書いた記号すべてについて置き換えます、という意味です。
gと書かないとすべて変換にはなりません。
次に＞も文字実態参照に置き換えます。
最後に、文字実態参照に置き換えたものを表示します。
これで完成です。
HTML上にHTMLのコードを直接表示したいときは、不等号を文字実態参照に置き換える必要があります。
手作業でひとつずつ置き換えてもいいんですが、Javascriptを使えば自動で簡単に置き換えができます。