104
106

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Markdownでオシャレなスライドを作るSli.dev

Last updated at Posted at 2021-05-09

Sli.dev は Beta Version。あらかじめ

Slidev is still under heavy development. API and usages are not set in stone yet.

らしいので注意。しかしこれまで Markdown でスライド作るなら日本製 fusuma あるいは Marp かなと思っていたが、npm init slidev したら爆速でMarkdownでスライドのガワが http://localhost:3030/ にできた。(以下gifの日本語は筆者が入れた)

slidev.gif

以降は

npm run dev
npm run build
npm run export

sli.dev

使い方

C:\workspaces\nodejs\slidev>npm init slidev
npx: installed 22 in 6.101s

  ●■▲
  Slidev Creator  v0.6.2

? Project name: » slidev

...以上。プレゼンターモードというのもあって右上に時間が表示されている。
http://localhost:3030/presenter/1

image.png

slide.md ファイル、結局シンプルに以下だけ。

---
layout: cover
background: https://generative-placeholders.glitch.me/image?width=600&height=300&style=triangles&gap=100
---

# Slidev をお試し。

Presentation Slides for Developers

---

# Page 2

- 📄 Write slides in a single Markdown file
- 🌈 Themes, code blocks, interactive components
- 😎 Read the docs to learn more!|

Theme

Showcases

VSCode拡張

PDFにExport

npm install playwright-chromium
を行って、
npx slidev export
image.png

参考

これまでMarkdownでスライドを作るに以下辺りを参考にしていたがまた選択肢が増えたようだ...。

同じく紹介記事 :smiley:

簡単ながら以上、参考になればさいわいです。

104
106
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
104
106

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?