大豆猫の空

気になること備忘録

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

 

 

くろ
htmlの解説記事を読んでるとコードがそのまま表示されてる 
どうやってるんだろ?不思議~
 
しろ

 

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

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

 ー了ー

 

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

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

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

 https://techacademy.jp/magazine/5711

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

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

 

 

 

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など)で置き換える(エスケープ)必要有り。

 

通常の表示 <em class="blogicon-home">HOME</em> 

codeタグ使用 <em class="blogicon-home">HOME</em>

 

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

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

 

<pre>~</pre>で囲む

 

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

エスケープの必要有り

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

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

 

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

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

イラスト

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

<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" />

 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 カテゴリー記事一覧