Marpを使ってmarkdownでスライド資料を作成する

はじめに

事業開発部の野村です。ブログを書くのおよそ半年ぶりです…

今回はmarkdownで書いた内容をPowerPointやKeyNoteのようなスライド資料としてアウトプットできるツールMarpをご紹介をさせていただきます。

Marpとは

Marp - Markdown Presentation Writer

「はじめに」でご紹介したとおり、markdownでスライド資料を作ることが出来るアプリです。 Mac, Windows, Linuxで使えるクロスプラットフォーム。(Electronベースとのこと)

使い方

Marpをインストールして開くと以下のようなウィンドウが立ち上がります。

左側でmarkdownを編集し、右側でスライドのプレビューをリアルタイムで確認することができます。

スライドのページ分けは --- (水平線 : horizontal rule) を記載することで実現できます。

## スライド1

最初のページ

---

## スライド2

次のページ

作ったスライドはそのままmarkdown形式で保存できます。 PDF形式にエクスポート出来るので、実際のプレゼンやSpeaker DeckやSlideShare等で展開できます。

• 公式のアウトプットサンプル
  • markdown

Marp独自の機能

markdown記法でスライド書ける他、Marpでは以下の機能が使えます。

1. ディレクティブ
   • ページ番号表示
   • スライドの高さ・幅・縦横比の指定
   • テーマ/テンプレートの切替
   • フッター表示
2. 背景画像や画像の表示比率指定
3. 数式の表示

ディレクティブ

以下のHTMLコメント形式で、ページ番号や縦横比の指定などMarp独自の拡張機能が使えます。

• 単一指定

  <!-- {directive_name}: {value} -->

• 複数指定

  <!--
  {first_directive_name}:  {value}
  {second_directive_name}: {value}
  ...
  -->

• 現在のスライドにのみ指定

  <!-- *{directive_name}: {value} -->

ページ番号指定

<!-- page_number: true -->

true でスライド下方に現在のページ番号を表示します。(false で非表示)

スライドのアスペクト比・サイズの指定

<!-- $size: 16:9 -->

以下の指定ができます。

Presets: 4:3, 16:9, A0-A8, B0-B8 and suffix of -portrait.

幅や高さの具体的な長さを$width・$heightで指定することも可能です。

※ アスペクト比・サイズはスライドごとに指定することはできず、スライド全体に適用します。

テーマ、テンプレートの切替

<!-- 
$theme: gaia
template: invert
-->

テーマは、Marpのデフォルト($theme: default)とGaia($theme: gaia)の２種類が選択できます。 テーマはスライドごとに指定することはできず、スライド全体に適用します。

Gaiaテーマだと、さらに３つのスライドテンプレートが使用できます。

• template: default
• template: invert
  • defaultの背景文字色反転
• template: gaia
  • テーマカラー

テンプレートはスライドごとに指定可能です。

• 公式のGaiaテーマサンプル
  • markdown

フッター表示

<!-- footer: This is a footer -->

スライド下部に任意のフッター文字を表示できます。

背景画像や画像の表示比率指定

![x%](画像ファイルパス) と指定すると、画像をオリジナルサイズからx%と指定した比率で表示できます。

![bg](画像ファイルパス) で、そのスライドの背景に画像を表示することができます。

* 背景画像指定
![bg](images/background.png)

* 画像の比率指定表示
![60%](images/xxx.png)

* 背景画像の比率指定
![bg 60%](images/background.png)

* 背景画像を連続して指定すると水平に並んで表示する
![bg](images/background.png)
![bg](images/background.png)

数式の表示

KaTeX形式で数式を記載することもできます。$でインライン表示、$$でブロック表示します。

$$I_{xx}=\int\int_Ry^2f(x,y)\cdot{}dydx$$

さいごに

ということで、markdownでスライド作成できるMarpのご紹介でした。 シンプルなスライド作成に、markdown書き慣れてる方にとっては有用なツールだと思います。 オフラインでもさっと書ける！

それでは。