Slidev Tutorial: Crafting Beautiful Presentations with Markdown and Vue

Slidev is an innovative tool that allows you to create stunning and interactive presentations using Markdown and Vue.js. Forget about traditional presentation software; with Slidev, your slides are code, making them version-controllable, easy to share, and highly customizable. This tutorial will guide you through the process of getting started with Slidev, from installation to advanced features.

What is Slidev?

Slidev is a web-based slide deck solution built with Vue.js. It leverages Markdown for content, allowing you to focus on your message while Slidev handles the styling and interactivity. Key features include:
* Markdown-centric: Write your slides in familiar Markdown syntax.
* Vue-powered: Extend your slides with Vue components for dynamic content.
* Themable: Easily switch between beautiful themes or create your own.
* Developer-friendly: Code highlighting, live reloading, and presenter mode.
* Exportable: Export your presentations to PDF, PNG, or even a deployable SPA.

Getting Started: Installation

To use Slidev, you need Node.js (v14.0.0 or higher) installed on your system.

Create a new Slidev project:
Open your terminal and run the following command:
bash npm init slidev
This command will prompt you to install create-slidev and then guide you through setting up your project. You’ll be asked for a project name and a few initial configurations.
Navigate to your project directory:
bash cd your-project-name
Start the development server:
bash npm run dev
This will start a local development server, usually at http://localhost:3030. Your browser will automatically open to display your new presentation. Slidev comes with hot-reloading, so any changes you make to your Markdown files will instantly reflect in the browser.

Basic Usage: Your First Presentation

A Slidev presentation is primarily a Markdown file (usually slides.md). Each slide is separated by ---.

Here’s a basic slides.md example:

“`markdown

Slide 1: Welcome!

Hello, Slidev!

This is your first slide.
You can write content using Markdown.

Bullet points
Bold text
Italic text

Slide 2: Features

Slidev is awesome because:

It uses Markdown.
It’s powered by Vue.js.
It’s highly customizable.

“`

Frontmatter

At the very top of your slides.md file, you can define global configurations using YAML frontmatter.

“`markdown

global frontmatter

theme: default
title: My Awesome Presentation
fonts:
sans: “Roboto”
mono: “Fira Code”

Slide 1

Slide 2

“`

You can also define frontmatter for individual slides to override global settings or add slide-specific properties.

“`markdown

global frontmatter

theme: default

slide frontmatter

layout: cover
background: https://source.unsplash.com/collection/9487973/1920×1080

My Cover Slide

“`

Key Features

Themes

Slidev comes with several built-in themes, and you can easily install more or create your own. To change the theme, modify the theme property in your global frontmatter:

“`markdown

theme: seriph # or “default”, “dracula”, etc.

“`

You can also install themes from npm:
bash npm install @slidev/theme-seriph
Then specify it in your frontmatter.

Layouts

Layouts define the structure of your slides. Slidev provides several built-in layouts (e.g., default, cover, center, two-cols). You can specify a layout using frontmatter for a slide:

“`markdown

layout: two-cols

Left Column

This content goes into the left column.

::right::

Right Column

This content goes into the right column.
“`

Components (Vue.js)

One of Slidev’s most powerful features is the ability to embed Vue components directly into your Markdown. This allows for highly interactive and dynamic slides.

You can use built-in components or create your own. For example, to show a clickable button:

“`markdown

layout: center

Interactive Slide

“`

You can also import and use your own .vue components. Create a components directory in your project root, and Slidev will automatically make them available.

“`markdown

“`

Then, in your slides.md:

“`markdown

layout: center

My Custom Component

“`

Code Highlighting

Slidev uses Prism for syntax highlighting. Simply wrap your code blocks with backticks and specify the language:

`markdownjs
console.log(‘Hello, Slidev!’);

function greet(name) {
return Hello, ${name}!;
}
“`
““

You can also add line numbers or highlight specific lines:

markdown ```js {all|1|3-4|5} console.log('Line 1'); console.log('Line 2'); console.log('Line 3'); console.log('Line 4'); console.log('Line 5'); ```
The {all|1|3-4|5} syntax means: show all lines initially, then highlight line 1, then lines 3-4, then line 5.

Presenter Mode

To access presenter mode, press p during your presentation. This opens a new window with:
* Current slide
* Next slide preview
* Speaker notes (defined in Markdown using )
* Timer

“`markdown

My Slide

This is the content of my slide.

“`

Exporting Your Presentation

Slidev can export your presentation in various formats:

PDF:
bash npm run export
This generates a dist.pdf file in your project root.
PNGs:
bash npm run export --format png
Single-Page Application (SPA):
bash npm run build
This creates a dist folder containing a static website that you can deploy anywhere.

Customization

Slidev is highly customizable. You can:
* Custom Styles: Add a style.css file in your project root to apply custom CSS.
* Custom Fonts: Configure fonts in your frontmatter or style.css.
* Custom Layouts: Create your own .vue files in the layouts directory.
* Custom Components: As shown above, create .vue files in the components directory.

Conclusion

Slidev offers a modern and efficient way to create presentations, combining the simplicity of Markdown with the power of Vue.js. Its developer-friendly features, extensive customization options, and versatile export capabilities make it an excellent choice for technical talks, workshops, and any presentation where you want to maintain control and flexibility.

Start exploring Slidev today and transform the way you create and deliver presentations!

For more detailed information, refer to the official Slidev documentation.