Marpを使ったスライドづくり

2024.09.13

ライフハック

Marpをご存知の方も多いと思います。最近は専らVSCode＋Marpを使ってスライド作成を行っております。

バージョン管理がしやすい
マークダウン形式のテキストで作成するので微妙なことに悩まなくて良い

などメリットがたくさんあります。

ただし、使い込むと1つのスライドだけでなく、いろいろと画像を共有したりしたくなってきて、どうファイルを配置するのか？が重要になってきます。
現状では、
/-- （スライドを保存する起点フォルダ） ├--src マークダウン形式のスライド本体を置く場所 ├--img 画像ファイルを配置 ├--dist HTMLやPDFに出力するときに置く場所

こんな配置にしていると、他にファイルを移動したり見せたりするときに、imgとdistフォルダだけを配布すれば良いので結構楽だったりします。
ただ、課題としては、ボタンひとつとはいえ、毎回、HTML書き出しボタンを押して、書き出し先を修正するというのが地味に面倒だったりします。
特に、直前にあれこれと書きつつ、すぐ見せたい！というときに、意外と不便です。

そこで、コマンドからmarp-cliの力を利用して随時更新で利用出来るようにしました。

インストール

まずは初期設定として、nodejsやyarnをインストールしておきます。
続いて

yarn init

これでパッケージとしての初期設定がされます。
続いてインストールです。

yarn global add @marp-team/marp-cli

これで完了。
続いてpackage.jsonの編集。scripts devあたりを普段使いやすいようにしておくと便利

{
  "name": "my-slide",
  "version": "1.0.0",
  "main": "index.js",
  "author": "なまえ",
  "license": "UNLICENSED",
  "private": true,
  "scripts": {
    "dev": "marp --html --server .",
    "build": "marp --html --pdf --allow-local-files --title 'タイトル' slide.md -o ./slide.pdf"
  },
  "dependencies": {
    "@marp-team/marp-cli": "^3.4.0"
  },
}

ここまで来たらあとは、

> yarn dev
yarn run v1.22.22
$ marp --html --server .
[  INFO ] [Server mode] Start server listened at http://localhost:8080/ ...

こんなふうに表示されますので、ブラウザで、 http://localhost:8080/
にアクセスすればOK。更新したら随時更新して頂けますので、とても便利です。