soycatのブログ

くろ

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

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

しろ

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

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

　ー了ー

？

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

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

HTMLでコードを表示する方法【初心者向け】 | TechAcademyマガジンhttps://techacademy.jp/magazine/5711

【初心者向け】コードを表示する簡単な方法 | CodeCampus
https://blog.codecamp.jp/programming-code-indicate-1"

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

エスケープする

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

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

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

参照：

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

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

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

【初心者向け】SQLインジェクションの概要と対策方法 | カゴヤのサーバー研究室
https://www.kagoya.jp/howto/network/sql-injection/

～ で囲む

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

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

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

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

～

で囲む

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

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

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

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

img src="https://image.space.rakuten.co.jp/d/strg/ctrl/9/90ea596899f14c1fba86253fb64a0686d2f4d897.51.9.9.3.jpeg" width="200" border="0" name="insertImg" />

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

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

img src="image.space.rakuten.co.jp/d/strg/ctrl/9/90ea596899f14c1fba86253fb64a0686d2f4d897.51.9.9.3.jpeg"
width="200"
border="0"
name="insertImg" />

改行がそのまま表示されてます。

ホホゥ。

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

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

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

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