Tips & Tricks
This page contains a variety of tips and tricks that can be useful for creating your slides.
Many layouts in this theme take a color argument in order to override the slidev-theme-primary color for that slide.
One use case is to have a different primary color for each section of your presentation.
However, it quickly becomes tedious and error prone to have to specify the same color on each slide over and over.
This is where multiple entries come into play.
This feature allows you to split a presentation into multiple files, which you then insert into your main slides.md file.
Whenever you import a file, you can specify other configuration options in your frontmatter, which will be copied over to each slide of the imported document.
Going back to our color argument, this allows us to specify a single color when you import the document, which will be used for all the slides in the imported page.
Code
<!-- slides.md -->
---
src: ./section-01.md
color: crimson
---<!-- section-01.md -->
# Slide 1
This slide has a crimson color.
---
color: teal
---
# Slide 2
The color is overridden to be teal here.
---
# Slide 3
We go back to the crimson color.
---The easiest way to style you slides is to add a <style /> tag in your markdown file.
These style tags are scoped by default, which means that you can simply use div, h1, span, etc. as selectors and it will only apply to your current style.
Read more about scoped styles here
HINT
While you can technically place as many<style />tags as you want, we recommend you to only have one style tag per slide and always have it as the last element of your slide.
Instead of manually styling your elements, it is often faster and more readable to use UnoCSS classes. The idea behind UnoCSS is to have an atomic class for each behavior (css statement) you want to change. While it can be daunting to learn all of these classes by heart, you will quickly notice you keep using the same ones over and over.
UnoCSS provides an interactive documentation page, where you can search classes or css statements you want to apply. However, in order to have the same classes as is configured in slidev and in this theme, we recommend you to click on the config (cogwheel icon) and paste the following configuration. Note that you usually only need to enter this configuration once, as it is saved on your computer.
UnoCSS Configuration
import { defineUnoSetup } from '@slidev/types'
import {
presetAttributify,
presetIcons,
presetUno,
transformerDirectives,
transformerVariantGroup,
} from 'unocss'
export default defineUnoSetup(() => ({
safelist: [
'!opacity-0',
],
shortcuts: {
},
variants: [
// Initial: provide default styling that is easily overridable
(matcher) => {
if (!matcher.startsWith('initial:'))
return matcher
return {
matcher: matcher.slice(8),
selector: s => `html :where(${s})`,
}
}
],
rules: [
// Text Font size
[/^text-base$/, () => ({'font-size': '1em', 'line-height': 1.4})],
[/^text-(\d+)s$/, ([, value]) => {
const parsedNum = Number(value);
const fontSize = `${Math.max(1 - (parsedNum * 0.125), 0.125)}em`;
const lineHeight = 1.4;
return {'font-size': fontSize, 'line-height': lineHeight};
}],
[/^text-(\d+)l$/, ([, value]) => {
const parsedNum = Number(value);
const fontSize = `${1 + (parsedNum * 0.125)}em`;
const lineHeight = parsedNum <= 3 ? 1.4 : (parsedNum <= 6 ? 1.2 : (parsedNum <= 9 ? 1.1 : 1));
return {'font-size': fontSize, 'line-height': lineHeight};
}],
],
presets: [
presetUno(),
presetAttributify(),
presetIcons(),
],
transformers: [
transformerDirectives({ enforce: 'pre' }),
transformerVariantGroup(),
],
}))HINT
UnoCSS is also available inside of your<style />tags by using@apply <classname>. It also allows you to nest selectors if you want to.
Placing your content where you want to can be quite tedious if you are not very well acquainted with (modern) HTML and CSS.
While having a complete understanding of all the newest CSS concepts is not necessary and probably not feasible for most users of this theme, it might be beneficial to learn about two concepts named flexbox and grid.
Most of the layouts provided by this theme were created with a single CSS class with the same name as the layout.
You can often reuse these classes in (sub-)parts of your own layouts instead of rewriting them with UnoCSS classes or manual styling.
You can find more information about these classes in this wiki by looking under the CSS heading in the sidebar!
You can style the element that contains the entire slide, by selecting .slidev-layout in the locally scoped style of your current slide.
However, it is often simpler to provide a class attribute to your slide with UnoCSS classes instead.
The same goes for the :deep(.slot-content) selector and the content-class attribute for slide layouts that have a ::content:: slot.
Code
The following code blocks do the same thing.
# Slide 1
slide content
<style>
.slidev-layout {
background: tomato;
}
</style>
--- |
---
class: bg-tomato
---
# Slide 1
slide content
---
|
# Slide 2
slide content
<style>
:deep(.slot-content) {
padding: 1rem;
}
</style>
--- |
---
content-class: p-[1rem]
---
# Slide 2
slide content
---
|
If you find that the slide title takes too much space in the default layout, you can simply use a smaller heading style (h2, h3, etc) which will decrease the font-size and height of the banners.
You can export your slides to a PDF by running pnpm run export (requires the installation of chromium-playwright: pnpm add -D chromium-playwright).
Sometimes, some of your slides might not be displayed correctly.
One possible solution is to use the --per-slide flag whenever you export.
You can either add this flag to the command written above or you can add it to the export command specified in your package.json file.
