PENGUINITIS - Slidev

Slidev（スライデヴ）は、ブラウザで動作するプレゼンツールで、Markdownにより記述する。

使い方

$ npm init slidev 
Need to install the following packages:
create-slidev@52.1.0
Ok to proceed? (y) 


> npx
> create-slidev


  ●■▲
  Slidev Creator  v52.1.0

✔ Project name: … test
  Scaffolding project in test ...
  Done.

✔ Install and start it now? … yes
✔ Choose the package manager › npm
...

スライドの作り方

スライド

---
# You can also start simply with 'default'
theme: seriph
# random image from a curated Unsplash collection by Anthony
# like them? see https://unsplash.com/collections/94734566/slidev
background: https://cover.sli.dev
# some information about your slides (markdown enabled)
title: Welcome to Slidev
...
---

これはスライドの区切りになっている。設定と内容が1セットになっており、これを繰り返す。最初だけテーマとか色々書く。設定部分に日本語を入れると動作がおかしくなることがあるので、日本語を入れるのはやめておいたほうがよさそうである。

なお、コメントはHTML形式で入れる。HTMLタグも有効。

<!-- タイトル -->
# Slidevの使い方

penguin

---

# 遷移の種類

- fade - Crossfade in/out
- fade-out - Fade out and then fade in
- slide-left - Slides to the left (slide to right when going backward)
- slide-right - Slides to the right (slide to left when going backward)
- slide-up - Slides to the top (slide to bottom when going backward)

スライドの遷移

---
transition: fade
---

遷移の種類としては、確認できたものとして以下のものがある（参考）。

<Toc minDepth="1" maxDepth="1" />

---
level: 2
---

スライドのレベルを2に設定すると、前のスライドのレベルが設定されていない場合、このスライドは前のスライドのサブになる。このとき、目次の深さを1に設定していると、このスライドは項目として出てこない。

レイアウト

2列で表示

---
layout: two-cols
layoutClass: gap-16
---

# レイアウト

2つにわける。

::right::

右側

右に図を表示

---
layout: image-right
image: https://cover.sli.dev
---

左に図を表示

---
layout: image-left
image: https://cover.sli.dev
--

図を表示

---
layout: image
image: https://cover.sli.dev
backgroundSize: 90% 90%
---

中央に表示

---
layout: center
#class: text-center
---

何もかも中央揃えにしたければ、class: text-centerを指定する。

引用を表示

---
layout: quote
---

セクション

---
layout: section
level: 2
---

終わり

---
layout: end
---

アニメーション

<div v-click>スライドを進めると出てくる</div>

最初は何も表示されなくて、スライドを進めると文字が出てくる。前のと一緒に出てくるように指示することもできる。

<div v-click>これのあとに</div>
<div v-after>これも出てくる</div>

<div v-click.hide>スライドを進めると消えちゃう</div>

リストなど、1つずつ設定するのがめんどくさいものは、以下のようにするとまとめて設定できる。

<v-clicks depth=2>

- item 1
  - item 1.1
- item 2

</v-clicks>

ここで、depthはどこまでの深さまで個別にやるかの指定である。

<span v-mark.underline.red>ここを強調する</span>

<span v-mark.circle.orange>ここを強調する</span>

数式

インラインの数式は$E = mc^2$というように書く。

$$
\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}
$$

図

Mermaidで図が描ける。コードブロックのように書くが、コードブロックではない。

<div grid="~ cols-3 gap-2" m="t-2">
  <!-- ここに図を置く -->
</div>

テーマ

---
theme: default
#theme: seriph
---

他にもある。ローカルにないものを指定すると、インストールするかどうかコマンドラインのほうで聞かれる。

サンプル

書き出し

$ npm i -D playwright-chromium

$ npm run export

$ npx slidev export --format pptx

.../node_modules/pptxgenjs/dist/pptxgen.es.js:2
import JSZip from 'jszip';
^^^^^^

SyntaxError: Cannot use import statement outside a module

{
    "name": "pptxgenjs",
    "type": "module",

うまくいけばslides-export.pptxが書き出される。ただし、編集はできないようである。

Slidev 2025年8月11日
はじめに Slidev（スライデヴ）は、ブラウザで動作するプレゼンツールで、Markdownにより記述する。使い方 `$ npm init slidev Need to install the following packages: create-slidev@52.1.0 Ok to proceed? (y) > npx > create-slidev ●■▲ Slidev Creator v52.1.0 ✔ Project name: … test Scaffolding project in test ... Done. ✔ Install and start it now? … yes ✔ Choose the package manager › npm ...` ブラウザが起動してデモが表示される。一旦閉じたあと、再度起動するには、`npm run dev`とする。スライドの作り方 slides.mdを編集する。スライド `---`から`---`のあいだは設定で、YAMLとして解釈される。 `--- # You can also start simply with 'default' theme: seriph # random image from a curated Unsplash collection by Anthony # like them? see https://unsplash.com/collections/94734566/slidev background: https://cover.sli.dev # some information about your slides (markdown enabled) title: Welcome to Slidev ... ---` これはスライドの区切りになっている。設定と内容が1セットになっており、これを繰り返す。最初だけテーマとか色々書く。設定部分に日本語を入れると動作がおかしくなることがあるので、日本語を入れるのはやめておいたほうがよさそうである。なお、コメントはHTML形式`<!-- ... -->`で入れる。HTMLタグも有効。特に設定がなければ、区切りは`---`だけでもよい。 `<!-- タイトル --> # Slidevの使い方 penguin --- # 遷移の種類 - fade - Crossfade in/out - fade-out - Fade out and then fade in - slide-left - Slides to the left (slide to right when going backward) - slide-right - Slides to the right (slide to left when going backward) - slide-up - Slides to the top (slide to bottom when going backward)` スライドの遷移スライドの遷移の設定は、以下のようにする。 `--- transition: fade ---` 遷移の種類としては、確認できたものとして以下のものがある（参考）。 fade - Crossfade in/out fade-out - Fade out and then fade in slide-left - Slides to the left (slide to right when going backward) slide-right - Slides to the right (slide to left when going backward) slide-up - Slides to the top (slide to bottom when going backward) 目次目次を入れるには、次のようにする。 `<Toc minDepth="1" maxDepth="1" />` スライドには深さがあって、levelで設定する。 `--- level: 2 ---` スライドのレベルを2に設定すると、前のスライドのレベルが設定されていない場合、このスライドは前のスライドのサブになる。このとき、目次の深さを1に設定していると、このスライドは項目として出てこない。レイアウト 2列で表示レイアウトを2列にするには、次のようにする。 `--- layout: two-cols layoutClass: gap-16 ---` 折り返しは、`::right::`で設定する。 `# レイアウト 2つにわける。 ::right:: 右側` 右に図を表示 2列にわけて、右に図を表示するには、次のようにする。 `--- layout: image-right image: https://cover.sli.dev ---` 左に図を表示 2列にわけて、左に図を表示するには、次のようにする。 `--- layout: image-left image: https://cover.sli.dev --` 図を表示図を真ん中に表示するには、次のようにする。 `--- layout: image image: https://cover.sli.dev backgroundSize: 90% 90% ---` 文字を入れると、図に重なる。中央に表示中央に表示するには、次のようにする。 `--- layout: center #class: text-center ---` 何もかも中央揃えにしたければ、`class: text-center`を指定する。引用を表示 `--- layout: quote ---` ありがたいお言葉を紹介したい場合。セクションセクション区切り。 `--- layout: section level: 2 ---` 終わり終わり。 `--- layout: end ---` アニメーションアニメーションさせるには、次のようにする。 `<div v-click>スライドを進めると出てくる</div>` 最初は何も表示されなくて、スライドを進めると文字が出てくる。前のと一緒に出てくるように指示することもできる。 `<div v-click>これのあとに</div> <div v-after>これも出てくる</div>` 逆に隠すということもできる。 `<div v-click.hide>スライドを進めると消えちゃう</div>` リストなど、1つずつ設定するのがめんどくさいものは、以下のようにするとまとめて設定できる。 `<v-clicks depth=2> - item 1 - item 1.1 - item 2 </v-clicks>` ここで、depthはどこまでの深さまで個別にやるかの指定である。アンダーラインを引く強調表示。 `<span v-mark.underline.red>ここを強調する</span>` ぐるぐる囲む強調表示。 `<span v-mark.circle.orange>ここを強調する</span>` 数式数式が書ける。 `インラインの数式は$E = mc^2$というように書く。` `$$ \int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi} $$` 図 Mermaidで図が描ける。コードブロックのように書くが、コードブロックではない。 ```mermaid {scale: 0.5} flowchart TD A[にゃんこが起きる] --> B{お腹が空いているか?} B -->\|はい\| C[ごはんを食べる] B -->\|いいえ\| D[遊ぶ] C --> E[お腹が満たされる] D --> F[おもちゃで遊ぶ] E --> G[お昼寝する] F --> G ``` ```mermaid {scale: 0.5} sequenceDiagram participant にゃんこ participant 飼い主にゃんこ->>飼い主: 朝に鳴く飼い主->>にゃんこ: ごはんをあげるにゃんこ->>にゃんこ: ごはんを食べるにゃんこ->>飼い主: お腹が満たされるにゃんこ->>にゃんこ: お昼寝するにゃんこ->>飼い主: 夕方に遊ぶにゃんこ->>にゃんこ: 夜に寝る ``` ```mermaid {scale: 0.5} classDiagram class にゃんこ { +名前: string +好きな場所: string[] +遊ぶ(): void } class 箱 { +大きさ: string +中身: string } class ソファ { +柔らかさ: string } にゃんこ --> 箱: 好きな場所にゃんこ --> ソファ: 好きな場所 ``` 図を3つ横に並べたいなどの場合は、次のようにする。 `<div grid="~ cols-3 gap-2" m="t-2"> <!-- ここに図を置く --> </div>` `cols-3`で列の個数を指定している。テーマ全体のデザインのテーマは、最初の設定の中で指定する。 `--- theme: default #theme: seriph ---` 他にもある。ローカルにないものを指定すると、インストールするかどうかコマンドラインのほうで聞かれる。サンプル slides.md slides-export.pdf 書き出し前準備 `$ npm i -D playwright-chromium` PDFとして書き出すなら、以下のようにする。 `$ npm run export` slides-export.pdfが書き出される。 PPTXとして書き出すなら、以下のようにする。 `$ npx slidev export --format pptx` `.../node_modules/pptxgenjs/dist/pptxgen.es.js:2 import JSZip from 'jszip'; ^^^^^^ SyntaxError: Cannot use import statement outside a module` node_modules/pptxgenjs/package.jsonに`"type": "module",`を追加した。 `{ "name": "pptxgenjs", "type": "module",` うまくいけばslides-export.pptxが書き出される。ただし、編集はできないようである。

PENGUINITIS

Slidev

はじめに

使い方