Marp から乗り換えよう！ Markdown スライドのSlidev

自分は個人的に Powerpoint を使いたくない。
なので、ある時期からスライド作成には Marp を使っていたのだが、他にも対抗馬ができたらしいのでやってみた。

Marp とは

Markdown で記述することができるスライドシステム。
実質的に electron で実装されており、要するに JavaScript + HTML5 で実装されている処理系である。

因みに Marp はこちら。 marp.app

VSCode/CLI の他、コアシステムをライブラリとしても利用できる。

markdown で記述し、様々なフォーマットでエクスポートできる。
編集しながら結果出力のプレビューも参照できるので、非常に扱いやすいツールである。

はてさて、Slidev はどうかというと…

Slidev

そして対抗馬となりえるMarkdoenスライドの Slidev について使っていく。
ちょっと使ってみたが、以下の様な特徴があった。

vue で拡張できる
latex 等の数式サポート

Marp は PDF 化までをきっちりサポートしていたが、意味論的にこちらは PDF はあくまで副次的。
あくまでメインは html 化して web 上のドキュメントとすることを前提としているようだ。

使い分けは必要かもしれないが、個人的にはこれ一本に乗り換えてもいいのではないかというレベルで好感度高かった。

install

npm init slidev すればプロジェクトが開始される。
スライド単位でプロジェクト作っていくスタイルかな？

PS D:\works\sandbox\slidev_sample> npm init slidev
Need to install the following packages:
  create-slidev
Ok to proceed? (y) y

  ●■▲
  Slidev Creator  v0.22.1

√ Project name: ... slidev
  Scaffolding project in slidev ...
  Done.

√ Install and start it now? ... yes
√ Choose the agent » npm
npm WARN ERESOLVE overriding peer dependency
npm WARN Found: vite@2.4.0-beta.2
npm WARN node_modules/vite
npm WARN   vite@"^2.4.0-beta.0" from @slidev/cli@0.22.1
npm WARN   node_modules/@slidev/cli
npm WARN     @slidev/cli@"^0.22.1" from the root project

中略

> dev
> slidev --open



  ●■▲
  Slidev  v0.22.1

  theme   @slidev/theme-seriph
  entry   D:\works\sandbox\slidev_sample\slidev\slides.md

  slide show      > http://localhost:3030/
  presenter mode  > http://localhost:3030/presenter
  remote control  > pass --remote to enable

  shortcuts       > restart | open | edit


[@vue/compiler-sfc] <script setup> is still an experimental proposal.
Follow its status at https://github.com/vuejs/rfcs/pull/227.

[@vue/compiler-sfc] When using experimental features,
it is recommended to pin your vue dependencies to exact versions to avoid breakage.

一通りインストールが終わると、サーバが自動起動する。
f:id:white-azalea:20210701224255p:plain

Ctrl + C で終了します。

使い方

README.md にチュートリアルが既に書いてあると思うが、他にもいくつかタスクがある。
npm でセットアップすると以下のタスクが存在した

npm run dev : スライドのリアルタイム反映される開発サーバが起動する。アドレスは http://localhost:3030
npm run build : dist/index.html にHTML生成して出力します。
npm run export : ./slides-export.pdf として PDF 出力してくれる。

因みに試してみたところ、html 出力した場合はサーバ上に上げることが前提のようだ。
index.html 開いたら CORS でめっさ怒られましてん…

元となるスライドは slides.md

サーバが起動したらスライドの操作はこんな感じ

right / space : 次のページ(またはアニメーション)
left / shift + space : 前のページ(またはアニメーション)
up : 前のページ
down : 次のページ

Markdown 書式

Markdown書式に対応している。
基本書式は次のリンク参照。

sli.dev

独自機能

独特な機能として、コードハイライトの直接指定。並びにクリックイベント。
※ バッククォートを hatena の markdown でエスケープできないので、ここでは画像で張り付け

f:id:white-azalea:20210701232911p:plain

見ての通り {all|2|1-6|9|all} にハイライトしたい行番号が書いてある。
すると、初期表示時は次の通りだが、

f:id:white-azalea:20210701233030p:plain

右キーを押すと 2 行目ハイライトなどができる

f:id:white-azalea:20210701233106p:plain

見慣れないタグにもお気づきだろうか？
arrow タグなんてものは HTML には当然ない。これは vue.js による拡張だ。

つまり、ドキュメント中に Vue コンポーネントを突っ込むことができる。

また、属性 v-click はそのページのクリック回数を指定して表示させることができる。
これは p タグなどの通常 HTML で使える。

<img
  v-click="2"
  class="absolute -bottom-9 -left-7 w-80 opacity-50"
  src="https://sli.dev/assets/arrow-bottom-left.svg"
/>

また @vueuse/motion もバンドル済みなので、アニメーションも埋め込める。

motion.vueuse.org

個人的に大好き Tex 対応！！！
というか数式対応！！！

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}
$$