CursorとMarpのセットアップメモ
CursorとMarpのセットアップメモ
コードを書く仕事してなくても生成AIツールを使っていかないとなーと思い、個人のプレゼン資料を作るのにCursorと、Marpを組み合わせてみる。CursorはVSCodeをベースにしたAIエディタ、Marpはmarkdownからスライドを作成するツールである。
自分は普段のスライド作成はGoogleスライドを使っている。今回セットアップした環境はWindowsだが、Macでもショートカットキーなど細かい違いしかないと思う。
セットアップ
- Cursorのインストール
この後も使うんじゃないかと思ってアカウントを作成した。
- CursorにMarp for VS Code拡張機能を入れる
CursorでView -> Extension で検索バーに「Marp for VS Code」を入力してInstallを選択する。
使い方
Marpの動作確認をするにあたってCursor自体の使い方がわからなかったのでメモ。
左側に出した拡張機能のSideBarを消す方法
右上にある「Toggle Primary Side Bar」アイコンをクリックすると消せる。
VSCodeでは下記アニメーション画像のように、わかりやすいアイコンのクリックで表示・非表示を切り替えられるので意識したことがなかった。
プレビューを表示する
新規テキストファイルを作成し、Marp for VS Code Extensionの説明ページに書いてある、次のテンプレートを貼り付ける。
---
marp: false
---
# Your slide deck
Start writing!
これを.mdファイルとして保存するとファイル名タブの右側に「Open Preview to the Side」のアイコンが表示される。このアイコンをクリックすると右側に分割してプレビューが表示される。
補足：この「Open Preview to the Side」アイコンは、.md形式で保存しないと表示されない場合があった。新規作成直後、保存前は表示されなかった。ただ別タブで.mdファイルを既にプレビューしていると表示される場合もあったり、詳細な挙動は不明だが.mdで保存すれば確実だった。
最初はMarkdownとしてのプレビューが表示される。スライドのしてのプレビューを表示するには、ファイル名タブ右側の「Open Preview to the Side」の右隣にあるMarpアイコンをクリックする。Marpでできることが表示されるので、「Toggle Marp Feature For Current Markdown」を選択する。スライドのプレビューができた。
文の右端を折り返し表示する
分割表示するとわりとすぐに1行あたりの文字数が長く横スクロールしてしまう。View->word wrap で折り返し設定ができる。これはVSCodeと同じだった。
スライドサンプルを作ってみる
Marpの記法のdocumentはこちらにある。
が、とりあえずCursorの生成機能にサンプルを作ってもらう。Ctrl+Iを押すとchat、Ctrl+Kを押すとgenerateが起動するらしい。そのようにCursorのエディタ上に表示されているのでわかりやすい。
generateを起動して「marpで作成するスライドのテンプレートを書いてください」としたところ、正しくGenerateされた。
文章は書き始めの最初が一番腰が重くて、書き始めてしまえばわりと筆が進むことが多い。中身はなくてもいったんそれっぽいテンプレートができるだけでも進んだ気持ちになってやる気が出る気がする。
PDFを出力する
ファイル名タブの右のMarpアイコンをクリックし、「Export Slide Deck」を選ぶとPDFを出力できる。これでいったんの動作確認は完了。
この後
過去のスライドを読み込ませて、自分がよく使う流れをテンプレートにして書き進められないかと思っている。あとはまだ話すネタをしっかり錬られていないのでその壁打ちをしながら作ってみるとか試したい。あとは画像や動画を使うことも多いのでそのやり方だとか、デザインのあて方など調べたいことはたくさんある。
また悩ましいのがmarkdownファイルをどのように保存し管理していくか。ローカルに保存していると1つの端末からしか見られないし、バックアップの意味でもクラウドに保管したいがわざわざGitHubを使うのも面倒。みんなどうしてるんだろう。
あとこの記事もCursorを使って書いてみたが、まだほとんど活かせていないしzennとの二重管理になるのも手間である。いろいろ模索していきたい。
Discussion