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
Marp + Cursorによるスライド生成
Search
imaimai17468
July 31, 2024
0
190
Marp + Cursorによるスライド生成
imaimai17468
July 31, 2024
Tweet
Share
More Decks by imaimai17468
See All by imaimai17468
フロントエンド設計の所感 1年目
imaimai17468
0
13
Silk Weave -未来研究大会発表資料-
imaimai17468
1
12
Next.jsでクエリパラメータを楽に扱おう nuqsを紹介!
imaimai17468
3
1.3k
TailwindCSSで学ぶ技術批判の気をつけ方
imaimai17468
6
6.2k
Next.js+yjs+BlockNoteでNotionライクな最高の共同編集エディタを作ろう
imaimai17468
0
2.6k
BlockNoteを布教するぜ
imaimai17468
0
29
Next.jsにおけるLazy Loading
imaimai17468
0
400
Featured
See All Featured
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.7k
A Modern Web Designer's Workflow
chriscoyier
693
190k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
114
50k
A designer walks into a library…
pauljervisheath
205
24k
Bootstrapping a Software Product
garrettdimon
PRO
306
110k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Fireside Chat
paigeccino
34
3.2k
BBQ
matthewcrist
87
9.5k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.8k
Raft: Consensus for Rubyists
vanstee
137
6.8k
Scaling GitHub
holman
459
140k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Transcript
Marpでのスライド作成 いまいまい 1
Marpとは? Markdownを使ってスライドを作成 シンプルで直感的な操作 プレゼンテーションの素早い作成が可能 2
マークダウン形式で記述可能 テキストエディタで編集可能 バージョン管理システムとの相性が良い 学習コストが低い 3
シンプルで直感的な操作 レイアウトを詳しく考える必要がない マークダウン記法を使用 見出し、リスト、強調などの基本的な書式が簡単に適用可能 画像の挿入も簡単 例:  4
プレゼンテーションの素早い作成が可能 テンプレートの活用 リアルタイムプレビュー エクスポート機能 PDF、 HTML、画像形式など 5
基本的なスライド構成 --- marp: true theme: default --- # タイトル ---
## セクション - ポイント1 - ポイント2 6
環境設定 1. VSCodeをインストール 2. Marp for VSCode拡張機能を追加 3. 新しい Markdownファイルを作成
7
デフォルトテーマの種類 Marpには以下のデフォルトテーマがあります: 8
Default テーマ シンプルで汎用的なデザイン 9
Gaia テーマ モダンでスタイリッシュなレイアウト 10
Uncover テーマ ミニマルでクリーンな外観 11
invert指定 invertクラスを指定することで、ダーク モードに切り替えることができます。 12
スタイルのカスタマイズ Marpでは、細かいスタイル指定が可能です。 background や color などで簡易的な指定 styleによる詳細な指定 13
Cursorとの相性 Cursorを使用することで、 Marpスライドの作成がさらに効率的になります。 14
Cursorの主な機能 Edit: AIによるコード編集支援 Chat: コンテキストを理解したチャット機能 その場での補正 : リアルタイムでのコード修正 15
まとめ これくらいのスライドだったら 15分で作れました Marpで簡単にスライド作成 Cursorとの相性抜群 デザインの自由 16