## 経緯
そろそろスライド作成の速度を[[AI]]の力でブーストしてみたくなった。
ここ2~3年間は[[Marp]]を使ってきたが、『開発者のためのプレゼンテーションスライドツール』という触れ込みの[[Slidev]]が気になったので試してみたくなった。
そもそも自分は [[TypeScript]] x [[Vue]] 開発が専門分野なので、[[Vite]]で動き、[[Vue]]も利用できる[[Slidev]]とは相性がいいと思われる。
### 環境
```console
$ bun pm ls
/Users/tadashi-aikawa/tmp/slidev-sandbox node_modules (752)
├── @iconify-json/
[email protected]
├── @slidev/
[email protected]
├── @slidev/
[email protected]
├── @slidev/
[email protected]
├──
[email protected]
├──
[email protected]
├──
[email protected]
├──
[email protected]
└──
[email protected]
```
## プロジェクト作成
事前インストールなどは不要。プロジェクト作成コマンドを使う。
```console
$ bun create slidev
●■▲
Slidev Creator v52.14.1
✔ Project name: … slidev-sandbox
Scaffolding project in slidev-sandbox ...
Done.
✔ Install and start it now? … yes
✔ Choose the package manager › bun
bun install v1.3.5 (1e86cebd)
+ @slidev/
[email protected]
+ @slidev/
[email protected]
+ @slidev/
[email protected]
+
[email protected]
```
勝手にブラウザが立ち上がる。
### [[Shiki]]の導入
`./setup/shiki.ts` を作成。
```ts
import { defineShikiSetup } from "@slidev/types";
export default defineShikiSetup(() => {
return {
themes: {
dark: "min-dark",
light: "min-light",
},
transformers: [
// ...
],
};
});
```
<div class="link-card-v2">
<div class="link-card-v2-site">
<img class="link-card-v2-site-icon" src="https://ja.sli.dev/favicon.png" />
<span class="link-card-v2-site-name">ja.sli.dev</span>
</div>
<div class="link-card-v2-title">
Slidev
</div>
<div class="link-card-v2-content">
開発者のためのプレゼンテーションスライド
</div>
<img class="link-card-v2-image" src="https://sli.dev/og-image.png" />
<a href="https://ja.sli.dev/custom/config-highlighter"></a>
</div>
### アイコンの導入
[[VSCode Icons]]をインストール。
```console
bun add @iconify-json/vscode-icons
```
`uno.config.ts`
```ts
import { defineConfig } from 'unocss'
export default defineConfig({
safelist: [
// ここに追加していく
'i-vscode-icons:file-type-lua',
],
})
```
## フォーマッターの設定
[[Prettier]]を使う。
```console
bun add -D prettier prettier-plugin-slidev prettier-plugin-tailwindcss
```
[[Slidev]]は[[Tailwind CSS]]ではなく[[UnoCSS]]だが、[[Prettier]]の[[Tailwind CSS]]用フォーマットエコシステムが有効活用できるのでそのまま使う。そうしないと[[ESLint]]が必要になってしまうので...。
`.prettierrc.json`
```json
{
"overrides": [
{
"files": ["slides.md", "pages/*.md"],
"options": {
"parser": "slidev",
"plugins": ["prettier-plugin-slidev"]
}
}
],
"plugins": [
"prettier-plugin-tailwindcss"
],
"tailwindFunctions": ["cva", "cn"]
}
```
[[conform.nvim]]の設定では以下のようなフォーマッターを定義。
```lua
local markdown_formatter = function(bufnr)
local bufname = vim.api.nvim_buf_get_name(bufnr)
if bufname:match("/slides%.md