Create Stunning Developer Slides with Slidev: A Complete Markdown‑Based PPT Guide

Markdown is a lightweight markup language that many programmers use for project documentation, and when combined with tools it can also be used to create PPTs. This article shows how to use Markdown to build a cool PPT with Slidev.

Slidev Introduction

Slidev is a presentation tool designed for developers, currently boasting over 23K stars on GitHub. With Slidev you can create impressive PPTs using familiar Markdown while also supporting HTML and Vue components for pixel‑perfect layouts.

Key features include:

Installation

Before using Slidev to create PPTs, you need to set up its environment.

Ensure NodeJS 14+ is installed, then initialize a project with:

<code>npm init slidev</code>

During installation you will be prompted to enter a project name, e.g.,

mall-intro-sldev

, after which the project starts automatically.

If the project stops, you can run it again with:

<code>npm run dev</code>

You can also install the Slidev CLI globally and run it with the

slidev

command:

<code>npm i -g @slidev/cli</code>

After installation the project runs by default on port

3030

(http://localhost:3030/).

Usage

With the environment ready, you can start creating PPTs. The example below uses a Mall project introduction PPT.

Applying a Theme

Select a theme you like; this guide uses the

Penguin

theme.

<code>npm i slidev-theme-penguin</code>

If you see a warning about a missing pre‑processor, install

sass

:

<code># Prompt: Preprocessor dependency "sass" not found. Did you install it?
npm i sass</code>

Activate the theme by adding a

theme

property at the top of your Markdown file:

<code>---
theme: penguin
---</code>

Using Layouts

Layouts let you control the content of each slide. The examples use the penguin theme.

Intro layout – defines a cover page:

<code>---
layout: intro
---
# Mall Open‑Source E‑Commerce Project
</code>

Presenter layout – shows author information:

<code>---
layout: presenter
presenterImage: '/logo.png'
---
# macrozheng personal introduction
</code>

Default layout – no extra configuration needed:

<code>---
layout: default
---
# Project Introduction
</code>

Text‑image layout – displays text and an image side by side (use

reverse

to switch sides):

<code>---
layout: text-image
media: 'http://img.macrozheng.com/mall/project/mall_admin_show.png'
reverse: false
---
# Project Demo
</code>

New‑section layout – centers all content on the slide:

<code>---
layout: new-section
---
# System Architecture
![System Architecture](http://img.macrozheng.com/mall/project/mall_micro_service_arch.jpg)
</code>

Text‑window layout – shows part of the content inside a window using

::window::

:

<code>---
layout: text-window
---
# Business Architecture
- Product Management: ...
::window::
![Business Architecture](http://img.macrozheng.com/mall/project/mall_business_arch.png)
</code>

Two‑cols layout – creates a double‑column slide using

::right::

to split columns:

<code>---
layout: two-cols
---
</code>

Presentation Features

Slidev provides a toolbar with fullscreen, navigation, recording, and online editing buttons.

The "Overview" feature shows a thumbnail view of all slides.

You can switch themes (e.g., to a dark theme) on the fly.

The "Draw" tool lets you annotate important slide content.

Online editing allows you to modify slide content directly in the browser.

Deployment

Static deployment is simple: build the slide with a base path:

<code>slidev build mall-slidev.md --base /mall-slidev/</code>

The build output is placed in the

dist

directory.

Copy

dist

to the

html

folder of an Nginx server and rename it (e.g.,

mall-slidev

) to serve the PPT.

Conclusion

Using Markdown to create PPTs is very convenient for developers. Instead of searching for a PPT file, you can share a link that renders the slides instantly. However, Slidev has some drawbacks, such as the inability to fully display content that requires vertical scrolling (e.g., long code blocks or tables).

Reference

Official documentation: https://cn.sli.dev/guide/