Marpについて
Marpは,Markdownからプレゼンテーションスライドを作成してくれるツールです.Marpには,VSCode上で動かす「Marp for VS Code」,CLIベースでMarpを様々な形式に変換したり,プレゼンモードを起動したりする「Marp CLI」,reveal.jsのようにHTMLフレームワークとして動く「Marpit」があります.この中でも「Marp for VSCode」と「Marp CLI」を組み合わせたプレゼン作成が簡単かつ拡張性があるため,この記事では主にこの二つを扱います.
うれしさ
- Markdownという簡単な記法
- テキストベースなので,Gitで管理が可能
- TeX数式対応(KaTeX)
- Emoji対応 😎
- 様々な形式に変換可能(pdf, pptx, html)
かなしさ
- 細かなレイアウトはCSSで調整が必要
- 文字の色,フォントサイズはhtmlタグで記述
- アニメーション非対応
Marp for VSCodeの導入
Marp for VS CodeをVSCodeにインストール後,Markdownファイル(.md)を作成し以下を記述.これだけでMarpが使えます.
---
marp: true
---
VSCodeの右上にアイコンが増え,それぞれ以下のようなボタンとなっています.今,プレビューボタンを押すと白いスライドが一枚表示されます.
VSCodeの設定
フォントサイズやフォントの色を変える際や音声の埋め込みをする際にはHTMLタグを用いる必要がありますが,デフォルトではVSCodeのプレビューにHTML要素が反映されません.従って,有効に設定する必要があります.VSCodeの「設定」から,「marp html」などと検索するとMarp: Enable HTMLという項目が出てくるのでを入れます.これで,HTMLがプレビューに反映されます.
Marpの機能説明・使用方法
実際にMarpを用いて機能及び使用方法を説明しています.
サンプルコード及びスライドを置いておきます.
Marp CLIの導入
VSCode上でもMarpをpdfやpptxに変換することができますが,画像の埋め込みやHTMLタグの反映が難しいため,Marp CLIを用いて生成する方が楽です.
Marp CLIはnpmパッケージとして公開されており,まずはNode.jsをインストールする必要があります.npmはNode Packaged Modulesの略称で,パッケージ管理ツールです.Pythonでいうところのpipで,Web系でよく使うツールです.今はあまり深入りせずにMarpに集中しましょう.
Node.jsの導入
https://nodejs.org/ja/download/ から,対応するインストーラをDLしてインスコしてください.
導入が完了したら,ターミナルにnpm
と入力しなんか出てきたらOKです.
Marp CLIのインストール
ターミナルに以下のコマンドを打つことで,Marp CLIをインストールできます.インストール完了後marp
と打ちなんか出てきたら導入完了です.
npm install -g @marp-team/marp-cli
https://github.com/marp-team/marp-cli#global-installation
Marp CLIの使用方法
スライド生成
Marp CLIを用いてpdfを生成します.
marp --pdf <file_name>.md --html --allow-local-files --image-scale 2
--pdf
のオプションが生成するファイル形式となっており,pptxを生成したい場合は,--pptx
のようになります.
あとは,ファイル名を指定することで生成できますが,htmlタグを使用している場合は--html
が必要となります.また,--allow-local-files
で画像(音声)の埋め込みを行っています.
pptxを生成する場合は--image-scale
オプションで2に指定してあげないとジャギります.
プレゼンモードの起動
スライド生成と同様にpreviewオプション-p
をつけてあげるだけです.
marp -p <file_name>.md --html --allow-local-files --image-scale 2
また,ローカルホストを立ち上げるserverモード-s
もありますが,使いどころは限られそうです.
おわり
以上がMarpの基本的な説明です.CSSを用いたカスタムテーマの作成については別記事に書く予定です.