こんにちは，しまさん（@shimasan0x00）です．
私はLT会や学内においてプレゼンをする機会があるのですが一々PowerPointは使いたくないと思ってしまう人間です．
といいつつ最近ではGoogle Slideに落ち着いているのですが… .
ですがそのGoogle Slideも面倒でMarkdownでスライド作れたら楽なのにな…と常々思っていました．
そこでreveal.jsだったりJupyter notebookにおけるRISEを使ったのですが中々定着しませんでした．
※RISEはリアルタイムでプログラムを実行できるのでPythonやR，Juliaを使っている人はおすすめです．
そこで今回私が見つけた楽にmdでスライド作りをすることができるツールが「Marp」です．
今回はMarpを用いて楽にmdをスライドに変換する方法を紹介します．
Marpとは
| It's a time to migrate into Marp Next! Marp – Markdown Presentation Writer – |
MarpはMarkdownで書くことでPowerPointのようなスライド形式に変換し，PDFに保存することができる無料のツールです．
クロスプラットフォーム対応でWindows，Mac，Linuxで利用することができます．
Markdownの書式ですが，GitHub Flavored Markdownがベースとなっています．
スポンサーリンク
Marp for VS Codeとは
| Extension for Visual Studio Code – Create slide deck written in Marp Markdown on VS Code Marp for VS Code – Visual Studio Marketplace – |
先程のMarpはElectronを用いて作成されたGUIツールなのですがそれをVSCode上でも使えるようにした拡張機能がMarp for VS Codeです．
スポンサーリンク
VSCodeのインストール
VSCodeはMicrosoftが開発したエディタです．
無料で使うことができます．
プラグインやテーマも豊富でカスタマイズ性が高いのが特徴です．
VSCodeをインストールしてない方は以下のリンクからダウンロードしてインストールをしてください．
| Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform – Linux, macOS, and Windows. Visual Studio Code – Code Editing. Redefined – |
VSCodeでのプラグインインストール
次はVSCodeでMarpを使えるようにするためにプラグインをインストールしていきます．
「Shift+⌘+X」のショートカットキーで拡張機能のタブを開くか左側にある赤枠のアイコンを押してください．
Marp for VS Codeのインストール
開いた拡張機能から「marp」と検索し，インストールをしてください．
スポンサーリンク
Marp for VS Codeの使い方
基本的にはMarkdownの文法で好きに書いて問題ないですがMarpをVSCodeで使用しようとするには少し注意点があります．
１．Marpを有効にする際は先頭に以下を追加する
---
marp: true
---
２．ページ切り替えを表すのは以下の記号を用いる
---
詳しいドキュメントについては以下を参照してみてください．
| The skinny framework for creating slide deck from Markdown Marpit: The skinny framework for creating slide deck from Markdown – |
サンプルコード
---
marp: true
---
<!-- $theme: gaia -->
<!-- $size: 4:3 -->
<!-- page_number: true -->
<!-- paginate: true -->
# First page
The page number `1` is shown.
---
<!-- backgroundColor: aqua -->
# Second page
The page number `2` is shown!
Marp for VS CodeでPDF生成をする
先程のGUIツールでのMarpではPDF生成をメニューから簡単に生成できたのですがMarp for VS Codeにおいては2019年2月18日現在ではありません．
ですので今回はMarp CLIを用いてコマンドを使ってmdをpdfに変換したいと思います．
以下のどちらでもOKです．
npx @marp-team/marp-cli sample.md --pdf
npx @marp-team/marp-cli sample.md -o output.pdf
#HTMLに出力したい
npx @marp-team/marp-cli sample.md -o output.html
さいごに
今回はVSCodeにいてmd書くだけでスライド作成することができるMarp for VS Codeを紹介しました．
今まで使用してきたものより手軽に使用できる上にVSCodeですぐに書くことができるので今までのものより定着する気がします．
p.s.
プレゼン = PowerPointという考えがなくなってほしい．
参考
| A CLI interface for Marp and Marpit based converters – marp-team/marp-cli marp-team/marp-cli – GitHub |