Marpit(Marp)の紹介

「Marpitの紹介」というタイトルで株式会社POLさん主催のイベントで5分間のLTをしてきました。

イベント参加者はほとんどがtraPのメンバーだったので、非常に喋りやすかったです。
ちょっと緊張して早口になってたのは反省。

スライド作成にかけた時間は1時間半です。
LT中にスライドは30分で作ったって言ったんですけど、それは資料の中身の話でレイアウトをいい感じにするのに1時間かけました…

レイアウトを考えないなら本当に30分くらいでいい感じの資料が作れるので非常にオススメです。

発表スライド

Marpit知ってる人ならスライド見て「なんだこのテーマは！？」ってなってると思いますが、gaiaをゴリゴリに改造しています。
詳しくはソースコードのリンク置いておくので参考にしてくれると嬉しいです。

リンク集

• 上のスライドのソースコード
  • https://gist.github.com/nagatea/27f5b89c52b5b3c619ff5c80a7212094
• Marpitドキュメント
  • https://marpit.marp.app/
• MarpitのGitHub
  • https://github.com/marp-team/marpit
• Web版Marpit
  • https://web.marp.app/
• VSCode版Marpit
  • https://marketplace.visualstudio.com/items?itemName=marp-team.marp-vscode

質問とか

質疑応答の時間があったのですが、そこに寄せられた質問に改めて回答します。

他にもMarkdownからpdfを作るアプリあるけど何が違うの？

Web版とVSCodeの拡張機能があるのでスライド作成がしやすい点です。
VSCodeは以下のような感じで実際の生成の様子を確認しながらスライド作成ができます。

また、Web版は開発者ツールを使うことでHTML・CSSの適用具合を確認することができます。

CSSアニメーションとかできるの？

会場でも無理だろうという答えかたをしたのですが、このブログを書くにあたって試した結果、無理でした。

MarpitはMarkdown形式のテキストがHTML・CSSに変換されて、さらにそれをPDFに変換するという過程を辿っています。
なのでプレビュー画面ではCSSアニメーションは動いているのですが、PDFに変換すると止まってしまうようです。

おしまい

いつかMarpitのレイアウトについて記事を書きたいですね。

公式ドキュメントだけだと結構辛いので…

みんなもたくさんLTしような💪💪💪