Zenn
😽

Markdownでスライドが書けるViteベースのSlidevがけっこう良かった話

2021/10/31に公開
Markdown
Vite
Slidev
slides
tech

Slidevというmarkdownベースでスライドを書けるツールを使ってみました。割と良い感じだったのでレポートします。

https://sli.dev/guide/why.html

作ったもの

https://speakerdeck.com/texmeijin/ci-shi-dai-hurontoendoturuviteru-men-hui

https://texmeijin.github.io/vite-introduce-meetup/1

リポジトリ

https://github.com/TeXmeijin/vite-introduce-meetup

特長

  • マークダウン中の任意の場所に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として載っているのでほぼコピペで動作させることができます。

https://github.com/TeXmeijin/vite-introduce-meetup/blob/main/.github/workflows/deploy.yml

簡単な紹介ではありましたが、これまでmarp(https://yhatt.github.io/marp/ )とかfusuma(https://github.com/hiroppy/fusuma )とかも試してきたけどこれはかなり手に馴染んだほうだったので同様のソリューションで色々悩んでいる方はぜひ検討してみてください。

Discussion