Slidev を docker で動かす

• 概要
• 環境
• markdown 作成
• 起動
• 動作確認
• 最後に
• 参考サイト

概要

Slidev は markdown でスライドが作成できるツールです
今回は簡単な使い方を紹介します

環境

• macOS 11.7.10
• docker 24.0.2
• slidev 0.49.10

markdown 作成

適当な markdown を作成しましょう
ファイル名は slides.md にします

• vim slides.md

# Slidevへようこそ!

開発者のためのプレゼンテーションスライド

---

# Page 2

- 📄 スライドを1つのMarkdownファイルで
- 🌈 テーマ、コードブロック、インタラクティブなコンポーネント
- 😎 詳しくはドキュメントをご覧ください!|

起動

docker run --name slidev --rm -it \
    --user node \
    -v ${PWD}:/slidev \
    -p 3030:3030 \
    -e NPM_MIRROR="https://registry.npmmirror.com" \
    tangramor/slidev:latest

マウントしているカレントに node_modules なども作成されるので注意しましょう
次回以降同じディレクトリで動作しないと再度作成されてしまいます

動作確認

http://localhost:3030/ にアクセスするとスライドが確認できます

セクションが長すぎると画面をはみ出てしまうのではみ出る場合はセクション内の文章を短くしましょう

最後に

少し記法が特殊な部分があるのでそこは対応が必要です
YAML ヘッダなどは使えます

参考サイト

• https://github.com/tangramor/slidev_docker