JSX や ${} が入ってくると崩れやすいようです
highlight.js はメジャーアップデートが進んでたのでアップデートしてみました
軽く見た感じでは改善されてるようでした
これに合わせて highlight.js は CDN から動的に取得するよう変更しました
これまでは CDN が落ちてたり重かったりすることも考えて 一応ブログのサーバーにライブラリをアップロードしていました
CDN が落ちることはめったに無いとはいえ 画面表示に関わる部分ですし インポートに失敗すると初期化処理が中断されるのでサイドバーなど関係ない部分もちゃんと表示されなかったり動作しなかったりすることになりますし
ですが そこまで重要なブログでもないですし ライブドアブログのストレージにライブラリを配置すると更新するのが結構面倒だったので CDN に頼ることにしました
highlight.js の言語モジュールについてですが 画面に必要なもののみインポートするようしました
最初は手抜きで 全部のページで同じファイルのロードで考えてました
しかし ごく一部のページでしか使ってないマイナー言語も多くありました
nim とか elm とか vbs とか
こういうのがあるたびにロードする言語を追加するのは面倒です
それに CSS しかハイライトしないページでも 関係ない言語のモジュールをいくつもロードするのはムダです
ということで highlight.js は言語モジュールを含まない core 版をロードして 言語モジュールはすべて別途ロードさせるようすることにしました
ただこうすると 本来は highlight.js 側で管理してくれているエイリアスを自分で管理しないといけなくて面倒でした
JavaScript の言語モジュールは javascript.min.js というファイル名です
js という言語名から自動でこのファイルをインポートできないので 自分でエイリアス情報を管理して js を javascript に置き換えてからモジュールをインポートします
また code タグごとに並列して処理すると 同じ言語の code タグが複数あるときに少し面倒です
言語ごとに Promise を保持するようにして 最初にロードするときに Promise を作って 2 つ目以降では その Promise が解決されたら処理という感じにしないといけません
また 依存関係もあります
HTML だと内部で CSS や JavaScript も表示するという感じです
JavaScript が内部で HTML を表示することもあるので循環参照します
上記のような単純な Promise だと循環参照したときにデッドロック化することもあり 対応がとても面倒です
ここを頑張る気力もなかったので 2 段階の処理にしました
先に今のページに存在する言語とその言語に依存する言語の一覧を作ります
それらを全部インポートしてから ハイライト処理に移ります
全部の言語モジュールをインポートするまでハイライト処理が始まらないので少し遅くなりますが 2 回目以降はキャッシュされてますし 全部の言語と言ってもそのページで使われるものだけで ほとんどのページでは 2, 3言語くらいです
それくらい別にいいかなと楽な方にしました
ところで ライブドアブログのファイルマネージャーは相変わらず使いづらいです
まとめてアップロードやまとめて削除する機能がないです
10 くらいなら手動でやってもいいですが 100 近くもあるとさすがに嫌です
ひとつひとつボタン押してられないので 自動化しました
ブラウザでファイルマネージャーの画面を開いてコンソールで下のコードを実行します
これで今開いてるフォルダ内の全ファイルを上から順番に削除します
while (true) {
const img = document.querySelector(`.ftpFileList img[alt="削除する"]`)
if (!img) break
img.click()
await new Promise(r => setTimeout(r, 1000))
const ok = document.querySelector(`input[value="削除"]`)
if (!ok) {
alert("削除ボタンがみつからない")
break
}
ok.click()
await new Promise(r => setTimeout(r, 1000))
}
最初の img が×アイコンのボタンなので ここのセレクタのところで条件に一致するものだけにしたり 残したいものを除外したりします
いつの頃からかフォルダの削除はできるようになってたので 本当に全部削除だとフォルダを消したほうが早いです
一応 API も用意されてるのですが 使いやすくないし面倒なのでこれのほうが楽だったりします