⚡

【Marp】Markdown でスライドをサクッと作る

に公開
VS Code
Markdown
Marp
tech

この記事の内容

Markdown で簡単にスライドを作成することができる Marp というツールの紹介。

1. Marp を導入する

1.1 拡張機能 Marp for VS Code をインストールする

https://marketplace.visualstudio.com/items?itemName=marp-team.marp-vscode

1.2 vscode デフォルトの Markdown プレビューボタンを表示する

setting.json
{
  "markdown-preview-enhanced.hideDefaultVSCodeMarkdownPreviewButtons": false
}

1.3 *.md ファイルの先頭におまじないを書く

marp: true で Marp を有効にする。
スライドの縦横比を指定したいときは size を指定する。

slide.md
---
marp: true
size: 16:9
---

プレビューボタンを押すと、スライドになっていることが確認できる。

2. Marp の基本のキ

2.1 改ページする

改ページしたい箇所に --- を挿入する。

2.2 カスタムのスタイルを当てる

① カスタムのスタイルは *.css で指定する。

custom-theme.css
/* @theme custom-theme */

@import 'default';

h1 {
  color: red;
}
コード 意味
/* @theme custom-theme */ カスタムテーマの名前をつける
@import 'default'; default のテーマを継承する

② *.md でカスタムテーマを指定する。

slide.md
  ---
  marp: true
+ theme: custom-theme
  size: 16:9
  ---

③ vscode にもカスタムテーマを教える。

setting.json
{
  "markdown-preview-enhanced.hideDefaultVSCodeMarkdownPreviewButtons": false,
+ "markdown.marp.themes": ["./custom-theme.css"]
}

スタイルが当たっていることを確認。

2.3 デカ文字を表示する

<!-- fit --> をつけると圧迫感を演出できる(?)

Discussion