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
62
Marp + Cursorによるスライド生成
imaimai17468
July 31, 2024
Tweet
Share
More Decks by imaimai17468
See All by imaimai17468
Next.jsでクエリパラメータを楽に扱おう nuqsを紹介!
imaimai17468
3
710
TailwindCSSで学ぶ技術批判の気をつけ方
imaimai17468
6
5.7k
Next.js+yjs+BlockNoteでNotionライクな最高の共同編集エディタを作ろう
imaimai17468
0
2.1k
BlockNoteを布教するぜ
imaimai17468
0
26
Next.jsにおけるLazy Loading
imaimai17468
0
190
Featured
See All Featured
The Language of Interfaces
destraynor
153
23k
Side Projects
sachag
451
42k
Faster Mobile Websites
deanohume
304
30k
The Invisible Customer
myddelton
119
13k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
248
20k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
26
2k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
278
13k
How To Stay Up To Date on Web Technology
chriscoyier
786
250k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
41
6.5k
A Philosophy of Restraint
colly
202
16k
Intergalactic Javascript Robots from Outer Space
tanoku
268
26k
Product Roadmaps are Hard
iamctodd
PRO
48
10k
Transcript
Marpでのスライド作成 いまいまい 1
Marpとは? Markdownを使ってスライドを作成 シンプルで直感的な操作 プレゼンテーションの素早い作成が可能 2
マークダウン形式で記述可能 テキストエディタで編集可能 バージョン管理システムとの相性が良い 学習コストが低い 3
シンプルで直感的な操作 レイアウトを詳しく考える必要がない マークダウン記法を使用 見出し、リスト、強調などの基本的な書式が簡単に適用可能 画像の挿入も簡単 例: ![alt text](image.jpg) 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