Memorandum

Marp用のスライドテーマCSSと変換のためのプロジェクト作った

パワポ資料、壊れる

数年前に書いたパワポ資料、普通に壊れるんですよね。何もしてないのに。
（正確には古いMacBookの古いOfficeだったりで文字周りが怪しい気がするところまでは分かってる。何もしてなくはないけど何もしてない）

パワポ資料GitHubでDiff取れないしMarkdownで書きてぇなってなってたので、ここ数年はスライド資料をMarp（Marp: Markdown Presentation Ecosystem）で書いてる。

Marpで装飾をちょっとだけ変えるには

用意されたテーマで普通に書けばいいのに、どうしても装飾を弄りたくなる性分なので、ちょこちょこと手を入れたい。

スライドMarkdownのYAML Front Matterのメタデータに下記のようにCSSをぶち込めば解決する。

---
marp: true
theme: gaia
style: |
    section {
        color: red;
    }
---

または、スコープで書いたりする
<style scoped>
  a {
    color: red;
  }
</style>

今までこれで十分だったんだけど、やっぱりこだわり出すとMarkdownがスライドの文章以外のもので埋め尽くされてしまうようになった。

そこで、テーマ用のCSSを別途作って変換噛ませればいいや、と思っていた時期がぼくにもありました。

VS CodeでMarp theme CSSの設定が効かない問題

setting.jsonに"markdown.marp.themes"の設定をちゃんとしたはずでも、なぜか反応してくれない状況だったりして原因を探っていたが分からず。
そもそもWindowsマシンにWSL2でUbuntu入れて動かしているので、その影響が大きいかもしれないと思いながら諦めた。

で、なんとかスライドのプレビューを確認しながら書けるようにならないかと思って、marp-cli（marp-team/marp-cli: A CLI interface for Marp and Marpit based converters）に辿り着いて、下記リポジトリを作るに至った。

作成したもの

使い方にWSL2 Ubuntuのための話が書いてあるけど、これは単純にぼくの環境がそうだったからだけなのでメモ程度に残してある。

また、この文章書いてる時点では、一応こんなもんかなぁってデザインにしてるつもり。
だけど、配布資料として手元で見てもらう想定の文字サイズなので字が細かいなと思う。
プロジェクタで大きく映してしゃべる用のスライドテーマを新たに追加する予定なので、継続的にメンテナンスはしたい。

スライドサンプル

リポジトリみればPDF入ってるけど、こちらに画像だけはサンプルで貼っておく。