🤔

Slidevで快適な資料作りは実現できるか

2022/10/09に公開約3,600字

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

sample-slide-1

サンプルの md ファイルはリファレンスで説明されている Markdown 構文のデモを兼ねているらしいです。例えば\LaTeXも使えます。まあ 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 経由で提供されているものもあるのでとりあえず困ることはなさそうです。

local でサーバーを立てた状態で適当にテーマを指定すると自動でインストールを試みようとします。

# テーマをvuetifulに変更すると自動でインストールしようとする
? The theme "slidev-theme-vuetiful" was not found in your project, do you want to install it now? › (Y/n)

他にも静的ホスティングしたり PDF ダウンロードを可能にしたり色々できるようです。当面は Slidev を使って資料作りしていこうと思います ✊

GitHubで編集を提案

Discussion

ログインするとコメントできます