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
370
Marp + Cursorによるスライド生成
imaimai17468
July 31, 2024
Tweet
Share
More Decks by imaimai17468
See All by imaimai17468
コーディングチェックの自動化がしたい!
imaimai17468
4
1k
型パズルを好きになるために、競プロを型システムだけで解いてみることにした
imaimai17468
5
590
フロントエンド設計の所感 1年目
imaimai17468
0
49
Silk Weave -未来研究大会発表資料-
imaimai17468
1
26
Next.jsでクエリパラメータを楽に扱おう nuqsを紹介!
imaimai17468
3
1.7k
TailwindCSSで学ぶ技術批判の気をつけ方
imaimai17468
7
6.6k
Next.js+yjs+BlockNoteでNotionライクな最高の共同編集エディタを作ろう
imaimai17468
0
2.8k
BlockNoteを布教するぜ
imaimai17468
0
34
Next.jsにおけるLazy Loading
imaimai17468
0
540
Featured
See All Featured
KATA
mclloyd
30
14k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
990
Building an army of robots
kneath
306
45k
Statistics for Hackers
jakevdp
799
220k
Speed Design
sergeychernyshev
32
1k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
GitHub's CSS Performance
jonrohan
1031
460k
Git: the NoSQL Database
bkeepers
PRO
430
65k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
The Invisible Side of Design
smashingmag
301
51k
How STYLIGHT went responsive
nonsquared
100
5.6k
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