はじめに

概要

Slidev (slide + dev, /slʌɪdɪv/) はWebベースのスライド作成およびプレゼンテーションツールです。開発者がMarkdownでコンテンツを書くことに集中しつつ、HTMLとVueコンポーネントを用いて、プレゼンテーションにインタラクティブなデモを埋め込んだピクセルパーフェクトなレイアウトとデザインを提供できるようにも設計されています。

機能豊富なマークダウンファイルを使用して、ライブコーディング、PDFエクスポート、プレゼンテーションのレコーディングのような、多くのビルトインインテグレーションとともに、瞬時に再読み込みが可能な美しいスライドを生成します。webで動くので、Slidevを使ってどんなことでもできます - 可能性は無限大です。

プロジェクトの論理的根拠については なぜSlidev? のセクションで詳しく説明しています。

機能

技術スタック

これらのツールや技術を組み合わせることで、Slidevは実現されています。

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

はじめてのプレゼンテーションを作成する


オンラインで試す

sli.dev/new

ローカルで作成する

NPMで作成:

$ npm init slidev

Yarnで作成:

$ yarn create slidev

プロンプトに従って、今すぐスライドを作り始めましょう! Markdownシンタックスの詳細は、 シンタックスガイドを参照してください。

コマンドラインインターフェース

Slidevがインストールされたプロジェクトでは、 npmスクリプトで slidevコマンドを使用することができます。

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

あるいは npx で使用することができます。

$ npx slidev

その他のオプションについては、 slidev --help を実行してください。

Markdownシンタックス

Slidevはプロジェクトルートの配下にある slides.md を読み取り、スライドに変換します。 変更を加えると、 スライドのコンテンツに即時に反映されます。 例:

# Slidev

Hello World

---

# Page 2

Directly use code blocks for highlighting

//```ts
console.log('Hello, World!')
//```

---

# Page 3

SlidevのMarkdownシンタックスについては シンタックスガイド を参照してください。