Zenn
Open3

Slidevでスライドを作成した

Vue.js
Markdown
Vite
Slidev
10000leaves10000leaves

Slidev とは？

Slidev (slide + dev) は、Markdownでスライドを作成することができる、Webベースのプレゼンテーションツール。
HTMLとVueコンポーネントも利用することができ、CSSでスライドに動きをつけるなどカスタムすることができる。

https://ja.sli.dev/

good

  • 📝 Markdownベース
    • どんなエディタでも編集できる
    • GitHubで管理しやすい
  • 🕸️ Webベース
    • 好きなホスティングサービスで配信できる
    • URLを教えるだけで共有できる
  • 🌟 アイコン
    • アイコンセットからアイコンを使える
  • 🌈 スタイリッシュ
    • 要素に動きを付与できる
  • 🎙 プレゼンターモード
    • スマホでスライドを操作できる
10000leaves10000leaves

技術スタック

使える技術。知っていると色々カスタムできます。

  • Vite
    非常に高速なフロントエンドツール
  • Vue 3をベースにしたMarkdown
    必要に応じてHTMLとVueコンポーネントを使いつつ、コンテンツに集中できます
  • Windi CSS
    オンデマンドなユーティリティファーストのCSSフレームワーク、 スライドを自在にスタイリング
  • Prism、Shiki、Monaco Editor
    ファーストクラスのコードスニペットサポートとライブコーディング機能
  • RecordRTC
    ビルトインのレコーディングとカメラビュー
  • VueUseファミリー
    @vueuse/core、@vueuse/head、@vueuse/motionなど
  • Iconify
    アイコンセットコレクション
  • Drauu
    描画と注釈のサポート
  • KaTeX
    LaTeX数式のレンダリング
  • Mermaid
    テキストによる図解
10000leaves10000leaves

事前準備

  • Node.jsがインストールされていること

オンラインでお試し

https://sli.dev/new

インストール・実行

インストール

Installation | Slidevに従い、インストールします。

# NPMで作成
$ npm init slidev
# Yarnで作成
$ yarn create slidev

実行

# NPMで実行
$ npm run dev
# Yarnで実行
$ yarn run dev

npx だと

# npxで実行
$ npx slidev

コマンド

{
  "scripts": {
    "dev": "slidev", // start dev server
    "build": "slidev build", // build for production SPA
    "export": "slidev export" // export slides to pdf
  }
}

その他のオプションについては、 slidev --help