と思って調べてる途中で気がついてしまいました。
ブログだと編集に「見たまま」モードと「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/
<code>~</code>で囲む
通常の表示 <em class="blogicon-home">HOME</em>
codeタグ使用 <em class="blogicon-home">HOME</em>
囲った箇所のフォント(and/or表示)が変わっているのが分かります。
英文中にソースコード表示する場合特に有用なのかもしれません。
<pre>~</pre>で囲む
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さん、カゴヤのサーバー研究室さん、ありがとうございました。