Prologue

Vite, Vue 3, Windi CSS を使っている Slidev を触ってみました。

Vue と　Vite の部分を詳しく掘り下げたかったのですが、今回はデフォルトのスライドを触りながら基本的な機能を見るのみになります。

環境

macOS: v10.15.6
node.js: v16.2.0
terminal: iTerm
エディタ: VS Code
パッケージマネージャ: yarn

Slidev とは

マークダウンで書ける
スライドを単一のファイルに整理できる
テーマの拡張ができる
コードスニペットを使える（Prism, Shikiをサポート）
Vite, Vue 3, Windi CSS　を利用しているためスライドに高速で反映できる

プロジェクトの作成

**@m** slidev_sample % yarn create slidev
yarn create v1.22.4
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
error create-slidev@0.15.0: The engine "node" is incompatible with this module. Expected version ">=14.0.0". Got "12.18.2"
error Found incompatible module.
info Visit https://yarnpkg.com/en/docs/cli/create for documentation about this command.
**@m** slidev_sample % node -v
v12.18.2

node のバージョンは >=14.0.0 ということでエラーが出たため、 node の最新化を行いました。

nodebrew install-binary latest 
nodebrew ls-remote 
nodebrew use v16.2.0 
node -v
v16.2.0

改めて作成。

yarn create slidev        
yarn create v1.22.4
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Installed "create-slidev@0.15.0" with binaries:
      - create-slidev

  ●■▲
  Slidev Creator  v0.15.0

✔ Project name: … sample-project
  Scaffolding project in sample-project ...
  Done.

✔ Install and start it now? … yes
✔ Choose the agent › yarn
yarn install v1.22.4
info No lockfile found.
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
warning theme-vitesse@0.1.11: The engine "vscode" appears to be invalid.
[3/4] 🔗  Linking dependencies...
warning "@slidev/cli > vite-plugin-icons@0.5.1" has unmet peer dependency "vue-template-compiler@^2.6.12".
[4/4] 🔨  Building fresh packages...
success Saved lockfile.
✨  Done in 26.16s.
yarn run v1.22.4
$ slidev --open


  ●■▲
  Slidev  v0.15.0 

  theme   @slidev/theme-seriph
  entry   /Users/**/mi**/slidev/sample-project/slides.md

  slide show      > http://localhost:3030/
  presenter mode  > http://localhost:3030/presenter
  remote control  > pass --remote to enable


[@vue/compiler-sfc] <script setup> is still an experimental proposal.
Follow its status at https://github.com/vuejs/rfcs/pull/227.

[@vue/compiler-sfc] When using experimental features,
it is recommended to pin your vue dependencies to exact versions to avoid breakage.

途中プロジェクト名を入力する欄があります。（デフォルトの設定を書き換える形）
今回は sample-project として進めていきました。

インストールが終わると、初期画面が自動で立ち上がります。

アドレス: http://localhost:3030/1

初期フォルダ構成：

スライドの作成

参考: https://sli.dev/guide/syntax.html

プロジェクトルート下にある slides.md を読み取ってスライドに変換していきます。
単一のマークダウンファイルで書き込み、スライドのページを区切るには --- を使います。

# page1

here is description about this slides

---

# page2

hogehoge

レイアウト

front matter blocks の中に書き込むことによって、各スライドのレイアウトやメタデータを指定することができます。
--- で囲んで記載しますが、その中のテキストはYAML 形式のデータオブジェクトです。

---
theme: hoge
image: https://hoge.sample/image/image01.png
---

# page1

スタイリング

Markdown 内で <style> タグを使用してスライドのスタイルをオーバーライドできます。
scoped されるため、グローバルスタイルをオーバーライドするには、規約に沿ったフォルダ構成で対応可能となります。
参考: https://sli.dev/custom/directory-structure.html#style
windi.css もサポートしています。

# page1

<style>

h1 {
  color: #ddd
}
</style>

---

ノート（メモ）

各スライドの最後のコメントブロックがメモとして扱われます。

# page1

<!-- memo here -->

アイコン

一般的なオープンソースのアイコンセットに直接アクセスできます。
参考: https://sli.dev/guide/syntax.html#icons

複数エントリのサポート

V０.１５.0 から、slides.md を複数のファイルに分割することができるようになりました。

slides.md

# page 1

write here hogehoge


---
src: ./slides/subpage2.md
---

sample-project/slides/subpage2.md

# page 2

this is subpage 2 from another directory

Epilogue

Slidev は Webアプリケーションでできることはなんでもできる、とのことで API リクエストなどもできるらしいです。
1枚のファイルで複数ページのスライドが作成できるのですが、個人的には別ファイルに作成して差し込めるのが Vue ライクだなと感じました。
今回あげた以外にもレコードなど機能があるようなので、今後も追っていきたいと思いました。

Slidev の基本操作確認