Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
obsidian-marp-pluginで楽々スライド作成を目指す
Search
Wisteria30
November 04, 2023
Technology
0
1.5k
obsidian-marp-pluginで楽々スライド作成を目指す
Wisteria30
November 04, 2023
Tweet
Share
More Decks by Wisteria30
See All by Wisteria30
スマホ遍歴を語ろう
wisteria30
0
55
LLMと生きていくためのアーキテクチャ
wisteria30
0
95
Other Decks in Technology
See All in Technology
Databricks AI/BI Genie の「値ディクショナリー」をAmazonの奥地(S3)まで見に行く
kameitomohiro
1
410
Azureコストと向き合った、4年半のリアル / Four and a half years of dealing with Azure costs
aeonpeople
1
300
現場の壁を乗り越えて、 「計装注入」が拓く オブザーバビリティ / Beyond the Field Barriers: Instrumentation Injection and the Future of Observability
aoto
PRO
1
600
Open Table Format (OTF) が必要になった背景とその機能 (2025.10.28)
simosako
2
210
[VPoE Global Summit] サービスレベル目標による信頼性への投資最適化
satos
0
250
AI時代の開発を加速する組織づくり - ブログでは書けなかったリアル
hiro8ma
1
310
ゼロコード計装導入後のカスタム計装でさらに可観測性を高めよう
sansantech
PRO
1
440
IBC 2025 動画技術関連レポート / IBC 2025 Report
cyberagentdevelopers
PRO
2
180
会社を支える Pythonという言語戦略 ~なぜPythonを主要言語にしているのか?~
curekoshimizu
3
670
SRE × マネジメントレイヤーが挑戦した組織・会社のオブザーバビリティ改革 ― ビジネス価値と信頼性を両立するリアルな挑戦
coconala_engineer
0
250
AIエージェントによる業務効率化への飽くなき挑戦-AWS上の実開発事例から学んだ効果、現実そしてギャップ-
nasuvitz
5
1.2k
MCP ✖️ Apps SDKを触ってみた
hisuzuya
0
370
Featured
See All Featured
For a Future-Friendly Web
brad_frost
180
10k
Done Done
chrislema
185
16k
Keith and Marios Guide to Fast Websites
keithpitt
411
23k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
130k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
230
22k
Visualization
eitanlees
149
16k
Build your cross-platform service in a week with App Engine
jlugia
233
18k
Code Reviewing Like a Champion
maltzj
526
40k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
Build The Right Thing And Hit Your Dates
maggiecrowley
38
2.9k
Being A Developer After 40
akosma
91
590k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.2k
Transcript
obsidian-marp-pluginで楽々スライド作成を目指す かっか(X: @kakka_q) 1 / 7
モチベーション 個人用のメモツールをNotionからObsidianに移行したが、それに伴ってNotion Blogを使わなくなるので、新しいアウトプットのメディア・方式に悩んでいた 登壇資料を好んで読むので、自分も寄せてスライド形式にしてみようと思った Obsidianコアプラグインでスライド化はできるが、デザインが微妙すぎたのでス タイルをカスタムできるMarp連携を試してみることにした 2 / 7
やってみる 1. obsidian-marp-pluginをinstall 2. 良さげなテーマをここから探してcssをダウンロード、READMEに従って配置 i. Obsidian上でコピペするとcss.mdになるので注意 3. 設定を最初に書いて書き始める <!--
theme: gradient class: blue paginate: true --> 3 / 7
ちょっと詰まった部分 class は全体、 _class はページ単位のスタイル設定に利用する 複数スタイルの重ねがけは <!-- _class: lead invert
--> のように普通のcssと 同じ半角スペース区切りで使える スタイルの lead や invert などはsectionに紐づいているので、テーマごとに使 えるものが異なる(拡張性が高いとも言える) Marpの詳細な使い方はこのZenn本にまとまっている 4 / 7
CSSをカスタムしてみた 5 / 7
中央寄せの実装 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
感想 コンセプトがめちゃめちゃ良くて、スライドも作りやすい アウトプットしたいものだけ、スライドとしてSpeakerDeckなどに投稿するのが Obsidianの運用形態として面白そう 何故か画像が貼れなくてツラい(issue見る感じ拡張機能のバグっぽい) 7 / 7