slidevを使って、markdownでスライドを作る

r4ai 2023/08/11に更新

プロジェクトの作成

色々聞かれるので適当に答える。Project nameを.にすればカレントディレクトリ下に生成される。

pnpm create slidev

各種コマンド

# 依存関係をインストールする
pnpm i

# スライドを表示する開発サーバーを立てる
pnpm dev

https://sli.dev/guide/install.html

r4ai 2023/08/11

執筆環境を整える

エディタにはVSCodeを使う。
スタイルはUnoCSSを使う
- Slidevで使われていので、設定なしですぐ使える。
- tailwindcssとほぼ同じ感覚で書ける。

VSCode拡張機能のインストール

まず、Slidevの拡張機能を入れる。エディタと同期してスライドを表示できるようになる。

次に、UnoCSSの拡張機能を入れる。エディタ上でクラス名の補完が効く様になる。

UnoCSSの設定ファイルを置く。これを置かないと拡張機能が動かない。

uno.config.ts

import { defineConfig } from 'unocss'

export default defineConfig({
  shortcuts: {
    // custom the default background
    'bg-main': 'bg-white text-[#181818] dark:bg-[#121212] dark:text-[#ddd]',
  },
  // ...
})

Configure UnoCSS | sli.dev

r4ai 2023/08/11

SlidevのMarkdown文法

公式ドキュメント参照：

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

プレゼンターモード

http://localhost:3030/presenterでプレゼンターモードが開く。
- プレゼンターモードでの操作は他のウィンドウで開いている画面にも反映される。
- 画面共有で発表する際は、プレゼンターモードの画面で操作して、もう一つの画面を共有するのがよさそう。