Twitter の widget が展開されない問題の解決
Twitter の widget がローカル開発環境でしか展開されず、Prism.js のシンタックスハイライトもローカル環境でしか効かない。どうしたものか、と連日悩んでいた。
で、今日の夜に@marusho_summersと Discord でもくもくしていたのだけど、そのときに@marusho_summers が「next のバージョンばんばん上げてるね〜」ということをふっと言って、僕は「もしかしてなんかのバージョンアップで起きた不具合か！？」となり、直近でマージした dependabot のプルリクエストを見たところ remark-html のバージョンアップをマージしていた。
今日 @marusho_summers ともくもくしていて、ふとした一言がきっかけでremark-htmlのバージョンアップが原因でバグっていたことに気づいた
— tagucch (@tagucch) September 16, 2021
いくら個人開発だからといってdependabotノールックマージは迷走の原因になるのでやめようと思いました…… pic.twitter.com/gRowyd4JWE
チェンジログを見て、「うわこれめちゃくちゃ原因っぽい！」となった。
Twitter のツイートに関しては、Embed Tweet のコピーをそのままマークダウンに貼り付けているため、なんかこれっぽいな〜という感じがしたが、まあそのとおりでした。
Prism.js の導入が原因かと勝手に思い込んでいたんだけど、原因の切り分け方があまりにも思い込みでやりすぎていて一度深みにハマると抜け出せないのが本当によくない。もっと柔らかい頭と広い視野と鋭い洞察で原因の切り分けができるようになりたい。
なんか Prism.js のシンタックスハイライトも直った
Twitter の widget 展開のため、{ sanitize: true }を足すだけのプルリクエストをマージしたら、なぜか Prism.js のシンタックスハイライトも直った。
メモ置き場なのでメモを書いておくと、まず remark-html でマークダウンを HTML に変換するときに、コードブロックの拡張子に応じて、code タグにlanguage-xxxというクラスをつけてくれる。
例として、コードブロックに ts をつけると、remark-html がlanguage-tsというクラスをつけてくれる。
で、Prism.js はこのlanguage-tsというやつを認識して、その言語に合わせたシンタックスハイライトをつけてくれるのだけど、上述のアップデートでこのクラスを付与する部分もできなくなっていたらしい。
ローカル開発環境で devtools から element を見るとクラス名が付与されていたが、本番環境では付与されていなかった。これが原因で本番環境だけシンタックスハイライトが効いていなかったらしい。
なるほどなあ……。
まとめ
いくら個人開発だからといっても dependabot のプルリクエストのノールックマージはやめようと強く思いました。