0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

資料作成・伝え方・まとめ方に関して話したいAdvent Calendar 2023

Day 5

Marp for VS Codeを導入する:入門編

Last updated at Posted at 2023-12-05

はじめに

Markdownでスライド作ることできたら楽だよねえってことで、Marpでスライドを作る環境整えることとしました。
今回は入門編ということで、Marpなんたるかなどはかっ飛ばして環境構築〜とりあえず使うの流れについてのみ書きます。
Marpのサイトはこちら

前提:PC環境等

  • Mac OS 13.0
  • Visual Studio Code 1.84.2

環境構築

Marp for VS Codeの拡張機能をVSCodeに入れる。
以上です!簡単!
リンクからインストールまたはVSCode内で拡張機能を検索→インストールしてみてください。

最低限の書き方

  1. .mdのファイルを開きます

  2. ファイルの頭に以下のように記述します

    ---
    marp: true
    ---
    

  3. それ以下普通にMarkdownで文章作成していくと、勝手にスライドっぽくなってくれます
    スクリーンショット 2023-12-05 23.30.32.png

  4. 改ページしたい箇所には以下のようにハイフン3つを挿入します
    スクリーンショット 2023-12-05 23.33.07.png

スライドをPDF出力する

  1. プレビューではなく、Markdownの方のタブに三角が2つ重なったようなアイコンがあるので、そちらをクリックします
    スクリーンショット 2023-12-05 23.34.59.png

  2. コマンドの候補が出てくるので、"Export Slide Deck..."をクリックします
    スクリーンショット 2023-12-05 23.35.20.png

  3. 見慣れたファイル保存のウインドウが表示されるので、保存したい場所にPDFで保存します

おわりに

ただ書いて出力するだけだったらこれだけでOKです!
Markdownがそのままスライドになってくれるので、普段の作業をMarkdownでメモしているとちょっとした進捗報告などサラッとできて便利です。
ここ3~4ヶ月くらい使っていて、Marp関連はまだたくさん書きたいことあるので、これを機会に理解深めながらまとめていけたらと思います!

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?