Marp というのは Markdown 記法で書けるスライド作成ツールです.

  • Markdown 記法で手軽に書ける
  • 見た目が綺麗
  • 画像の拡縮が可能

などの特徴から個人的にかなり重宝しています. その辺りは昔記事にしました

しかし,現在 Marp は今後メンテナンスをしないという明言をし,新しくゼロから Marp Next というのを作っているようです. そのあたりの話は作者の記事にすこーしずつ書いてあります:

時折,リポジトリをチェックして更新がないかを見ていたのですが,いよいよ Web UI まで出来上がっているので,現状のを試しに使ってみることにしました,というメモです.

ちなみに,本記事での Marp Next のバージョンは marp-cli-0.6 ぐらいを想定しています(現在開発が活発なので既に古くなっているかも).

Marp Next

新しい Marp の大きな目的は,よりメンテナブルな設計になることのようで,旧 Marp と異なり,機能ごとに個別の JS パッケージとなっている:

リポジトリ 備考
marp-team/marp Marp 全体を取りまとめるリポジトリ
Marpit Markdown からスライドの HTML へ変換する部分 (画像の拡縮などもココ)
Marp Core Markdown 以外の拡張構文 (e.g. LaTeX, Emoji, Embed HTML)
Marp CLI Marp の CLI ツール
Marp Web Marp の Web UI (まだベータっぽい)
Marp Desktop Marp Web を Electron でラップして Desktop アプリにしたいらしい (まだ無い)

(どうでも良いですが,モノリポにした方良かったと思う… Marpit で更新があると全てのリポジトリで PR を出して更新する必要があるので…)

ちなみに,旧 Marp のリポジトリの Issue ラベルに Marp NextSupports in Marp Next というのができている. 旧 Marp の Issue には,かなり要望っぽい Issue がたくさんあり,その中でも Marp Next では対応する予定のものには Support in Marp Next を付けたようだ.

旧 Marp との非互換な機能

これらは旧 Marp ユーザーしか意味ないが,適当に書き連ねていおく:

  1. ==AAA== というハイライト機能がない(辛い)
  2. 打ち消し線記法 ~~AAA~~ もない
  3. 画像の拡縮ルール (Marpit)
  4. <!-- *template: xxx --> のようなそのページだけ機能追加 (Marpit)
    • <!-- _class: xxx --> のように先頭にアンダースコア _ を付けるスタイルになった
    • ちなみに <!-- $theme: xxx --> はあるっぽい
  5. テーマの取り扱い (Marpit ??)
    • # だけだと中央寄せなどになっていた機能がなくなった
    • それらはテーマのイチ class となっている
    • 前の templateclass なので組み合わせれない
    • 明示的に指定できるようになったのは嬉しい
  6. KaTeX のバージョンアップ (Marp Core)
    • 0.6.0 => 0.10.0
    • 0.6.0 だと全然 LaTeX 記法をサポートしていないので助かる
    • まぁ僕はフォークしてバージョンをあげてたけど
  7. スライドのサイズ・縦横比 (Marpit)

ちなみに,コードが全部 CoffeScript から TypeScript になってた.

CLI を試す

リッチすぎてビビる

  • README の通りで動いた (Mac, npx)
    • npx @marp-team/marp-cli slide.md
  • Docker もサポートされてる
    • ただし一部機能に制限があるっぽい
  • Markdown から HTML を生成する
  • --pdf オプションで PDF を生成する
    • ただし セキュリティの関係でデフォルトではローカルファイルの画像などを埋め込めない
    • そのためローカル画像を使うには --allow-local-files をつける
    • 日本語フォントも変になっている気がする
    • 日本語検索もダメっぽい
  • --watch オプションで Markdown の変更を検知し再生成する
  • --server オプションで localhost:8080 で閲覧やPDFの生成ができる (watch もされます)
  • --preview でプレビューモード
    • 待望の!!
    • ブラウザの全画面モードを使ってるみたい
  • --theme でカスタムテーマを設定可能 (CSS)
  • CLI のオプションを使わずに設定ファイルでも設定可能
    • package.json .marprc.yml marp.config.js のどれでも

CLI + Netlify を試す

試した:

image.png

試し方: Marp の作者のリポジトリDeploy to netlify をクリックするだけ.

この方法の場合,リポジトリの PITCHME.mdindex.html に変換する. marp-cli の設定は package.yml に書いてある. 設定方法はこれを参照.

僕はできれば,複数のスライドを一つのリポジトリに置きたかった. ので,僕のリポジトリでは:

  • slides 以下の *.md を全部変換
    • index.mdindex.html のスライドになる
  • 後述する自作テーマをサブモジュールで設定
  • slides/assets にある画像を public にコピーしてる

のように少しだけ設定を書き換えた.

Web UI を試す

すでにここから試せる. 手元で試すなら:

git clone https://github.com/marp-team/marp-web.git
cd marp-web
yarn install
yarn start

でできた.

  • ファイルの読み込みや保存が可能
  • プレゼンテーションモードは(まだ)なかった
  • PDFのエクスポートはブラウザの印刷機能を使うようだった
  • カスタムテーマの設定などはまだできない??

テーマを移植する

オリジナルテーマを作ってたので Marp Next にも移植した:

  • olive
  • colors
  • haskell

marp-themes というリポジトリを作り,そこに置いてある. やったことは:

  • gaia の scss を持ってきて主に色を変更
    • カスタムテーマとして指定できるのは CSS だけなので scss コマンドで手動変換する
  • 画像の中央寄せをできるようにした
    • # ![](path/to/image.jpg) とすると中央寄せになるようにした
    • h1 から h6 のどれでも良いです
    • ただし,雑に img タグに適用してるので emoji を含ませるとずれる…
    • marpit に修正入れてもらった方が良いかな
  • lead + invert などの class を作っておいた
    • scss で書いてるので lead を適当に mixi-in にして include するだけ
    • これもできれば class の組み合わせができるようになって欲しい

Olive

Colors

Haskell

おしまい

もう既に十分使える状態になっていました. すごい!