【Astro】MermaidのダイアグラムをJSの配信なしで表示するため、執筆時にSVGへ事前描画する仕組みを作った
Astro で作ったこのブログでは、記事に Mermaid のコードブロックを書くと、執筆時に事前描画した SVG の画像として表示されます。Mermaid の JS を配信せずに、Mermaid のダイアグラムを記事中に表示できます。ダイアグラムを表示する 4 つの方法の比較と、事前描画した SVG を記事のソースどおりに保つ仕組みを紹介します。
全 2 記事
Astro で作ったこのブログでは、記事に Mermaid のコードブロックを書くと、執筆時に事前描画した SVG の画像として表示されます。Mermaid の JS を配信せずに、Mermaid のダイアグラムを記事中に表示できます。ダイアグラムを表示する 4 つの方法の比較と、事前描画した SVG を記事のソースどおりに保つ仕組みを紹介します。
はてなブログから移ってきたこのブログの構成メモ。Content Collections のスキーマ、Tokyo Night に揃えた配色、そして初期ロードの JavaScript を 1 バイトも配信しないための判断を書く。