Markdownで簡単にスライド作成ができる、Slidevというツールができたので使ってみました。
上記のオフィシャルを見れば大体わかることかもしれませんが...簡単にポイントをまとめてみました。
インストールについて
こちらのコマンドだけです。
ターミナルの中で、slidevインストールするのに使うツール（npm or yarn)
プロジェクト名称なんかを聞かれるだけです。
※ちなみにプロジェクト名でフォルダが作成されますので、予め作っておく必要はありません。
npm init slidev@latest
起動完了したら、http://localhost:3030/で下記のようなスライドが立ち上がります。
スライドの画像はunsplashを使っているようです。
ファイル構成について
あまりややこしいことを覚える必要はなく...スライドはslides.mdのファイルに書いていきます。
slides.mdファイルについて
スライドの区切りは---で区切る。
ちょっとまだルールが判っていないですが、そのスライドのレイアウトの設定を入れる際はさらに---で区切るようです。
---
layout: image-right
image: https://source.unsplash.com/collection/94734566/1920x1080
---
# Code
Use code snippets and get the highlighting directly!
...
ページに個別のstyleタグの挿入が可能
各ページに個別に<style>タグを入れることができるようです。
<style>
h1 {
background-color: #2B90B6;
background-image: linear-gradient(45deg, #4EC5D4 10%, #146b8c 20%);
background-size: 100%;
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
}
</style>
ソースコードにハイライトの設定が可能
ソースコードの指定は通常のMarkdownの通りshift+@で指定しますが、{}でハイライトの設定ができるようです。
下記コードの２行目の{all|2|1-6|9|all}でソースコードの全て、２行目のみ、１行目から６行目、９行目、全ての順でハイライトされるようになります。
```ts {all|2|1-6|9|all}
interface User {
id: number
firstName: string
lastName: string
role: string
}
function updateUser(id: number, update: User) {
const user = getUser(id)
const newUser = {...user, ...update}
saveUser(id, newUser)
}
テーマ
オフィシャルに幾つかありますが、まだ出たばっかりのツールなのか、あまり充実はしていないようです。
ファイルの先頭で指定します。
---
# try also 'default' to start simple
theme: seriph
---
Vueコンポーネントの挿入が可能
Vueベースでできているツールのようで、コンポーネントの挿入が可能のようです。
<Tweet/>や<>Youtube/>なんかはデフォルトでサポートされているようです。
<Tweet id="1390115482657726468" scale="0.65" />
LaTexのサポート
そもそも詳しく無いですが、LaTexのサポートがあるようです。
Inline $\sqrt{3x-1}+(1+x)^2$
Block
$$
\begin{array}{c}
\nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} &
= \frac{4\pi}{c}\vec{\mathbf{j}} \nabla \cdot \vec{\mathbf{E}} & = 4 \pi \rho \\
\nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} & = \vec{\mathbf{0}} \\
\nabla \cdot \vec{\mathbf{B}} & = 0
\end{array}
$$
結果
ダイヤグラムのサポート
フローチャートなんかも描けるようです。
```mermaid {scale: 0.9}
sequenceDiagram
Alice->John: Hello John, how are you?
Note over Alice,John: A typical interaction
```mermaid {theme: 'neutral', scale: 0.8}
graph TD
B[Text] --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2]
結果
エクスポートについて
スライドは簡単にPDF等でエクスポートできるようです。
まず、playwright-chromiunというツールをインストールします。
npm i -D playwright-chromium
インストールが完了したら、次のコマンドで簡単にエクスポートできます。
slidev export
最後に
まだベータ版のようですが、シンプルでおしゃれなスライドが作れそうなのでちょっと色々試していきたいと思います。
スライドもマークダウンで作った方が記載や資料のレイアウトにまとまりができるので良いですね。（Googleスライドや、MSpptは真っ白のキャンバスに書くことになるので、こっちはこっちでスライド毎に自由な記載になってしまいがち。。）