iTranslated by AI

The content below is an AI-generated translation. This is an experimental feature, and may contain errors. View original article

✨

How to Create Engaging Slidev Presentations from PDFs Using ChatGPT

2025/02/19に公開

When creating presentation materials, there are times when you might want to create Slidev slides from an existing PDF. However, manually recreating slides is time-consuming, so it is highly convenient to utilize ChatGPT for automation.

In this article, I will explain in detail the steps to convert a PDF into Markdown code using ChatGPT and create slides with Slidev.

1. Uploading the PDF to ChatGPT

ChatGPT has a file upload feature, which allows you to directly upload a PDF and have its content converted into Markdown format.
This is the slide I used this time!

1. Upload the PDF to ChatGPT

Use a ChatGPT model that supports file uploads (such as GPT-4 Turbo).
Drag and drop the PDF to upload it.
Enter a prompt like the following:

Please convert this PDF into Markdown format for Slidev.  
Include slide titles and appropriate headings, and consider list formats and layouts.

I am using the GPT-4o model.

2. Retrieving the Markdown code generated by ChatGPT

ChatGPT analyzes the content of the PDF and outputs Markdown code that can be used directly in Slidev. For example, you will get code like the following:

---
title: Women Techmakers Ambassador
theme: seriph
background: ./assets/key_visual.jpg
class: text-center
---

# Women Techmakers Ambassador  
Empowering the Next Generation of Global Tech Leaders

CyberAgent, Inc.  
Yu Kamiya

---

layout: image-right
image: https://example.com/profile.jpg
class: my-cool-content-on-the-left

# Self-introduction

- **Software Engineer** @ CyberAgent  
- **Co-founder** @ Ms.Engineer  
- **Women Techmakers Ambassador**  
- Host of the parenting × tech podcast "momit.fm"  
- **Mother of 3**  

---
layout: two-cols-header
---

# Career Highlights

::left::

## 2008-2013
- **In-house media development** (Java/Server-side)  
- **Smartphone app development** (Android/Java)  

## 2014-2021
- Music streaming service development (Golang)  
- **Ms.Engineer launch**  
- **Maternity leave × 3**  

::right::

## 2022-present
- Tech DE&I project launch
- Developers Connect Department (Manager)

<img src="./assets/career_highlight.png" class="bottom-right" />

With this, the structure of your slides is now organized in Markdown format.

3. Creating slides with Slidev

To use the Markdown code generated by ChatGPT in Slidev, follow these steps.

3-1. Installing Slidev

If you haven't installed Slidev yet, run the following command to install it.

npm install -g @slidev/cli

3-2. Creating a slide project

slidev create my-presentation

A folder will be created. Open slides.md and paste the Markdown you obtained from ChatGPT.

3-3. Previewing the slides

You can view your slides with the following command:

slidev

A browser will open, displaying the slides based on your Markdown.

I was able to migrate my slides in less than 30 minutes just by doing this.

You can see the finished slides here:

It is a bit of a shame that animations are lost when converting to PDF, but in reality, I launch it on localhost and present using a browser.

4. Customizing slides

In Slidev, you can freely adjust themes and layouts.

4-1. Changing the h1 style for the second page and onwards

To change the design of h1 elements from the second page onwards, add the following CSS:

<style>
/* Apply styles to h1 from the second page onwards */
section:nth-of-type(n+2) h1 {
  color: #4EC5D4;
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
  font-size: 3rem;
  font-weight: bold;
  text-align: center;
}
</style>

4-2. Making profile images circular

By default, images in Slidev are rectangular. To make profile photos circular, apply the following CSS:

<style>
img {
  border-radius: 50%;
  width: 150px;
  height: 150px;
  object-fit: cover;
}
</style>

4-3. Placing images at the bottom right

If you want to place an image at the bottom right of a slide, apply the following CSS:

<img src="./assets/image.png" class="bottom-right" />

<style>
.bottom-right {
  position: absolute;
  bottom: 20px;
  right: 20px;
  width: 100px;
  height: auto;
}
</style>

5. Exporting slides

Once your slides are finished in Slidev, you can export them to PDF or PNG.

5-1. PDF export

slidev export

Running this command will create slides.pdf.

5-2. PNG export

slidev export --format png

All slides will be exported as individual images.

Summary

By combining ChatGPT and Slidev, you can streamline the process of creating slides from PDFs.

✅ Upload a PDF to ChatGPT and generate Markdown code
✅ Use Markdown in Slidev to create slides
✅ Customize designs to create readable and attractive slides
✅ Export as PDF or PNG at the end

Using this method allows you to create high-quality slides while minimizing manual work. Please give it a try!

Bonus

I even wrote this article using the ChatGPT log, and it was completed in about 20 minutes. lol