Zenn
📝

Marp for VS Codeを使ったMarkdownによるスライド作成入門

2023/11/16に公開
Markdown
Marp
tech

はじめに

この記事ではVisual Studio Codeの拡張機能であるMarp for VS Codeを使い、Markdownによるスライド作成を行うことを目標に、導入から基本テクニックまでをまとめています。

Marpとは

Marpは、Markdownによってプレゼンテーションスライドを作成するためのエコシステムです。

Markdownを使用してスライドを作成し、組み込みテーマやCSSテーマによるデザインを適用して、HTML, PDF, PowerPointなどの各種形式でエクスポートすることができます。

MarpはVisual Studio Codeの拡張機能として配布されているため、誰でも簡単に導入することができます。

Marpでスライドを作成することのメリットは、あらかじめスタイルCSSを定義しておけば、スライドを作成していく過程でデザインの部分を考える必要がないことです。PowerPointほどの自由度はありませんが、その制約のおかげで統一感のあるスライドを作成することができます。これにより、複数人で共通の体裁でスライドを作成する際には、デザインの揺れを回避し誰が書いても同じクオリティが期待できます。

また、元ファイルはMarkdown形式のテキストデータなので、軽量であり、テキストベースの他形式(HTMLなど)への変換が容易です。

さらに、Markdown記法を使ってスライドを作成することで、文書の構造を考えながら情報を整理して書くことを意識できます。デザインを分離しているため、スライドの構成を変える場合にはテキストの位置を入れ替えるだけで済み、変更のコストが低いです。

導入

Visual Studio Codeの拡張機能で、Marpを検索してインストールを行います。

インストールが完了したら、試しにMarkdownファイルを作成してみましょう。
テキストファイルを新規作成して拡張子を.mdに変更します。
作成したMarkdownファイルをVSCodeで開き、次のように記述します。

---
marp: true
---

次にソースコードウィンドウの右上にあるプレビューを横に表示をクリックして、プレビューを表示します。

プレビューに白紙のスライドが表示されればMarpの導入は完了です。

文書の記述

MarpはMarkdownでスライドを作っていくためのツールなので、Markdown記法で文書を書いていく必要があります。

次のように書いてみましょう。

---
marp: true
---

# 見出しh1
## 見出しh2
### 見出しh3
#### 見出しh4
##### 見出しh5
###### 見出しh6
プレーンテキスト

ハッシュ(#)をつけることで、テキストを見出しにすることができます。ハッシュは1~6つまでつけることができます。見出しの階層ごとに使い分けましょう。
他にもテキストを太字にしたり、リストや表を作成したり、注釈やソースコードを挿入したり、画像やURLを張り付けたりできます。
Markdown記法の詳細については、他の方が書かれた記事がありますのでそちらをご参照ください。

参考文献

Qiita Markdown記法 サンプル集

Qiita Markdown記法 チートシート

スライドの分割

テキストを書き続けると、Marpのプレビュー上では改ページを行わないままスライドから文字がはみ出してします。

改ページを行いたい場合は、ハイフンを3つ置くことで次のスライドへ移ることができます。

---
marp: true
---

# 見出しh1
## 見出しh2
### 見出しh3
#### 見出しh4
##### 見出しh5
###### 見出しh6
プレーンテキスト

---

2ページ目

テーマの適用

Marpではデザインテーマを適用することができます。

デフォルトでは、

  • default
  • gaia
  • uncover

というテーマが用意されています。

ファイルの先頭で次のように記述してgaiaを適用してみましょう。

---
marp: true
theme: gaia
---

プレビューのスライド背景が黄色くなり、フォントサイズが変わればテーマの適用は完了です。
試しに、uncoverも指定してみましょう。

---
marp: true
theme: uncover
---

テキストがセンタリングされたらuncoverの適用は完了です。

自作CSSテーマの適用

Marpではあらかじめデザインテーマが用意されていますが、デザインの自由度を上げたい場合には自作のCSSをデザインテーマとして適用することができます。

デザインテーマとして適用する自作CSSは決まった形式で書かれている必要があります。

デスクトップに「test_md」というディレクトリを作成して、その中にMarkdownファイルと次のような内容の「custom.css」を用意しましょう。

/* @theme custom */
/* Author: Your Name */

@import "default";

section {
    font-size: 28px;
    color: red;
}

/* @theme custom */の部分は必須であり、テーマの名前はマークダウン側で指定しているテーマ名と一致している必要があります。

次に、Markdownファイルの先頭に次のように記述します。

---
marp: true
theme: custom
---

次に、test_mdディレクトリをワークスペース化します。

Visual Studio Codeのメニューバーで、ファイル->フォルダをワークスペースに追加をクリックします。
test_mdディレクトリを選択して追加(A)をクリックします。
メニューバーでファイル->名前をつけてワークスペースを保存をクリックします。
test_mdディレクトリ内に.code-workspace形式のファイルが作成されれば、ワークスペースの作成は完了です。

作成された.code-workspaceファイルは、ワークスペースの設定情報を記述するためのJSON形式のファイルです。このファイルをVSCodeで開きます。

次のように追記します。

{
    "folders": [
        {
	    "path": "."
	}
    ],
    "settings": {
	"markdown.marp.themes": [
	    "./custom.css"
	]
    }
}

これは、Marpが参照するテーマ用CSSファイルがどこにあるかを宣言しています。

Markdownのプレビューに戻ってみましょう。

16:9サイズのスライドに見出し1と見出し6以外が赤く表示されていれば、自作テーマの適用は成功です。

なぜ見出しh1と見出しh6がデフォルトのままかというと、それは指定したCSSより優先される記述が@import "default"に存在するからです。

custom.cssで次のように追記してみましょう。

section h1 {
    color: blue;
}

section h6 {
    color: green;
}

プレビューで見出しh1が青色に、見出しh6が緑色になったことがわかります。

sectionとはHTMLにおいてはコンテンツの節や章を区切るためのタグですが、Marpにおいては各スライドのセレクタで、CSSのsectionに指定したスタイルがスライドの全般スタイルになります。

section h1というように記述した場合、section(スライド)内にあるh1要素にスタイルを指定することになります。これはsectionで指定したスタイルよりも優先されます。

Markdownの# 見出しh1という記述と、CSSで指定したh1の対応については、MarkdownとHTMLの対応を参照してください。

自作CSSテーマの拡張

自作テーマとして作成するCSSでは、スライドのスタイルをより詳細に指定することができます。

スライドサイズの変更

スライドのサイズを変更したい場合には、CSSでsectionに対してheightとwidthを指定します。

section {
    width: 1280px;
    height: 960px;
}

好みの比率に調整することができますし、縦長のA4サイズなども指定することができるので、スライド作成だけでなく書類作成にも応用できます。

タイトルスライド

パワーポイントで言うところの表紙にあたるタイトルスライドは、Markdown内で次のように指定することで、本文が書かれたコンテンツスライドとスタイルを分離することができます。

<!--
class: title 
 -->

タイトルスライドに対してスタイルを適用する場合、CSSでは次のように記述します。

section.title {
    color: purple;
}

この記述は内部的にはclass="title"が指定されたsectionに対するCSSセレクタです。
試しに次のように記述してみましょう。

---
marp: true
theme: custom
---

<!--
class: title 
 -->
# 見出しh1
## 見出しh2
### 見出しh3
#### 見出しh4
##### 見出しh5
###### 見出しh6
プレーンテキスト

これにより、タイトルスライドの文字色が紫になりました。

コンテンツスライド

Markdown内でコンテンツスライドを明示したい場合には、改ページをするごとに次のように記述します。

<!--
class: slide
 -->

CSSでは次のようにコンテンツスライドを指定します。

section.slide {
    color: aqua;
}

この記述は内部的にはclass="slide"が指定されたsectionに対するCSSセレクタです。
マークダウンファイルを次のように書き換えてみましょう。

---
marp: true
theme: custom
---

<!--
class: title 
 -->
# 見出しh1
## 見出しh2
### 見出しh3
#### 見出しh4
##### 見出しh5
###### 見出しh6
プレーンテキスト

---

<!--
class: slide
 -->
 # 見出しh1
## 見出しh2
### 見出しh3
#### 見出しh4
##### 見出しh5
###### 見出しh6
プレーンテキスト

タイトルスライドの文字色とは別に、コンテンツスライドでは水色が指定できていることがわかります。

ヘッダの指定

Marpではヘッダを指定することができます。

すべてのスライドで共通のヘッダを使う場合、マークダウンファイルの先頭で次のように記述します。

---
marp: true
header: "これはヘッダです"
---

プレビュー画面のスライド左上にヘッダテキストが表示されます。

スライドごとにヘッダを指定する場合は、改ページ時に次のように記述します。

<!--
class: slide
header: "これは個別のヘッダです"
 -->

このヘッダの記述は、次に明示的にヘッダを指定するスライドまでは、共通のものとして以降のスライドに適用されます。

スタイルを変更するにはCSSでheaderセレクタに対してスタイルを指定します。

header {
	/* スタイルを指定 */
}

フッタの指定

Marpではヘッダと同様にフッタも指定できます。

---
marp: true
footer: "これはフッタです"
---

スライドごとにフッタを指定する場合は、改ページ時に次のように指定します。

<!--
class: slide
footer: "これは個別のフッタです"
 -->

スタイルを変更するにはCSSでfooterセレクタに対してスタイルを指定します。

footer {
	/* スタイルを指定 */
}

PDFへの出力

スライドが完成したら、スライドをPDFに出力してみましょう。


ソースコードウィンドウの右上にある三角形のアイコンShow Quick Pick Of Marp Commandsをクリックします。

Export Slide Deckをクリックすると、エクスプローラのポップアップが表示されるので、ファイル名とファイルの種類を選択してExportをクリックします。

HTML・PowerPoint・PNG・JPGへの出力

PDFへの出力と同様の手順で、HTML形式やPowerPoint形式、PNGとJPGの画像形式へも出力ができます。
PowerPointへの出力は.pptxファイルで保存されるものの、各スライドは編集可能でなく画像が貼られたような状態であるため注意が必要です。

おわりに

本記事では、Marpの仕様を中心に説明を行ってきました。
Markdown記法については説明を省略してきましたが、Markdownでは次のようなことができます。

  • 画像の貼り付け
  • 背景画像の指定
  • テーブル(表)の作成
  • URLの指定
  • ソースコードの指定
  • 引用の指定

説明に使用したCSSも簡素なものでしたが、きちんと指定すればPowerPointで作成されたスライドにも引けを取らないスライドを作成することができるので、これを機にぜひMarpを活用してみてください。

Discussion