What is Marp Next ?

• yhatt さん作
• Marp の後継: メンテナブルな設計を目標に作り直した
• MDからスライドを生成してくれる
• GitHub にソースコードが公開されてる

What is Marp Next ?

• 旧 Marp は Electron 製のデスクトップだった
• Marp Next は:
  • CLI ツール
  • Web UI (α版みたいなのならある)
  • Desktop (まだできてない)

なので以降では CLI ツールを使っている想定:

$ npx @marp-team/marp-cli --theme-set path/to/my/themes -s -- .

CLI ツールの Docker イメージもある
(ただし機能が制限される)

このスライド

• Marp Next の Tips 集
  • 注意: Marp Next はまだ完成してないみたい
  • 数ヶ月後には変わってるかも
• 自分の記事用のスライド
• 自分で書いたテーマを使ってます
  • <!-- $theme: olive -->

Markdown 記法

• ベースはCommon Markdown
  • ２段階の拡張がされている (Marpit と Marp Core)
• --- でスライドを区切る
  • Deckest に寄せてるらしい

## What is [Marp Next](https://github.com/marp-team/marp) ?

- [yhatt](https://github.com/yhatt) さん作
- Marp の後継: メンテナブルな設計を目標に作り直した
- MDからスライドを生成してくれる
- [GitHub](https://github.com/marp-team/marp) にソースコードが公開されてる

# ![height:300px](assets/marp_next/editing_marp_next.jpg)

---

## このスライド

テーマの変更

マークダウンの頭に <!-- $theme: aaa --> ないしは次のように Front-matter を使う:

---
theme: olive
---
# **Marp** Next Tips !

### ひげ

---

元からあるのは default と gaia と uncover の3つ

クラスの変更

Marp のテーマの「クラス」を切り替えることで
部分的にCSSを変更できる (e.g. カラースキーマを変えたり)

変更したいスライドの頭に <!-- _class: aaa --> と書くだけ:

<!-- _class: invert -->

## What is [Marp Next](https://github.com/marp-team/marp) ?

- [yhatt](https://github.com/yhatt) さん作
- Marp の後継: メンテナブルな設計を目標に作り直した

_ を外すと以降すべてのスライドに反映される

例えば gaia には default,invert,gaia,lead の4種類ある

PDF へのエクスポートと

CLI ツールでオプションをつけるだけ:

$ npx @marp-team/marp-cli --theme-set path/to/my/themes --pdf -- slide.md

ただし:

• セキュリティの関係でデフォルトではローカルファイルの画像などを埋め込めない
  • ローカル画像を使うには --allow-local-files をつける
• 日本語フォントも変になっている気がする
  • 日本語検索もダメっぽい

なのでブラウザの印刷でPDFに書き出した方が良いかも

プレゼンテーションモード

ブラウザの全画面でプレゼンモードっぽいこともできる:

$ npx @marp-team/marp-cli --theme-set path/to/my/themes --preview -- slide.md

画像に関するオプション

• ![width:300px](hoge.jpg) で拡縮変更
• ![bg](hoge.jpg) で背景に設定
• ![w:200px h:30cm](hoge.jpg) 空白区切りで複数指定

他にも透過や背景の分割など色々できる

ただし 現状では中央寄せができない

このスライドでは、テーマをいじって中央寄せをデフォルトにしてる

数式

• $ ... $ や $$ ... $$ で Latex の数式をレンダリング
• KaTeX を使ってる
  • Marp Next は 0.10.0 の最新版を使ってる模様
• なので完全に LaTeX 表記をサポートしていない
  • 可能な表記

$e ^ {i \pi} = -1$

$$ e ^ {i \pi} = -1 $$

その他

• Emoji をサポート
  • Twitter Emoji を使ってる
• <!-- footer: this is footer --> でフッターを設定
• <!-- header: this is headr --> でヘッダーを設定
• <!-- paginate: true --> でページ番号を追加
  • デフォルトは false
• 他にも背景色や文字色を一時的に変えるものもある

現状できないこと

• ==AAA== のハイライトと打ち消し線ができなくなった
• クラスの重ねがけ
  • lead + gaia とかしたくなる

ぐらい？