2021/08/26大幅更新

仕様が変わったのか、私の調査が甘かったのかわからないですが、とにかく記載に大きな変更があります。

また、表題の件についてご質問・ご意見等ございましたらお気軽にコメントください。調べて追記いたします。

コメントが使える

HTMLのコメントアウト<!--と-->は使えますので

<!--
見えへんで！
 -->

みたくすると推敲の前に一時的に隠しておいて後から表示するというのができます。

現在確認する限り、ソースコードレベルで消えてるので記事に非公開にしたい情報を記載しても大丈夫です。 後々袋とじにしたい部分を先に書いておくとかできそうですね。

画像をコメントアウトするときだけ要注意

記事カバー画像は、本文中に表示されている画像のURLのみ参照して選択させる方式になっているので、コメントアウトすると背景が未選択になってしまうのでお気をつけください。

無視されるタグ

これが次に大きく変わったらさすがに別の記事にしようかなと思います。

scriptタグは無視される

普通にscriptタグはHTMLソースレベルで削除してます。

ちなみに"` "で文字列を囲うか　"```"でコードブロックとして書いた場合はきちんとHTMLエスケープしてくれますので技術系の執筆には問題ないです。

<script>document.write("content by script")</script>

<script>document.write("content by script")</script>

XSS脆弱性はない

"><script>alert("this article has an XSS vulnerability")</script><!--

が "><!-- になるのでHiDEにXSS脆弱性はないと言えます。

当たり前だけど確認しました。

無視されないタグと属性

style属性は無視されない

<p style="font-family:serif">serifs</p>
<p style="font-family:sans-serif">san serifs</p>
<p style="font-family:cursive">cursives</p>

と書いても

serifs

san serifs

cursives

きちんと反映されるようです。^[1]

styleタグも無視されない

scriptタグとは違い、コードとしては表示可能かつ本文（ソースコード）に含まれていました。

<style>.alert{color:red;font-weight:bold}</style>

<style>.alert{color:red;font-weight:bold}</style>

のような記述が文頭でも文末でも挿入されていればスタイルが反映されます。

なので、アカネさんの【コピペで使える】HiÐΞに吹き出しを表示するコードのようなかなり自由度の高い表現がHiÐΞでは可能です。

id属性は除外されない

text with id

<p id="anchor">text with id</p>

のような記載は有効です。したがってaタグ等を使って本文中の任意のアンカーにジャンプさせることはできます。

class属性も除外されない

のでstyleタグと組み合わせることでめちゃくちゃ遊べます。

title属性も除外されない

試しに➡️ここの文字列⬅️にマウスオーバーしてみてください。

特定の文字列をポップアップ表示させて本文以外も読まなければいけない記事を作ることすらできます。

無視される属性

誰か私の代わりに調べてください。

特定のイベントによってjavascriptを起動するonmouseoverなどの属性は削除しているようです。^[2]

試しに上の赤字の部分にマウスオーバーしてみてください。

じゃあどうやって装飾したらいいの？

基本的にはMarkdownを使いましょう。

taakeさんのこちらの記事を超えるまとめはないと思いますので共有いたします。

スタイルシートで遊ぼうぜ！

なんかもう、そういう選手権誰か開催してくれない？ってレベルで可能性が無限大です。

fontタグが使えるけどブラウザ依存かも

フォントを変える、フォントサイズを変えるというのはHTML4時代のfontタグが今のところ使えるようです使えますが非推奨です。^[3]

一応例示として残しておきますね。

we can use font tag like this

<font color=“#0000ff” face=“cursive”>we can use font tag</font>
<font face=“cursive” size="7">like this</font>

上記はスタイルシートで完全互換状態で置換可能なのでこれから書く記事にはもう使わない方がいいです、とだけ。

iframeタグは使えるけどブロックされるみたい

<iframe src="https://www.youtube.com/watch?v=rQcKIN9vj3U&list=FL-qqmGV7CweS6RBwbRq0OLQ&index=1&t=59s"></iframe>

みたくするとこうなります。

これに対する解決策は既に先ほど紹介した記事にまとまってますね。

<div><div style="left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.25%;">
<iframe src="//cdn.iframe.ly/wUxSejA?click_to_play=1" style="top: 0; left: 0; width: 100%; height: 100%; position: absolute; border: 0;" allowfullscreen scrolling="no" allow="autoplay *; accelerometer *; clipboard-write *; encrypted-media *; gyroscope *; picture-in-picture"></iframe>
</div></div>

このようにするとちゃんとこうなります。

最後に

ここまでお読みいただきありがとうございました。

本文へのご指摘や加筆依頼等はコメントでお願いします。

また、本記事はMarkdown形式でダウンロード可能にしておきますので、ソースコードや記事本文を比較して読んでいただけると一層理解が深まる構成となっております。

---

1. おかしいなぁ。この記事書いた当時はわざわざ消されてたんだけどなぁ。 ↩︎

2. 一個一個全部テストするのが手間。どうせ正規表現使って削除してるだろうし、きっとスクリプトのソース読んだ方が早いですね。 ↩︎

3. スマホやChrome以外のブラウザで意図しない表示になる恐れあり ↩︎