技術をかじる猫
技術をかじる猫

技術をかじる猫

自分は個人的に 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.

一通りインストールが終わると、サーバが自動起動する。

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 でエスケープできないので、ここでは画像で張り付け

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

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

見慣れないタグにもお気づきだろうか？ 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} $$

しかも埋め込み書式が Jupyter Notebook 互換な所は好感度高いです。

なんとなく見つけたツールだけど個人的にとてもうれしい機能が盛りだくさんだった。

📎📎📎📎📎📎📎📎📎📎
BOT