Slidev Tip - Export With Background Images Using "slidev export --per-slide"
ahandsel
Posted on October 8, 2023
How to configure the Slidev export function to include the background theme's styling?
Table of Content
What is Slidev?
Snippet from sli.dev/guide/:
Slidev (slide + dev, /slaɪdɪv/) is a web-based slides maker and presenter. It's designed for developers to focus on writing content in Markdown while also having the power of HTML and Vue components to deliver pixel-perfect layouts and designs with embedded interactive demos in your presentations.
Question / Problem
I was exporting my kintone-for-hackathon Slidev as PNG and PDF, but the background is missing (teal bubbles).
I needed to figure out how to change the export function to include the background in my exports.
Desired Outcome vs Actual Result
| Desired Outcome | Actual Result |
|---|---|
 |
 |
| Includes the teal bubbles in the background. | Does not include the teal bubbles in the background. |
Solution
By default, the Slidev export function does not render the background styling (PNG or SVG).
So then, by using the --per-slide option, slides are rendered individually and include all information.
Export Slidev to PDF with background
slidev export --per-slide --format pdf
Export Slidev to PNG with background
slidev export --per-slide --format png
Result
| Exported PDF | Exported PNG |
|---|---|
 |
 
|
Appendix
Slidev Export Options
❯ slidev export --help
slidev export [entry..]
Export slides to PDF
Positionals:
entry path to the slides markdown entry [array] [default: "slides.md"]
Options:
-t, --theme override theme [string]
--output path to the output [string]
--format output format [string] [choices: "pdf", "png", "md"]
--timeout timeout for rendering the print page [number]
--range page ranges to export, for example "1,4-5,6" [string]
--dark export as dark theme [boolean]
-c, --with-clicks export pages for every clicks [boolean]
--executable-path executable to override playwright bundled browser
[string]
--with-toc export pages with outline [boolean]
--per-slide slide slides slide by slide. Works better with global
components, but will break cross slide links and TOC in
PDF [boolean]
-h, --help Show help [boolean]
-v, --version Show version number [boolean]
Big Thanks to 0phoff
Thank you 0phoff for pointing out that Slidev's export has more options than specified in the sli.dev documentation.
Posted on October 8, 2023
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related