Re: Marp のすゝめ

2019.4.6 Marp-core-0.6.0 での更新を反映した

Marp というのは 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 Next や Supports in Marp Next というのができている．旧 Marp の Issue には，かなり要望っぽい Issue がたくさんあり，その中でも Marp Next では対応する予定のものには Support in Marp Next を付けたようだ．

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

==AAA== というハイライト機能がない（辛い）
打ち消し線記法 ~~AAA~~ もない
画像の拡縮ルール (Marpit)
- より細かいルールができて書きやすくなった
- しかし前のは記法は非互換
- center がないので中央寄せができない
 のようなそのページだけ機能追加 (Marpit)
-  のように先頭にアンダースコア _ を付けるスタイルになった
- ちなみに  はあるっぽい
テーマの取り扱い (Marpit ??)
- # だけだと中央寄せなどになっていた機能がなくなった
- それらはテーマのイチ class となっている
- 前の template も class なので組み合わせれない
- 明示的に指定できるようになったのは嬉しい
- class を複数設定できるようになった！ (marp-core-0.6.0~)
KaTeX のバージョンアップ (Marp Core)
- 0.6.0 => 0.10.0
- 0.6.0 だと全然 LaTeX 記法をサポートしていないので助かる
- まぁ僕はフォークしてバージョンをあげてたけど
スライドのサイズ・縦横比 (Marpit)
- テーマごとになったぽい？
- style で上書きすると変な余白ができる
- どっちにせよ前の  みたいなのはできないっぽい

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

リッチすぎてビビる

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 のどれでも

試した:

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

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

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

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

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

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

でできた．

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

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

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