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

はじめに

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

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

Marpとは

Marp - Markdown Presentation Writer

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

使い方

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

Marpスクリーンショット

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

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

## スライド1

最初のページ

---

## スライド2

次のページ

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

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

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)の2種類が選択できます。 テーマはスライドごとに指定することはできず、スライド全体に適用します。

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

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

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

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


フッター表示

<!-- 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形式で数式を記載することもできます。$でインライン表示、$$でブロック表示します。

marp_数式

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

さいごに

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

それでは。