MarpでMarkdownでスライドを作る

勉強会や登壇でスライドを作るのって結構大変で、ツールごとにお作法みたいなものがあって割と面倒だなーと思っておりました。Markdownで書けると最高だなって思ってましたが、なんかツールがあるっぽいので、ご紹介です。

Marp

Markdownでスライドが作れるMarpです。

marp.app

CLIとVSCodeの拡張がありますので、好きな方を使うと良いと思います。

Marp記法

基本的にMarkdownですが、先頭にMarpであることを宣言します。

---
marp: true
theme: sample-theme
paginate: true
---

themeは、CSSで記述します。

/* @theme sample-theme */
/* モダンでクリーンなテーマ */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&family=Inter:wght@400;500;700&display=swap');

section {
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  font-family: 'Noto Sans JP', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  color: #1a1a1a;
  padding: 60px 80px;
  font-size: 20px;
  line-height: 1.7;
}

h1 {
  color: #c41e3a;
  font-size: 56px;
  font-weight: 900;
  letter-spacing: -0.02em;
  margin-bottom: 20px;
  line-height: 1.2;
  border-left: 8px solid #c41e3a;
  padding-left: 24px;
}
...
...
...

VSCodeでのサンプル

VSCodeのサンプルはこちらになります。(最近、JavaでDataFrameを触ってて、結構いいので紹介スライドを作っているところです) VSCodeの拡張はリアルタイム反映なので、作業もサクサクです。

まとめ

PDF出力もPDF,HTML,PowerPointと十分な出力を標準で装備していますので、凝ったスライドでなければ、十分なツールになります。