astroブログでmarp対応した

目次

• 開発背景
• 実装について
• スライドデザイン

なぜ作成した？

自分だけのスライドテンプレートが欲しかった

• 自分の好みの形式のスライドを作りやすくしたい
• スライドを公開しやすくしたい

marpとは？

Markdownでスライドを作成できるツール

marpの良さ

構造化されたテキストでスライドを作成することができる

• スライドの一貫性とアクセシビリティを担保しやすい
• AIエージェントを使ってスライドを作れる

Astroでのmarkdownの公開

Astroのコンテンツ管理システムのContent Collectionsを使用

• src/content/posts/ にMarkdownファイルを配置
• getCollection() で/src/content/postsにあるファイル一覧の内容を取得
• ページとしてサイト公開

使用技術2

marp-team/marp-core

Node.js環境でMarp形式のMarkdownをHTML/CSSに変換

const marp = new Marp();
const result = marp.render(post.body);

<div class="slide-container" set:html={result.html} />
<style set:html={result.css} />

桜井政博さんの教え

意識したこと

各スライドの主張を明確にする

• 結論を一番強く装飾
• 情報をあまり詰めれないようにした