Prologue
Vite, Vue 3, Windi CSS を使っている Slidev を触ってみました。
Vue と Vite の部分を詳しく掘り下げたかったのですが、今回はデフォルトのスライドを触りながら基本的な機能を見るのみになります。
公式: https://sli.dev/
環境
- 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
複数エントリのサポート
V0.15.0 から、slides.md
を複数のファイルに分割することができるようになりました。
# page 1
write here hogehoge
---
src: ./slides/subpage2.md
---
# page 2
this is subpage 2 from another directory
Epilogue
Slidev は Webアプリケーションでできることはなんでもできる、とのことで API リクエストなどもできるらしいです。
1枚のファイルで複数ページのスライドが作成できるのですが、個人的には別ファイルに作成して差し込めるのが Vue ライクだなと感じました。
今回あげた以外にもレコードなど機能があるようなので、今後も追っていきたいと思いました。