_Kerman

Slidev Tips 中文版 ​

Slidev is a wonderful tool for developers to create slides. It really helped me create high-quality slides efficiently.

I find these features the most appealing:

  • Text-based content: VS Code, AI completion, rewriting to/from essays
  • Familiar tech stack: Markdown, Atomic CSS, ...
  • Useful built-in features: Themes, Code blocks, ...

I assume you've tried Slidev before reading this. This post is a set of opinionated tips and is supplemental.

0. Before starting your slides... ​

Ask yourself: what do you want?

A. Finish the slides ASAP
B. Make the most attractive slides

Slidev wins for its Markdown-based intuitiveness (A) and web-based customizability (B). But it is not necessarily better than PowerPoint, even for developers (X):

Keep this in mind and avoid slipping into the X area.

1. Just use Atomic CSS ​

Slidev has built-in UnoCSS and MDC support.

Let's see how to color part of the text:

html
<!-- Plain Markdown -->
This is <span style="color: blue">blue</span>.

<!-- With UnoCSS -->
This is <span text-blue>blue</span>.

<!-- With MDC and UnoCSS 
    (requires `mdc: true` in headmatter) -->
This is [blue]{.text-blue}.

This is clearly a crucial reason for Slidev's efficiency. Use this as much as possible.

Must-know Atomic Class Names™
  • Layout:
    • flex flex-col grid grid-cols-2 items-center justify-center gap-4
    • relative absolute fixed m-4 p-4 w-4 h-4 left-4
  • Typography: text-2xl font-bold font-mono italic underline
  • Color: text-primary text-gray-800 bg-gray-200
  • Opacity: op-80 bg-op-20
  • Border: <div border="1 red solid rounded">

2. Just use HTML ​

Slidev themes are much more customizable than PowerPoint templates. We usually need to create slide layouts ourselves, which is made easy by the HTML layout engine.

Let's see how to make a self-introduction slide:

In my experience, the most efficient way is to use HTML in your Markdown and take advantage of flex and grid layouts:

html
<div grid grid-cols-2>
<div flex flex-col items-center>
  <img w-46 h-46 rounded-full src="..." />
  <div mt-8>_Kerman</div>
</div>
<div>

- AAA
- BBB
- CCC

</div>
</div>

This saves you a lot of time by not having to choose and tweak a pre-designed template.

3. Opacity as colors ​

It is not easy to find the most suitable colors in the provided color space—especially when you want some color depth. That's when opacity can help. It mixes the color with the background.

 
op-100   
op-60
op-30
text-green-*
100
200
300
400
500
600
700
800
900
100
200
300
400
500
600
700
800
900
100
200
300
400
500
600
700
800
900
 
bg-op-100
bg-op-60
bg-op-30
bg-green-*
100
200
300
400
500
600
700
800
900
100
200
300
400
500
600
700
800
900
100
200
300
400
500
600
700
800
900

4. Scale slides ​

Sometimes the slides look too empty or crowded. Instead of applying text-2xl everywhere to adjust the content size, the best way is to just scale the whole slide.

To adjust the entire slide deck, you can use the canvasWidth headmatter option. Its default value is 980. If your slides look too empty, try setting it smaller, for example, 784.

To adjust particular slides, you can use the zoom feature.

5. v-drag saves you ​

v-drag allow you to place elements by dragging them with the mouse, just like PowerPoint.

Without v-drag, the best way to place a floating element was to use <div absolute left-12 top-34> ... </div>, then manually adjust the two numbers little by little.

Now you only need to write <div v-drag> ... </div>, then just drag the element on the slide; the position will be automatically written back to your source code.

Note that you only need to use this feature on a few elements—it is less efficient and maintainable if the element can be positioned in a flow, like flex/grid described in Section 2.

6. Need Some Inspiration? ​

Check out https://antfu.me/talks to see masterpieces from the creator of Slidev! The source code is also available on GitHub.