😽
Markdownでスライドが書けるViteベースのSlidevがけっこう良かった話
Slidevというmarkdownベースでスライドを書けるツールを使ってみました。割と良い感じだったのでレポートします。
作ったもの
リポジトリ
特長
- マークダウン中の任意の場所にhtmlタグを書ける
- Google Fontの読み込みが1行でできる
- WindiCSSが組み込みで入っており、かなり柔軟にスタイリングできる
- TailwindのJITコンパイル的なことがデフォでできる
- たとえば画像の埋め込みも全部<img class="w-[200px]">とかで書けちゃう
- Viteベースで組まれているので、HMRが高速
- PDFエクスポート付き
- GitHub PagesデプロイのサンプルGitHub Actionsがドキュメントに記載済み
マークダウン中の任意の場所にHTMLタグを書ける
以下のように、唐突にmarkdown内に<p>タグを書いても大丈夫です。
# マナリンクではエンジニアを採用中です！
<p className="text-[#777] mb-4">
オンライン家庭教師マナリンク(<a target=_blank href=https://manalink.jp>https://manalink.jp</a>)は以下の課題を解決しています。
</p>
Google Fontの読み込み
以下のようにfontsに指定すれば、勝手にGoogle FontからFontを読み込んでくれます。
fonts:
# like font-family in css, you can use `,` to separate multiple fonts for fallback
sans: 'Lato, Noto Sans JP'
serif: 'Lato, Noto Sans JP'
WindiCSSが組み込みで入っている
WindiCSSはTailwindCSSの拡張版のようなライブラリですが、ほぼTailwindCSSと同じでJITコンパイラの機能もついています。
以下のようにおもむろに箇条書きの中にTwitterの文字色でスクリーンネームを書き込むことができます。
# 自己紹介
- 「名人」というニックネームで活動
- Twitter: <span class="ml-2 text-[#1d9bf0] font-bold">@Meijin_garden</span>
- Webエンジニア6年目
- 好きな分野はWebフロントエンド
Viteベースで組まれているので、HMRが高速
slidevはViteをベースに組まれているので、開発中のHMRは高速ですし、ビルドシステムも同一のため、Viteに慣れている方であれば同様に扱うことができます。
PDFエクスポート付き
slidev exportコマンドでPDFエクスポートできます。ちょっと表示がおかしくなる箇所はありますがほとんど問題なしです。
GitHub PagesデプロイのサンプルGitHub Actionsがドキュメントに記載済み
ドキュメントにGitHub Pagesに上げる方法がymlとして載っているのでほぼコピペで動作させることができます。
簡単な紹介ではありましたが、これまでmarp(https://yhatt.github.io/marp/ )とかfusuma(https://github.com/hiroppy/fusuma )とかも試してきたけどこれはかなり手に馴染んだほうだったので同様のソリューションで色々悩んでいる方はぜひ検討してみてください。
Discussion