はじめに

Slidev ^{(slide + dev, /slaɪdɪv/)} は Web ベースのスライドメーカーおよびプレゼンターです。開発者がマークダウンでのコンテンツ作成に集中できるように設計されています。Vue などの Web テクノロジーの力により、ピクセルパーフェクトなデザインと対話的なデモをプレゼンテーションに提供できます。

TIP

このプロジェクトの背景にある理由の詳細については、📖 なぜ Slidev かを参照してください。

スライドを作成する

オンラインで試す

StackBlitz でブラウザで直接 Slidev を開始: sli.dev/new

ローカルで作成する

Node.js >= 18.0 がインストールされている必要があります。

次のコマンドを実行して、ローカルに新しい Slidev プロジェクトを作成します。

bash

# pnpm がインストールされていない場合
npm i -g pnpm

pnpm create slidev

bash

# 推奨されません -
# NPM は新しいプロジェクトを作成するたびにパッケージをダウンロードします。
# これは遅く、多くのスペースを占めます

npm init slidev@latest

bash

yarn create slidev

bash

bun create slidev

bash

deno init --npm slidev

プロンプトに従ってスライドプロジェクトを開始します。スライドコンテンツは slides.md にあり、最初はほとんどの Slidev 機能のデモが含まれています。マークダウン構文の詳細については、📖 構文ガイドを確認してください。

単一ファイルの使用 (推奨されません)

スライドとして単一のマークダウンファイルを使用したい場合は、Slidev CLI をグローバルにインストールできます。

bash

pnpm i -g @slidev/cli

bash

npm i -g @slidev/cli

bash

yarn global add @slidev/cli

bash

bun i -g @slidev/cli

bash

deno i -g npm:@slidev/cli

その後、次を使用して単一ファイルスライドを作成および開始できます。

bash

slidev slides.md

基本的なコマンド

Slidev は CLI に一連のコマンドを提供します。一般的なものをいくつか紹介します。

slidev - 開発サーバーを起動します。dev コマンドを参照してください。
slidev export - スライドを PDF、PPTX、または PNG にエクスポートします。📖 エクスポートを参照してください。
slidev build - スライドを静的 Web アプリケーションとしてビルドします。📖 ホスティングを参照してください。
slidev format - スライドをフォーマットします。format コマンドを参照してください。
slidev --help - ヘルプメッセージを表示します

これらのコマンドを実行するには、package.json スクリプトに追加できます (npm init slidev でプロジェクトが作成された場合は既に行われています)。

package.json

json

{
  "scripts": {
    "dev": "slidev --open",
    "build": "slidev build",
    "export": "slidev export"
  }
}

その後、npm run dev、npm run build、npm run export を実行するだけです。

CLI の詳細については、CLI ガイドを確認してください。

エディターを設定する

Slidev はマークダウンをソースエントリとして使用するため、スライドを作成するためにお好みのエディターを使用できます。また、スライドをより便利に編集するために役立つツールも提供しています。

コミュニティに参加する

公式の Discord サーバーに参加して、ヘルプを取得したり、スライドを共有したり、Slidev について何でも議論することをお勧めします。

バグが発生している場合は、GitHub で問題を開くことをお勧めします。

技術スタック

Slidev は以下のツールとテクノロジーを組み合わせることで実現しています。

Vite - 非常に高速なフロントエンドツール
Vue 3 によって強化されたマークダウン - コンテンツに焦点を当てながら、必要に応じて HTML と Vue コンポーネントの力を持つ
UnoCSS - オンデマンド・ユーティリティ優先の CSS フレームワーク、簡単にスライドをスタイル可能
Shiki、Monaco Editor - ライブコーディング機能を備えたファーストクラスのコードスニペットサポート
RecordRTC - ビルトインの録画とカメラビュー
VueUse ファミリー - @vueuse/core、@vueuse/head、@vueuse/motion など
Iconify - アイコンセット集
Drauu - 描画と注釈のサポート
KaTeX - LaTeX 数式レンダリング
Mermaid - テキストで描ける図

はじめに ​

スライドを作成する ​

オンラインで試す ​

ローカルで作成する ​

基本的なコマンド ​

エディターを設定する ​

コミュニティに参加する ​

技術スタック ​

はじめに

スライドを作成する

オンラインで試す

ローカルで作成する

基本的なコマンド

エディターを設定する

コミュニティに参加する

技術スタック