torish14 / what-i-like-about-nuxt

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Slidev を使ってスライドを作る

Slidev の特徴

  • 📝 マークダウンベース - お好みのエディタやワークフローを使用可能
  • 👨‍💻 開発者フレンドリー - ビルトインのシンタックスハイライト、ライブコーディングなど
  • 🎨 テーマが使える - npm パッケージでテーマを共有・使用可能
  • 🌈 スタイリッシュ - Windi CSS オンデマンドユーティリティ、使いやすい埋め込みスタイルシート
  • 🤹 相互作用 - Vue コンポーネントをシームレスに埋め込める
  • 🎙 プレゼンターモード - 別ウィンドウ、または携帯電話でスライドを操作可能
  • 🎨 お絵かき - スライドに絵を描いて注釈を入れることができる
  • 🧮 LaTex - LaTeX の数式をビルトインでサポートします
  • 📰 ダイアグラム - テキスト説明付きのダイアグラムを作成します
  • 🌟 アイコン - あらゆるアイコンセットからアイコンに直接アクセス可能
  • 💻 エディタ - 統合されたエディタ、または VS Code 用の拡張機能
  • 🎥 録音 - 内蔵の録画とカメラビュー
  • 📤 ポータブル - PDF、PNG、またはホスト可能な SPA にエクスポートします
  • ⚡️ 高速 - Vite によるインスタントリローディング
  • 🛠 ハック可能 - Vite プラグイン、Vue コンポーネント、または npm パッケージを使用できます

基本的な使い方

  • npx slidev or npm init slidev or yarn create slidev でプロジェクト作成
  • ハイフン 3 つで区切られた箇所がひとつのスライド

ディレクトリ構造

  • components/: カスタムコンポーネント
  • layouts/: カスタムレイアウト
  • public/: 静的アセット
  • setup/: カスタム setup/hooks
  • styles/: カスタム style
  • index.html: index.html へ注入する
  • slides.md: エントリーポイント

参考サイト

開発者のためのスライド作成ツール Slidev がすごい

Slidev を導入して Markdown で美しいスライドを書こう

About