obsidian-marp-pluginで楽々スライド作成を目指す

Transcript

1. obsidian-marp-pluginで楽々スライド作成を目指す かっか（X: @kakka_q） 1 / 7
2. モチベーション 個人用のメモツールをNotionからObsidianに移行したが、それに伴ってNotion Blogを使わなくなるので、新しいアウトプットのメディア・方式に悩んでいた 登壇資料を好んで読むので、自分も寄せてスライド形式にしてみようと思った Obsidianコアプラグインでスライド化はできるが、デザインが微妙すぎたのでス タイルをカスタムできるMarp連携を試してみることにした 2 / 7
3. やってみる 1. obsidian-marp-pluginをinstall 2. 良さげなテーマをここから探してcssをダウンロード、READMEに従って配置 i. Obsidian上でコピペするとcss.mdになるので注意 3. 設定を最初に書いて書き始める <!-- theme: gradient class: blue paginate: true --> 3 / 7
4. ちょっと詰まった部分 class は全体、 _class はページ単位のスタイル設定に利用する 複数スタイルの重ねがけは <!-- _class: lead invert --> のように普通のcssと 同じ半角スペース区切りで使える スタイルの lead や invert などはsectionに紐づいているので、テーマごとに使 えるものが異なる（拡張性が高いとも言える） Marpの詳細な使い方はこのZenn本にまとまっている 4 / 7
5. CSSをカスタムしてみた 5 / 7
6. 中央寄せの実装 gradientテーマには中央寄せが無かったので、cssに追加してみた sectionを追加して、 <!-- _class: lead blue --> とするだけで反映される section.lead { display: flex; flex-flow: column nowrap; justify-content: center; } section.lead h1, section.lead h2, section.lead h3, section.lead h4, section.lead h5, section.lead h6 { text-align: center; } 6 / 7
7. 感想 コンセプトがめちゃめちゃ良くて、スライドも作りやすい アウトプットしたいものだけ、スライドとしてSpeakerDeckなどに投稿するのが Obsidianの運用形態として面白そう 何故か画像が貼れなくてツラい（issue見る感じ拡張機能のバグっぽい） 7 / 7