remark-rehypeとrehype-stringifyにHTMLを書くことを許可する

remark-rehypeとrehype-stringfyはHTMLを書いても消えてしまう

現在自分のブログをこのようにremarkとrehypeなどを用いて構築している。
https://www.yodaka-star.com/posts/i_made_blog

しかし、これだと実はmarkdownにHTMLを書いても消えてしまう。
ちなみにHTMLをmarkdownに書いて機能させるのは、ここに書いてあるsanitizeとは違う。
https://github.com/rehypejs/rehype/tree/main/packages/rehype-stringify#security
このsanitizeはscriptタグを削除してXSS対策するもの。

おそらくどこかに生HTMLを機能させるのに必要なオプションがあると思い、探した。
rehype-stringfyの中で使っているこのライブラリのオプションに発見した。
https://github.com/syntax-tree/hast-util-to-html#optionsallowdangeroushtml

解決方法

このように設定すればHTMLが削除されずにそのまま吐き出される。

    const result = await unified()
        .use(remarkParse)
        .use(remark2rehype, { allowDangerousHtml: true })
        .use(rehypeStringify, { allowDangerousHtml: true })
        .process(markdown)

このオプション自体はデフォルトでfalseになっているのでtrueにする必要がある。
また、remark,rehype関連のライブラリが中でhast-util-to-htmlを使っている場合、それぞれにこのオプションがあるのでそこでもtrueにする必要がある。例えばremark-rehypeなんかがそう。

探すのに意外と時間がかかったので記事にしておく。