🤔
Slidevで快適な資料作りは実現できるか
Slidev とは
Slidev は Markdown が使えるプレゼンテーションツールです。Vue で開発されているので HTML と Vue コンポーネントを用いることができます。そのため、通常のプレゼンテーションツールに比べ自由度の高いレイアウトとデザインが実現できます。
# Node.js >=14.0
yarn create slidev
# npm init slidev@latest
上記のコマンドで簡単に始めることができます。他にも Docker などでインストールすることも可能なようです。
簡単な使い方
スライドは単一の Markdown ファイル(デフォルトは./slides.md)を編集していきます。
私の環境では次のような内容がサンプルで作成されていました（一部抜粋）。
---
# try also 'default' to start simple
theme: seriph
# random image from a curated Unsplash collection by Anthony
# like them? see https://unsplash.com/collections/94734566/slidev
background: https://source.unsplash.com/collection/94734566/1920x1080
# apply any windi css classes to the current slide
class: "text-center"
# https://sli.dev/custom/highlighters.html
highlighter: shiki
# show line numbers in code blocks
lineNumbers: false
# some information about the slides, markdown enabled
info: |
## Slidev Starter Template
Presentation slides for developers.
Learn more at [Sli.dev](https://sli.dev)
# persist drawings in exports and build
drawings:
persist: false
# use UnoCSS
css: unocss
---
# Welcome to Slidev
Presentation slides for developers
<div class="pt-12">
<span @click="$slidev.nav.next" class="px-2 py-1 rounded cursor-pointer" hover="bg-white bg-opacity-10">
Press Space for next page <carbon:arrow-right class="inline"/>
</span>
</div>
<div class="abs-br m-6 flex gap-2">
<button @click="$slidev.nav.openInEditor()" title="Open in Editor" class="text-xl icon-btn opacity-50 !border-none !hover:text-white">
<carbon:edit />
</button>
<a href="https://github.com/slidevjs/slidev" target="_blank" alt="GitHub"
class="text-xl icon-btn opacity-50 !border-none !hover:text-white">
<carbon-logo-github />
</a>
</div>
<!--
The last comment block of each slide will be treated as slide notes. It will be visible and editable in Presenter Mode along with the slide. [Read more in the docs](https://sli.dev/guide/syntax.html#notes)
-->
---
最初に全体の設定をすればあとは書いていくだけのシンプルな仕様になっています。プレビューも確認できます。
yarn dev
> Slidev v0.36.6
> theme @slidev/theme-seriph
> entry /Users/xxxxxx/Documents/slidev/slides.md
> public slide show > http://localhost:3030/
> presenter mode > http://localhost:3030/presenter/
> remote control > pass --remote to enable
サンプルの md ファイルはリファレンスで説明されている Markdown 構文のデモを兼ねているらしいです。例えば
---
# LaTeX
LaTeX is supported out-of-box powered by [KaTeX](https://katex.org/).
<br>
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}
$$
<br>
[Learn more](https://sli.dev/guide/syntax#latex)
---
プレゼンテーションツールといえばテーマの選択ですが、md ファイルの先頭で指定します。サンプルではseriphが指定されています。
# try also 'default' to start simple
theme: seriph
テーマは公式やコミュニティからの提供に加えて npm 経由で提供されているものもあるのでとりあえず困ることはなさそうです。
- 公式ドキュメント: https://sli.dev/themes/gallery.html
- npm 経由: https://www.npmjs.com/search?q=keywords%3Aslidev-theme
local でサーバーを立てた状態で適当にテーマを指定すると自動でインストールを試みようとします。
# テーマをvuetifulに変更すると自動でインストールしようとする
? The theme "slidev-theme-vuetiful" was not found in your project, do you want to install it now? › (Y/n)
他にも静的ホスティングしたり PDF ダウンロードを可能にしたり色々できるようです。当面は Slidev を使って資料作りしていこうと思います ✊
Discussion