はじめに
Marpはマークダウンでスライドが作れるツールだ。
テキストでスライドが作れるから、Git管理しやすい。
そして何より、AIと相性がいい。
AIはパワポを直接書けない。しかし、マークダウンは得意だ。だから、MarpならAIにスライドを作ってもらえる。AIに「Marpでスライドを作って」と言うだけ。
ということで、私はMarpを愛用している。
ところで、つい最近、Qiitaがスライド機能を追加した。
どうやら、Marpスライドを公開できるらしい。しかも、既存のMarpスライドもアップロードできる！
つまり、PCに眠っていたスライドたちを公開できるわけだ。
さっそく使ってみようとしたところ、問題に突き当たった。
Qiitaのスライド機能では、scriptが使えない。
Tailwind CSSを使うと綺麗なスライドを作りやすい。
しかし、普通はscriptで読み込む。
<script src="https://cdn.tailwindcss.com"></script>
そこで、Tailwind CSSをMarpで、scriptなしで使う方法を調べた。
Tailwind CSSを普通のCSSに変換する
1. Tailwindをインストール
npm install tailwindcss @tailwindcss/cli
2. input.cssを作る
input.cssを作成し、以下を書き込む。
@import "tailwindcss";
3. MarpのMarkdownからCSSを生成
例えば、
slide.md
input.css
という構成なら、
npx @tailwindcss/cli -i input.css -o tailwind.css --content slide.md
これでtailwind.cssが生成される。
生成されるCSSには、実際に使われているクラスだけが入っている。
MarpにCSSを読み込ませる
1. カスタムテーマを作成する
my-theme.cssを作成する。
/* @theme my-theme */
@import "default";
@import "tailwind.css";
/* 追加のCSS */
section {
font-family: sans-serif;
}
@import "default";を入れることで、Marpのデフォルトテーマも使える。
2. VS Codeにテーマを登録する
.vscode/settings.json
{
"markdown.marp.themes": [
"./my-theme.css"
]
}
3. MarpのMarkdownでテーマを指定する
---
marp: true
theme: my-theme
---
Qiitaスライド機能用の対応
ここまでやれば、VS codeなら問題なく動く。
ちゃんとtailwindが反映されるはず。
しかし、Qiitaスライドとしてアップロードすると、エラーが発生する。
だから、Qiitaスライド用にちょっと対応が必要。
1. tailwind.cssをテーマにする
tailwind.cssの先頭に以下を追加
/* @theme tailwind*/
my-theme.cssに追記
my-theme.cssに以下を追加。
@import "tailwind";
section {
--marpit-root-font-size: 16px;
}
全体としてはこうなる。
/* @theme my-theme */
@import "default";
@import "tailwind.css";
@import "tailwind";
section {
--marpit-root-font-size: 16px;
}
変更の意味
@import "tailwind.css";だと認識されない。
そこで、@import "tailwind";にするとうまくいく。理由はあまり良く分かっていない。
しかし、変更してしまうとvscodeの方で反映されなくなる。
だから、どっちも書けば解決！
@import "tailwind.css";
@import "tailwind";
また、別の問題も発生していた。
Qiitaだけ文字サイズが巨大になる。
原因は、Tailwindのrem基準がMarpによって変更されていたこと。
テーマCSSで上書きすれば解決。
section {
--marpit-root-font-size: 16px;
}
まとめ
Tailwindは一度CSSを生成してしまえば、あとは普通のMarpテーマとして読み込める。
これでscriptなしでもTailwind CSSを使ったスライドが作れる。