htmlのソースコードをブラウザで表示したい//初心者がやってみた

くろ

htmlの解説記事を読んでるとコードがそのまま表示されてる

どうやってるんだろ？不思議～

しろ

と思って調べてる途中で気がついてしまいました。

ブログだと編集に「見たまま」モードと「html」モードがあって切り替えるとちゃんと表示されているではないですか。

　ー了ー

？

だがしかし、そもそも仕組みに興味があるので、続行です。

参考にしたサイトはこちら▽

HTMLでコードを表示する方法【初心者向け】 | TechAcademyマガジン

https://techacademy.jp/magazine/5711

【初心者向け】コードを表示する簡単な方法 | CodeCampus

https://blog.codecamp.jp/programming-code-indicate-1

htmlのソースコードを表示する

htmlのソースコードを表示する

エスケープする

特殊文字に指定されている文字に、割り当てられている記号を記述する。

< は &lt　、> は &gt　など。

lt=less than　、gt=greater than　だそうな。

前述通り、編集モードを切り替えると確認できます。

エスケープ処理というのは結構大事みたいで、対策してないと入力フォームなどから攻撃されてしまう可能性があるという。怖っ。

参照：

HTMLで特殊文字のエスケープ処理を行う方法【初心者向け】 | TechAcademyマガジン

https://techacademy.jp/magazine/12553

XSS(クロスサイトスクリプティング)やSQLインジェクションというものだそう。

▽こちら分かりやすかったです。

【初心者向け】SQLインジェクションの概要と対策方法 | カゴヤのサーバー研究室

https://www.kagoya.jp/howto/network/sql-injection/

<code>～</code>で囲む

コードをその他の文字列と区別して表示できる。

囲まれた部分は等幅フォントで表示される。

囲まれた中の特殊文字は記号(&ltなど)で置き換える(エスケープ)必要有り。

通常の表示　HOME

codeタグ使用 HOME

囲った箇所のフォント(and/or表示)が変わっているのが分かります。

英文中にソースコード表示する場合特に有用なのかもしれません。

<pre>～</pre>で囲む

<pre></pre>で囲むと改行やインデントの整形がそのまま表示される

エスケープの必要有り

preformatted text　書式化されたテキスト　の意

htmlでは連続したタグなどは一つにまとめられるので、改行は を用いますが、<pre>タグ使用では改行・インデントなどがそのまま表示されるので、特に長いコードを表示する際など見やすくなる、とのこと。

長いコード、うーん、imgとかでいいんですかね。

この画像のをそのまま使ってみます。

イラスト

これをエスケープして改行。そのまま連続して表示されてます。

htmlに戻ると改行はなくなり連続表示に戻っています。

これを改行して<pre></pre>で囲むと

<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/s/soycatblg/20210520/20210520122504.jpg" 
     width="200" 
     alt="イラスト" 
     title="" 
     class="hatena-fotolife" 
     itemprop="image" />

改行がそのまま表示されてます。背景色も変わっている。

ホホゥ。

特殊文字は他にも色々指定されてるんですね。

文字化けは分かりましたが、セキュリティーにも関係するとは、発見でした。

毎回感じますが、実際に覗いてみないと分からないことばかりです。

TechAcademyさん、CodeCampusさん、カゴヤのサーバー研究室さん、ありがとうございました。

関連ブログのhtml　カテゴリー記事一覧

大豆猫の空

気になること備忘録

htmlのソースコードをブラウザで表示したい//初心者がやってみた

htmlのソースコードを表示する

エスケープする

<code>～</code>で囲む

<pre>～</pre>で囲む