IT

VSCode+Markdownでラクラクスライド(PDF)作成[Marp for VSCode]

こんにちは,しまさん(@nitkcdadon)です.

私はLT会や学内においてプレゼンをする機会があるのですが一々PowerPointは使いたくないと思ってしまう人間です.

といいつつ最近ではGoogle Slideに落ち着いているのですが… .

ですがそのGoogle Slideも面倒でMarkdownでスライド作れたら楽なのにな…と常々思っていました.

そこでreveal.jsだったりJupyter notebookにおけるRISEを使ったのですが中々定着しませんでした.

※RISEはリアルタイムでプログラムを実行できるのでPythonやR,Juliaを使っている人はおすすめです.

RISEをcssでデザイン変更する話(PythonのJupyterでプレゼン)PythonのJupyter NotebookでプレゼンすることができるRISEのインストール方法,デザインcssについて紹介しています.Reveal.jsのようにテーマが出てきたり,cssファイルを公開する人が増えたらいいなと思います....

そこで今回私が見つけた楽にmdでスライド作りをすることができるツールが「Marp」です.

今回はMarpを用いて楽にmdをスライドに変換する方法を紹介します.

Marpとは

MarpはMarkdownで書くことでPowerPointのようなスライド形式に変換し,PDFに保存することができる無料のツールです.

クロスプラットフォーム対応でWindows,Mac,Linuxで利用することができます.

Markdownの書式ですが,GitHub Flavored Markdownがベースとなっています.

スポンサーリンク

Marp for VS Codeとは

先程のMarpはElectronを用いて作成されたGUIツールなのですがそれをVSCode上でも使えるようにした拡張機能がMarp for VS Codeです.

スポンサーリンク

VSCodeのインストール

VSCodeはMicrosoftが開発したエディタです.

無料で使うことができます.

プラグインやテーマも豊富でカスタマイズ性が高いのが特徴です.

VSCodeをインストールしてない方は以下のリンクからダウンロードしてインストールをしてください.

VSCodeでのプラグインインストール

次はVSCodeでMarpを使えるようにするためにプラグインをインストールしていきます.

「Shift+⌘+X」のショートカットキーで拡張機能のタブを開くか左側にある赤枠のアイコンを押してください.

Marp for VS Codeのインストール

開いた拡張機能から「marp」と検索し,インストールをしてください.

スポンサーリンク

Marp for VS Codeの使い方

基本的にはMarkdownの文法で好きに書いて問題ないですがMarpをVSCodeで使用しようとするには少し注意点があります.

1.Marpを有効にする際は先頭に以下を追加する

---
marp: true
---

2.ページ切り替えを表すのは以下の記号を用いる

---

詳しいドキュメントについては以下を参照してみてください.

サンプルコード

---
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という考えがなくなってほしい.

参考

ABOUT ME
しまさん
てくてくぷれいす運営者のしまさんです. 高専→大学編入してから行動的な大学生  自身の変化を求めてブログを始める グレープフルーツと本が大好物 IT系のことやブログ,高専や編入,大学生活に関することを発信中!!詳しいプロフィールはこちら≫ 投げ銭はコチラへ YouTubeはコチラへ 質問はコチラ