15 |
16 | This setup function will only run on Node.js environment, you can have access to Node's API.
17 |
18 |
19 | This setup function will only run on client side. Make sure the browser compatibility when importing packages.
20 |
21 |
18 | ```
19 |
20 | The [Attributify Mode](https://windicss.org/posts/v30.html#attributify-mode) in [Windi CSS v3.0](https://windicss.org/posts/v30.html) is enabled by default.
21 |
22 | ## Configurations
23 |
24 | To configure Windi CSS, create `setup/windicss.ts` with the following content to extend the builtin configurations
25 |
26 | ```ts
27 | // setup/windicss.ts
28 |
29 | import { defineWindiSetup } from '@slidev/types'
30 |
31 | // extending the builtin windicss configurations
32 | export default defineWindiSetup(() => ({
33 | shortcuts: {
34 | // custom the default background
35 | 'bg-main': 'bg-white text-[#181818] dark:(bg-[#121212] text-[#ddd])',
36 | },
37 | theme: {
38 | extend: {
39 | // fonts can be replaced here, remember to update the web font links in `index.html`
40 | fontFamily: {
41 | sans: 'ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"',
42 | mono: '"Fira Code", monospace',
43 | },
44 | },
45 | },
46 | }))
47 | ```
48 |
49 | Learn more about [Windi CSS configurations](https://windicss.org/guide/configuration.html)
50 |
--------------------------------------------------------------------------------
/custom/directory-structure.md:
--------------------------------------------------------------------------------
1 | # Directory Structure
2 |
3 | Slidev employs some directory structure conventions to minimize the configuration surface and to make the functionality extensions flexible and intuitive.
4 |
5 | The basic structure is as follows:
6 |
7 | ```bash
8 | your-slidev/
9 | ├── components/ # custom components
10 | ├── layouts/ # custom layouts
11 | ├── public/ # static assets
12 | ├── setup/ # custom setup / hooks
13 | ├── styles/ # custom style
14 | ├── index.html # injections to index.html
15 | ├── slides.md # the main slides entry
16 | └── vite.config.ts # extending vite config
17 | ```
18 |
19 | All of them are optional.
20 |
21 | ## Components
22 |
23 | Conventions: `./components/*.{vue,js,ts,jsx,tsx,md}`
24 |
25 | Components inside this directory can be directly used in the slides Markdown with the same component name as the file name.
26 |
27 | For example:
28 |
29 | ```bash
30 | your-slidev/
31 | ├── ...
32 | └── components/
33 | ├── MyComponent.vue
34 | └── HelloWorld.ts
35 | ```
36 |
37 | ```md
38 |
39 |
40 | # My Slide
41 |
42 |
43 |
44 |
45 |
46 |
47 | Slot
48 |
49 | ```
50 |
51 | This feature is powered by [`vite-plugin-components`](https://github.com/antfu/vite-plugin-components), learn more there.
52 |
53 | Slidev also provides some [built-in components](/builtin/components) for you to use.
54 |
55 | ## Layouts
56 |
57 | Conventions: `./layouts/*.{vue,js,ts,jsx,tsx}`
58 |
59 | ```
60 | your-slidev/
61 | ├── ...
62 | └── layouts/
63 | ├── cover.vue
64 | └── my-cool-theme.vue
65 | ```
66 |
67 | You can use any filename for your layout. You then reference your layout in you YAML header using the filename.
68 |
69 | ```yaml
70 | ---
71 | layout: my-cool-theme
72 | ---
73 | ```
74 |
75 | If the layout you provide has the same name as a built-in layout or a theme layout, your custom layout will take precedence over the built-in/theme layout. The priority order is `local > theme > built-in`.
76 |
77 | In the layout component, use `` for the slide content. For example:
78 |
79 | ```html
80 |
81 |
82 |
83 |
84 |
85 |
86 | ```
87 |
88 | ## Public
89 |
90 | Conventions: `./public/*`
91 |
92 | Assets in this directory will be served at root path `/` during dev, and copied to the root of the dist directory as-is. Read more about [Vite's `public` directory](https://vitejs.dev/guide/assets.html#the-public-directory).
93 |
94 | ## Style
95 |
96 | Conventions: `./style.css` | `./styles/index.{css,js,ts}`
97 |
98 | Files following this convention will be injected to the App root. If you need to import multiple css entries, you can create the following structure and managing the import order yourself.
99 |
100 | ```bash
101 | your-slidev/
102 | ├── ...
103 | └── styles/
104 | ├── index.ts
105 | ├── base.css
106 | ├── code.css
107 | └── layouts.css
108 | ```
109 |
110 | ```ts
111 | // styles/index.ts
112 |
113 | import './base.css'
114 | import './code.css'
115 | import './layouts.css'
116 | ```
117 |
118 | Styles will be processed by [Windi CSS](http://windicss.org/) and [PostCSS](https://postcss.org/), so you can use css nesting and [at-directives](https://windicss.org/features/directives.html) out-of-box. For example:
119 |
120 | ```less
121 | .slidev-layout {
122 | @apply px-14 py-10 text-[1.1rem];
123 |
124 | h1, h2, h3, h4, p, div {
125 | @apply select-none;
126 | }
127 |
128 | pre, code {
129 | @apply select-text;
130 | }
131 |
132 | a {
133 | color: theme('colors.primary');
134 | }
135 | }
136 | ```
137 |
138 | [Learn more about the syntax](https://windicss.org/features/directives.html).
139 |
140 | ## `index.html`
141 |
142 | Conventions: `index.html`
143 |
144 | The `index.html` provides the ability to inject meta tags and/or scripts to the main `index.html`
145 |
146 | For example, for the following custom `index.html`:
147 |
148 | ```html
149 |
150 |
151 |
152 |
153 |
154 |
155 |
156 |
157 |
158 | ```
159 |
160 | The final hosted `index.html` will be:
161 |
162 | ```html
163 |
164 |
165 |
166 |
167 |
168 |
169 |
170 |
171 |
172 |
173 |
174 |
175 |
176 |
177 |
178 |
179 |
180 | ```
181 |
182 | ## Global Layers
183 |
184 | Conventions: `global-top.vue` | `global-bottom.vue`
185 |
186 | Learn more: [Global Layers](/custom/global-layers)
187 |
188 |
--------------------------------------------------------------------------------
/custom/fonts.md:
--------------------------------------------------------------------------------
1 | # Fonts
2 |
3 | > Available since v0.20
4 |
5 | While you can use HTML and CSS to custom the fonts and style for your slides as you want, Slidev also provides a convenient way to use them effortlessly.
6 |
7 | In your frontmatter, configure as following
8 |
9 | ```yaml
10 | ---
11 | fonts:
12 | # basically the text
13 | sans: 'Robot'
14 | # use with `font-serif` css class from windicss
15 | serif: 'Robot Slab'
16 | # for code blocks, inline code, etc.
17 | mono: 'Fira Code'
18 | ---
19 | ```
20 |
21 | And that's all.
22 |
23 | Fonts will be **imported automatically from [Google Fonts](https://fonts.google.com/)**. That means you can use any fonts available on Google Fonts directly.
24 |
25 | ## Local Fonts
26 |
27 | By default, Slidev assumes all the fonts specified via `fonts` configurations come from Google Fonts. If you want to use local fonts, specify the `fonts.local` to opt-out the auto-importing.
28 |
29 | ```yaml
30 | ---
31 | fonts:
32 | # like font-family in css, you can use `,` to separate multiple fonts for fallback
33 | sans: 'Helvetica Neue,Robot'
34 | # mark 'Helvetica Neue' as local font
35 | local: 'Helvetica Neue'
36 | ---
37 | ```
38 |
39 | ## Weights & Italic
40 |
41 | By default, Slidev imports three weights `200`,`400`,`600` for each font. You can configure them by:
42 |
43 | ```yaml
44 | ---
45 | fonts:
46 | sans: 'Robot'
47 | # default
48 | weights: '200,400,600'
49 | # import italic fonts, default `false`
50 | italic: false
51 | ---
52 | ```
53 |
54 | This configuration applies to all web fonts. For more fine-grained controls of each font's weights, you will need to manually import them with [HTML](/custom/directory-structure.html#index-html) and CSS.
55 |
56 | ## Fallback Fonts
57 |
58 | For most of the scenarios, you only need to specify the "special font" and Slidev will append the fallback fonts for you, for example:
59 |
60 | ```yaml
61 | ---
62 | fonts:
63 | sans: 'Robot'
64 | serif: 'Robot Slab'
65 | mono: 'Fira Code'
66 | ---
67 | ```
68 |
69 | will result in
70 |
71 | ```css
72 | .font-sans {
73 | font-family: "Robot",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
74 | }
75 | .font-serif {
76 | font-family: "Robot Slab",ui-serif,Georgia,Cambria,"Times New Roman",Times,serif;
77 | }
78 | .font-mono {
79 | font-family: "Fira Code",ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
80 | }
81 | ```
82 |
83 | If you want to disable the fallback fonts, configure as following
84 |
85 | ```yaml
86 | ---
87 | fonts:
88 | mono: 'Fira Code, monospace'
89 | fallback: false
90 | ---
91 | ```
92 |
93 | ## Providers
94 |
95 | - Options: `google` | `none`
96 | - Default: `google`
97 |
98 | Currently, only Google Fonts is supported, we are planned to add more providers in the future. Specify to `none` will disable the auto-importing feature entirely and treat all the fonts local.
99 |
100 | ```yaml
101 | ---
102 | fonts:
103 | provider: 'none'
104 | ---
105 | ```
106 |
107 |
108 |
--------------------------------------------------------------------------------
/custom/global-layers.md:
--------------------------------------------------------------------------------
1 | # Global Layers
2 |
3 | > Available since v0.17
4 |
5 | Global layers allow you to have custom components that **persistent** across slides. This could be useful for having footers, cross-slides animations, global effects, etc.
6 |
7 | Slidev provides two layers for this usage, create `global-top.vue` or `global-bottom.vue` under your project root and it will pick up automatically.
8 |
9 | Layers relationship:
10 |
11 | - Global Top (`global-top.vue`)
12 | - Slides
13 | - Global Bottom (`global-bottom.vue`)
14 |
15 | ## Example
16 |
17 | ```html
18 |
19 |
20 |
21 |
22 | ```
23 |
24 | The text `Your Name` will appear to all your slides.
25 |
26 | To enabled it conditionally, you can apply it with the [Vue Global Context](/custom/vue-context).
27 |
28 | ```html
29 |
30 |
31 |
37 |
38 | ```
39 |
40 | ```html
41 |
42 |
43 |
49 |
50 | ```
51 |
52 | ```html
53 |
54 |
55 |
61 |
62 | ```
63 |
--------------------------------------------------------------------------------
/custom/highlighters.md:
--------------------------------------------------------------------------------
1 | # Highlighters
2 |
3 | Slidev comes with two syntax highlighter for you to choose from:
4 |
5 | - [Prism](https://prismjs.com/)
6 | - [Shiki](https://github.com/shikijs/shiki)
7 |
8 | **Prism** is one of the most popular syntax highlighters. The highlighting is done by adding token classes to the code and it's colored using CSS. You can browse through their [official themes](https://github.com/PrismJS/prism-themes), or create/customize one yourself very easily using [`prism-theme-vars`](https://github.com/antfu/prism-theme-vars).
9 |
10 | **Shiki**, on the other hand, is a TextMate grammar-powered syntax highlighter. It generates colored tokens, so there is no additional CSS needed. Since it has great grammar support, the generated colors are very accurate, just like what you will see in VS Code. Shiki also comes with [a bunch of built-in themes](https://github.com/shikijs/shiki/blob/master/docs/themes.md). The downside of Shiki is that it also requires TextMate themes (compatible with VS Code theme) to do the highlighting, which can be a bit harder to customize.
11 |
12 | Slidev themes usually support both Prism and Shiki, but depending on the theme you are using, it might only support one of them.
13 |
14 | When you have the choice, the tradeoff is basically:
15 |
16 | - **Prism** for easier customization
17 | - **Shiki** for more accurate highlighting
18 |
19 | By default, Slidev uses Prism. You can change it by modifying your frontmatter:
20 |
21 | ```yaml
22 | ---
23 | highlighter: shiki
24 | ---
25 | ```
26 |
27 | ## Configure Prism
28 |
29 | To configure your Prism, you can just import the theme css or use [`prism-theme-vars`](https://github.com/antfu/prism-theme-vars) to configure themes for both light and dark mode. Refer to its docs for more details.
30 |
31 | ## Configure Shiki
32 |
33 |
34 |
35 | Create `./setup/shiki.ts` file with the following content
36 |
37 | ```ts
38 | /* ./setup/shiki.ts */
39 | import { defineShikiSetup } from '@slidev/types'
40 |
41 | export default defineShikiSetup(() => {
42 | return {
43 | theme: {
44 | dark: 'min-dark',
45 | light: 'min-light',
46 | },
47 | }
48 | })
49 | ```
50 |
51 | Refer to [Shiki's docs](https://github.com/shikijs/shiki/blob/master/docs/themes.md#all-themes) for available theme names.
52 |
53 | Or if you want to use your own theme:
54 |
55 | ```ts
56 | /* ./setup/shiki.ts */
57 |
58 | import { defineShikiSetup } from '@slidev/types'
59 |
60 | export default defineShikiSetup(async({ loadTheme }) => {
61 | return {
62 | theme: {
63 | dark: await loadTheme('path/to/theme.json'),
64 | light: await loadTheme('path/to/theme.json'),
65 | },
66 | }
67 | })
68 | ```
69 |
--------------------------------------------------------------------------------
/custom/index.md:
--------------------------------------------------------------------------------
1 | # Customizations
2 |
3 | Slidev is fully customizable, from styling to tooling configurations. It allows you to configure the tools underneath ([Vite](/custom/config-vite), [Windi CSS](/custom/config-windicss), [Monaco](/custom/config-monaco), etc.)
4 |
5 | ## Frontmatter Configures
6 |
7 | You can configure Slidev in the frontmatter of your first slide, the following shows the default value for each option.
8 |
9 | ```yaml
10 | ---
11 | # theme id or package name
12 | theme: 'default'
13 | # title of your slide, will auto infer from the first header if not specified
14 | title: ''
15 | # titleTemplate for the webpage, `%s` will be replaced by the page's title
16 | titleTemplate: '%s - Slidev'
17 |
18 | # enabled pdf downloading in SPA build, can also be a custom url
19 | download: true
20 | # syntax highlighter, can be 'prism' or 'shiki'
21 | highlighter: 'prism'
22 | # show line numbers in code blocks
23 | lineNumbers: false
24 | # enable monaco editor, default to dev only
25 | monaco: 'dev'
26 |
27 | # force color schema for the slides, could be 'auto', 'light', or 'dark'
28 | colorSchema: 'auto'
29 | # router mode for vue-router, could be "history" or "hash"
30 | routerMode: 'history'
31 | # aspect ratio for the slides
32 | aspectRatio: '16/9'
33 | # real width of the canvas, unit in px
34 | canvasWidth: 980
35 |
36 | # favicon, can be a local file path or URL
37 | favicon: 'https://cdn.jsdelivr.net/gh/slidevjs/slidev/assets/favicon.png'
38 | # fonts will be auto imported from Google fonts
39 | # Learn more: https://sli.dev/custom/fonts
40 | fonts:
41 | sans: 'Roboto'
42 | serif: 'Roboto Slab'
43 | mono: 'Fira Code'
44 |
45 | # default frontmatter applies to all slides
46 | defaults:
47 | layout: 'default'
48 | # ...
49 |
50 | # information for your slides, can be a markdown string
51 | info: |
52 | ## Slidev
53 | My first [Slidev](http://sli.dev/) presentations!
54 | ---
55 | ```
56 |
57 | Check out the [type definitions](https://github.com/slidevjs/slidev/blob/main/packages/types/src/config.ts) for more options.
58 |
59 | ## Directory Structure
60 |
61 | Slidev uses directory structure conventions to minimalize the configuration surface and make extensions in functionality flexible and intuitive.
62 |
63 | Refer to the [Directory Structure](/custom/directory-structure) section.
64 |
65 | ## Config Tools
66 |
67 | - [Highlighters](/custom/highlighters)
68 | - [Configure Vue](/custom/config-vue)
69 | - [Configure Vite](/custom/config-vite)
70 | - [Configure Windi CSS](/custom/config-windicss)
71 | - [Configure Monaco](/custom/config-monaco)
72 | - [Configure KaTeX](/custom/config-katex)
73 | - [Configure Mermaid](/custom/config-mermaid)
74 |
--------------------------------------------------------------------------------
/custom/vue-context.md:
--------------------------------------------------------------------------------
1 | # Vue Global Context
2 |
3 | Slidev injected a [global Vue context](https://v3.vuejs.org/api/application-config.html#globalproperties) `$slidev` for advanced conditions or navigation controls.
4 |
5 | ## Usage
6 |
7 | You can access it anywhere in your markdown and Vue template, with the ["Mustache" syntax](https://v3.vuejs.org/guide/template-syntax.html#interpolations).
8 |
9 | ```md
10 |
11 |
12 | # Page 1
13 |
14 | Current page is: {{ $slidev.nav.currentPage }}
15 | ```
16 |
17 | ```html
18 |
19 |
20 |
21 |
Title: {{ $slidev.configs.title }}
22 |
23 |
24 | ```
25 |
26 | ## Properties
27 |
28 | ### `$slidev.nav`
29 |
30 | A reactive object holding the properties and controls of the slides navigation. For examples:
31 |
32 | ```js
33 | $slidev.nav.next() // go next step
34 |
35 | $slidev.nav.nextSlide() // go next slide (skip v-clicks)
36 |
37 | $slidev.nav.go(10) // go slide #10
38 | ```
39 |
40 | ```js
41 | $slidev.nav.currentPage // current slide number
42 |
43 | $slidev.nav.currentLayout // current layout id
44 |
45 | $slidev.nav.clicks // current clicks count
46 | ```
47 |
48 | For more properties available, refer to the [nav.ts](https://github.com/slidevjs/slidev/blob/main/packages/client/logic/nav.ts) exports.
49 |
50 | ### `$slidev.configs`
51 |
52 | A reactive object holding the parsed [configurations in the first frontmatter](/custom/#frontmatter-configures) of your `slides.md`. For example
53 |
54 | ```yaml
55 | ---
56 | title: My First Slidev!
57 | ---
58 | ```
59 |
60 | ```
61 | {{ $slidev.configs.title }} // 'My First Slidev!'
62 | ```
63 |
64 | ### `$slidev.themeConfigs`
65 |
66 | A reactive object holding the parsed theme configurations.
67 |
68 | ```yaml
69 | ---
70 | title: My First Slidev!
71 | themeConfig:
72 | primary: #213435
73 | ---
74 | ```
75 |
76 | ```
77 | {{ $slidev.themeConfigs.primary }} // '#213435'
78 | ```
79 |
--------------------------------------------------------------------------------
/guide/animations.md:
--------------------------------------------------------------------------------
1 | # Animations
2 |
3 | ## Click Animations
4 |
5 | ### `v-click`
6 |
7 | To apply "click animations" for elements, you can use the `v-click` directive or `` components
8 |
9 | ```md
10 | # Hello
11 |
12 |
13 |
14 |
15 | Hello World
16 |
17 |
18 |
19 |
20 |
21 |
22 | Hey!
23 |
24 |
25 | ```
26 |
27 | ### `v-after`
28 |
29 | The usage of `v-after` is similar to `v-click` but it will turn the element visible when the previous `v-click` is triggered.
30 |
31 | ```md
32 |
Hello
33 |
World
34 | ```
35 |
36 | When you click the "next" button, both `Hello` and `World` will show up together.
37 |
38 | ### `v-click-hide`
39 |
40 | Same as `v-click` but instead of making the element appear, it makes the element invisible after clicking.
41 |
42 | ```md
43 |
Hello
44 | ```
45 |
46 | ### `v-clicks`
47 |
48 | `v-clicks` is only provided as a component. It's a shorthand to apply the `v-click` directive to all its child elements. It is especially useful when working with lists.
49 |
50 | ```md
51 |
52 |
53 | - Item 1
54 | - Item 2
55 | - Item 3
56 | - Item 4
57 |
58 |
59 | ```
60 |
61 | An item will become visible each time you click "next".
62 |
63 | ### Custom Clicks Count
64 |
65 | By default, Slidev counts how many steps are needed before going to the next slide. You can override this setting by passing the `clicks` frontmatter option:
66 |
67 | ```yaml
68 | ---
69 | # 10 clicks in this slide, before going to the next
70 | clicks: 10
71 | ---
72 | ```
73 |
74 | ### Ordering
75 |
76 | Passing the click index to your directives, you can customize the order of the revealing
77 |
78 | ```md
79 |
99 |
100 | ```
101 |
102 | ### Element Transitions
103 |
104 | When you apply the `v-click` directive to your elements, it will attach the class name `slidev-vclick-target` to it. When the elements are hidden, the class name `slidev-vclick-hidden` will also be attached. For example:
105 |
106 | ```html
107 |
Text
108 | ```
109 |
110 | After a click, it will become
111 |
112 | ```html
113 |
Text
114 | ```
115 |
116 | By default, a subtle opacity transition is applied to those classes:
117 |
118 | ```css
119 | // the default
120 |
121 | .slidev-vclick-target {
122 | transition: opacity 100ms ease;
123 | }
124 |
125 | .slidev-vclick-hidden {
126 | opacity: 0;
127 | pointer-events: none;
128 | }
129 | ```
130 |
131 | You can override them to customize the transition effects in your custom stylesheets.
132 |
133 | For example, you can achieve the scaling up transitions by:
134 |
135 | ```css
136 | // styles.css
137 |
138 | .slidev-vclick-target {
139 | transition: all 500ms ease;
140 | }
141 |
142 | .slidev-vclick-hidden {
143 | transform: scale(0);
144 | }
145 | ```
146 |
147 | To specify animations for only certain slide or layout
148 |
149 | ```scss
150 | .slidev-page-7,
151 | .slidev-layout.my-custom-layout {
152 | .slidev-vclick-target {
153 | transition: all 500ms ease;
154 | }
155 |
156 | .slidev-vclick-hidden {
157 | transform: scale(0);
158 | }
159 | }
160 | ```
161 |
162 | Learn more about [customizing styles](/custom/directory-structure#style).
163 |
164 | ## Motion
165 |
166 | Slidev has [@vueuse/motion](https://motion.vueuse.org/) built-in. You can use the `v-motion` directive to any elements to make apply motion on them. For example
167 |
168 | ```html
169 |
173 | Slidev
174 |
175 | ```
176 |
177 | The text `Slidev` will move from `-80px` to its original position on initialization.
178 |
179 | > Note: Slidev preloads the next slide for performance, which means the animations might start before you navigate to the page. To get it works properly, you can disable the preloading for the particular slide
180 | >
181 | > ```md
182 | > ---
183 | > preload: false
184 | > ---
185 | > ```
186 | >
187 | > Or control the element life-cycle with `v-if` to have fine-grained controls
188 | >
189 | > ```html
190 | >
197 | > ```
198 |
199 | Learn mode: [Demo](https://sli.dev/demo/starter/7) | [@vueuse/motion](https://motion.vueuse.org/) | [v-motion](https://motion.vueuse.org/directive-usage.html) | [Presets](https://motion.vueuse.org/presets.html)
200 |
201 | ## Pages Transitions
202 |
203 | > Built-in support for slides is NOT YET provided in the current version. We are planning to add support for them in the next major version. Before that, you can still use your custom styles and libraries to do that.
204 |
--------------------------------------------------------------------------------
/guide/drawing.md:
--------------------------------------------------------------------------------
1 | # Drawing & Annotations
2 |
3 | > Available since v0.23
4 |
5 | We have [drauu](https://github.com/antfu/drauu) built-in for drawing and annotation that could enhance your presentation further.
6 |
7 | To start, click the icon in the toolbar and start drawing. It's also available in the [Presenter Mode](/guide/presenter-mode). Drawings and annotations you created will be **synced up** automatically across all instances in real-time.
8 |
9 |
10 |
11 | ## Use with Stylus Pen
12 |
13 | When using a stylus pen on a tablet (for example, iPad with Apple Pencil), Slidev could smartly detect the input type. You can directly draw on your slides with the pen without turning on the drawing mode, while having your fingers or mouse control the navigation.
14 |
15 | ## Persist Drawings
16 |
17 | The following frontmatter configuration allows you to persist your drawings as SVGs under `.slidev/drawings` directory and have them inside your exported pdf or hosted site.
18 |
19 | ```md
20 | ---
21 | drawings:
22 | persist: true
23 | ---
24 | ```
25 |
26 | ## Disable Drawings
27 |
28 | Entirely:
29 |
30 | ```md
31 | ---
32 | drawings:
33 | enabled: false
34 | ---
35 | ```
36 |
37 | Only in Development:
38 |
39 | ```md
40 | ---
41 | drawings:
42 | enabled: dev
43 | ---
44 | ```
45 |
46 | Only in Presenter Mode:
47 |
48 | ```md
49 | ---
50 | drawings:
51 | presenterOnly: true
52 | ---
53 | ```
54 |
55 | ## Drawing Syncing
56 |
57 | By default, Slidev syncs up your drawings across all instances. If you are sharing your slides with others, you might want to disable the syncing by:
58 |
59 | ```md
60 | ---
61 | drawings:
62 | syncAll: false
63 | ---
64 | ```
65 |
66 | With this config, only the drawing from the presenter instance will be able to sync with others.
67 |
68 |
69 |
--------------------------------------------------------------------------------
/guide/editors.md:
--------------------------------------------------------------------------------
1 | # Editor Support
2 |
3 | Since Slidev is using Markdown as the source entry, you can use ANY editors you love to write it.
4 |
5 | If you want some high-level management to your slides, we have provided the following editor integrations for you!
6 |
7 | ## Integrated Editor
8 |
9 | Slidev comes with an integrated [CodeMirror](https://codemirror.net/) editor that will instantly reload and save the changes to your file.
10 |
11 | Click the button to open it.
12 |
13 | 
14 |
15 | ## VS Code Extension
16 |
17 |
30 |
31 | The VS Code extension provides some features to help you better organize your slides and have a quick overview of them.
32 |
33 | ### Features
34 |
35 | - View slides in the side panel
36 | - Go to next / prev buttons
37 | - Re-ordering slides
38 | - Folding for slide blocks
39 | - Convert Markdown to HTML
40 |
41 | 
42 |
43 |
44 |
--------------------------------------------------------------------------------
/guide/exporting.md:
--------------------------------------------------------------------------------
1 | # Exporting
2 |
3 | ## PDF
4 |
5 | > Exporting to PDF or PNG relies on [Playwright](https://playwright.dev) for rendering. You will therefore need to install [`playwright-chromium`](https://playwright.dev/docs/installation#download-single-browser-binary) to use this feature.
6 | > If you are doing exporting in a CI environment, [the playwright CI guide](https://playwright.dev/docs/ci) can be helpful.
7 |
8 | Install `playwright-chromium`
9 |
10 | ```bash
11 | $ npm i -D playwright-chromium
12 | ```
13 |
14 | Now export your slides to PDF using the following command
15 |
16 | ```bash
17 | $ slidev export
18 | ```
19 |
20 | After a few seconds, your slides will be ready at `./slides-exports.pdf`.
21 |
22 | ### Export Clicks Steps
23 |
24 | > Available since v0.21
25 |
26 | By default, Slidev exports one page per slide with clicks animations disabled. If you want export slides with multiple steps into multiple pages, pass the `--with-clicks` options.
27 |
28 | ```bash
29 | $ slidev export --with-clicks
30 | ```
31 |
32 | ## PNGs
33 |
34 | When passing in the `--format png` option, Slidev will export PNG images for each slide instead of a PDF.
35 |
36 | ```bash
37 | $ slidev export --format png
38 | ```
39 |
40 | ## Single-Page Application (SPA)
41 |
42 | See [Static Hosting](/guide/hosting).
43 |
--------------------------------------------------------------------------------
/guide/faq.md:
--------------------------------------------------------------------------------
1 | # FAQ
2 |
3 | ## Grids
4 |
5 | Since Slidev is based on the Web, you can apply any grid layouts as you want. [CSS Grids](https://css-tricks.com/snippets/css/complete-guide-grid/), [flexboxes](https://css-tricks.com/snippets/css/a-guide-to-flexbox/), or even [Masonry](https://css-tricks.com/native-css-masonry-layout-in-css-grid/), you get the full controls.
6 |
7 | Since we have [Windi CSS](https://windicss.org/) built-in, here is one simple way for you to reference:
8 |
9 | ```html
10 |
11 |
12 |
13 | The first column
14 |
15 |
16 |
17 |
18 | The second column
19 |
20 |
21 |
22 | ```
23 |
24 | Go further, you can customize the size of each column like:
25 |
26 | ```html
27 |
28 |
29 |
30 | The first column (200px)
31 |
32 |
33 |
34 |
35 | The second column (auto fit)
36 |
37 |
38 |
39 |
40 | The third column (10% width to parent container)
41 |
42 |
43 |
44 | ```
45 |
46 | Learn more about [Windi CSS Grids](https://windicss.org/utilities/grid.html).
47 |
48 | ## Positioning
49 |
50 | Slides are defined in fixed sizes (default `980x552px`) and scale to fit with the user screen. You can safely use absolute position in your slides as they will scale along with the screen.
51 |
52 | For example:
53 |
54 | ```html
55 |
56 | This is a left-bottom aligned footer
57 |
58 | ```
59 |
60 | To change the canvas' actual size, you can pass the `canvasWidth` options in your first frontmatter:
61 |
62 | ```yaml
63 | ---
64 | canvasWidth: 800
65 | ---
66 | ```
67 |
68 | ## Font Size
69 |
70 | If you feel the font size in your slides are too small, you can adjust it in a few ways:
71 |
72 | ### Override Local Style
73 |
74 | You can override styles for each slide with the inlined `
84 |
85 | ---
86 |
87 | # Page 2
88 |
89 | This will not be affected.
90 | ```
91 |
92 | Learn more: [Embedded Styles](/guide/syntax.html#embedded-styles)
93 |
94 | ### Override Global Style
95 |
96 | You can provide custom global styles by creating `./style.css`, for example
97 |
98 | ```css
99 | /* style.css */
100 |
101 | h1 {
102 | font-size: 10em !important;
103 | }
104 | ```
105 |
106 | Learn more: [Global Style](/custom/directory-structure.html#style)
107 |
108 | ### Scale the Canvas
109 |
110 | Changing the canvas' actual size will scale all your contents(text, images, components, etc.) and slides
111 |
112 | ```yaml
113 | ---
114 | # default: 980
115 | # since the canvas gets smaller, the visual size will become larger
116 | canvasWidth: 800
117 | ---
118 | ```
119 |
120 | ### Use Transform
121 |
122 | We provide a built-in component ``, which is a thin wrapper of CSS transform property.
123 |
124 | ```md
125 |
126 |
127 | - Item 1
128 | - Item 2
129 |
130 |
131 | ```
132 |
--------------------------------------------------------------------------------
/guide/hosting.md:
--------------------------------------------------------------------------------
1 | # Static Hosting
2 |
3 | ## Build Single Page Applications (SPA)
4 |
5 | You can also build the slides into a self-hostable SPA:
6 |
7 | ```bash
8 | $ slidev build
9 | ```
10 |
11 | The generated application will be available under `dist/` and then you can host it on [GitHub Pages](https://pages.github.com/), [Netlify](https://netlify.app/), [Vercel](https://vercel.com/), or whatever you want. Now you can share your slides with the rest of the world with a single link.
12 |
13 | ### Base Path
14 |
15 | To deploy your slides under sub-routes, you will need to pass the `--base` option. For example:
16 |
17 | ```bash
18 | $ slidev build --base /talks/my-cool-talk/
19 | ```
20 |
21 | Refer to [Vite's documentation](https://vitejs.dev/guide/build.html#public-base-path) for more details.
22 |
23 | ### Provide Downloadable PDF
24 |
25 | You can provide a downloadable PDF to the viewers of your SPA with the following config:
26 |
27 | ```md
28 | ---
29 | download: true
30 | ---
31 | ```
32 |
33 | Slidev will generate a pdf file along with the build, and a download button will be displayed in the SPA.
34 |
35 | You can also provide a custom url to the PDF. In that case, the rendering process will be skipped.
36 |
37 | ```md
38 | ---
39 | download: 'https://myside.com/my-talk.pdf'
40 | ---
41 | ```
42 |
43 | ## Examples
44 |
45 | Here are a few examples of the exported SPA:
46 |
47 | - [Starter Template](https://sli.dev/demo/starter)
48 | - [Composable Vue](https://talks.antfu.me/2021/composable-vue) by [Anthony Fu](https://github.com/antfu)
49 |
50 | For more, check out [Showcases](/showcases).
51 |
52 | ## Hosting
53 |
54 | We recommend to use `npm init slidev@lastest` to scaffolding your project, which contains the necessary configuration files for hosting services out-of-box.
55 |
56 | ### Netlify
57 |
58 | - [Netlify](https://netlify.com/)
59 |
60 | Create `netlify.toml` in your project root with the following content.
61 |
62 | ```ts
63 | [build.environment]
64 | NODE_VERSION = "14"
65 |
66 | [build]
67 | publish = "dist"
68 | command = "npm run build"
69 |
70 | [[redirects]]
71 | from = "/*"
72 | to = "/index.html"
73 | status = 200
74 | ```
75 |
76 | Then go to your Netlify dashboard, create new site with the repository.
77 |
78 | ### Vercel
79 |
80 | - [Vercel](https://vercel.com/)
81 |
82 | Create `vercel.json` in your project root with the following content.
83 |
84 | ```json
85 | {
86 | "rewrites": [
87 | { "source": "/(.*)", "destination": "/index.html" }
88 | ]
89 | }
90 | ```
91 |
92 | Then go to your Vercel dashboard, create new site with the repository.
93 |
94 | ## GitHub Pages
95 |
96 | - [GitHub Pages](https://pages.github.com/)
97 |
98 | Create `.github/workflows/deploy.yml` with following content to deploy your slides to GitHub Pages via GitHub Actions.
99 |
100 | ```yaml
101 | name: Deploy pages
102 | on: push
103 | jobs:
104 | deploy:
105 | runs-on: ubuntu-latest
106 | steps:
107 | - uses: actions/checkout@v2
108 | - uses: actions/setup-node@v2
109 | with:
110 | node-version: '14'
111 | - name: Install dependencies
112 | run: npm install
113 | - name: Build
114 | run: npm run build
115 | - name: Deploy pages
116 | uses: crazy-max/ghaction-github-pages@v2
117 | with:
118 | build_dir: dist
119 | env:
120 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
121 | ```
122 |
--------------------------------------------------------------------------------
/guide/index.md:
--------------------------------------------------------------------------------
1 | # Getting Started
2 |
3 | ## Overview
4 |
5 | Slidev (slide + dev, `/slʌɪ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.
6 |
7 | It uses a feature-rich markdown file to generate beautiful slides with an instant reloading experience, along with many built-in integrations such as live coding, PDF exporting, presentation recording, and so on. Since it's powered by the web, you can do anything with Slidev - the possibilities are endless.
8 |
9 | You can learn more about the rationale behind the project in the [Why Slidev](/guide/why) section.
10 |
11 | ### Features
12 |
13 | - 📝 [**Markdown-based**](/guide/syntax.html) - use your favorite editors and workflow
14 | - 🧑💻 [**Developer Friendly**](/guide/syntax.html#code-blocks) - built-in syntax highlighting, live coding, etc.
15 | - 🎨 [**Themable**](/themes/gallery.html) - theme can be shared and used with npm packages
16 | - 🌈 [**Stylish**](/guide/syntax.html#embedded-styles) - [Windi CSS](https://windicss.org/) on-demand utilities, easy-to-use embedded stylesheets
17 | - 🤹 [**Interactive**](/custom/directory-structure.html#components) - embedding Vue components seamlessly
18 | - 🎙 [**Presenter Mode**](/guide/presenter-mode.html) - use another window, or even your phone to control your slides
19 | - 🎨 [**Drawing**](/guide/drawing.html) - draw and annotate on your slides
20 | - 🧮 [**LaTeX**](/guide/syntax.html#latex) - built-in LaTeX math equations support
21 | - 📰 [**Diagrams**](/guide/syntax.html#diagrams) - creates diagrams with textual descriptions
22 | - 🌟 [**Icons**](/guide/syntax.html#icons) - Access to icons from any iconset directly
23 | - 💻 [**Editors**](/guide/editors.html) - integrated editor, or [extension for VS Code](https://github.com/slidevjs/slidev-vscode)
24 | - 🎥 [**Recording**](/guide/recording.html) - built-in recording and camera view
25 | - 📤 [**Portable**](/guide/exporting.html) - export into PDF, PNGs, or even a hostable SPA
26 | - ⚡️ [**Fast**](https://vitejs.dev) - instant reloading powered by [Vite](https://vitejs.dev)
27 | - 🛠 [**Hackable**](/custom/config-vite.html) - using Vite plugins, Vue components, or any npm packages
28 |
29 | ### Tech Stack
30 |
31 | Slidev is made possible by combining these tools and technologies.
32 |
33 | - [Vite](https://vitejs.dev) - An extremely fast frontend tooling
34 | - [Vue 3](https://v3.vuejs.org/) powered [Markdown](https://daringfireball.net/projects/markdown/syntax) - Focus on the content while having the power of HTML and Vue components whenever needed
35 | - [Windi CSS](https://github.com/windicss/windicss) - On-demand utility-first CSS framework, style your slides at ease
36 | - [Prism](https://github.com/PrismJS/prism), [Shiki](https://github.com/shikijs/shiki), [Monaco Editor](https://github.com/Microsoft/monaco-editor) - First-class code snippets support with live coding capability
37 | - [RecordRTC](https://recordrtc.org) - Built-in recording and camera view
38 | - [VueUse](https://vueuse.org) family - [`@vueuse/core`](https://github.com/vueuse/vueuse), [`@vueuse/head`](https://github.com/vueuse/head), [`@vueuse/motion`](https://github.com/vueuse/motion), etc.
39 | - [Iconify](https://iconify.design/) - Iconsets collection.
40 | - [Drauu](https://github.com/antfu/drauu) - Drawing and annotations support
41 | - [KaTeX](https://katex.org/) - LaTeX math rendering.
42 | - [Mermaid](https://mermaid-js.github.io/mermaid) - Textual Diagrams.
43 |
44 | ### Scaffolding Your First Presentation
45 |
46 |
47 |
48 | #### Try it Online
49 |
50 | [sli.dev/new](https://sli.dev/new)
51 |
52 | [](https://sli.dev/new)
53 |
54 | #### Create Locally
55 |
56 | With NPM:
57 |
58 | ```bash
59 | $ npm init slidev
60 | ```
61 |
62 | With Yarn:
63 |
64 | ```bash
65 | $ yarn create slidev
66 | ```
67 |
68 | Follow the prompts and start making your slides now! For more details about the markdown syntax, read through the [syntax guide](/guide/syntax).
69 |
70 | ### Command Line Interface
71 |
72 | In a project where Slidev is installed, you can use the `slidev` binary in your npm scripts.
73 |
74 | ```json
75 | {
76 | "scripts": {
77 | "dev": "slidev", // start dev server
78 | "build": "slidev build", // build for production SPA
79 | "export": "slidev export" // export slides to pdf
80 | }
81 | }
82 | ```
83 |
84 | Otherwise, you can use it with [`npx`](https://www.npmjs.com/package/npx)
85 |
86 | ```bash
87 | $ npx slidev
88 | ```
89 |
90 | Run `slidev --help` for more options available.
91 |
92 | ### Markdown Syntax
93 |
94 | Slidev reads your `slides.md` file under your project root and converts them into slides. Whenever you made changes to it, the content of the slides will be updated immediately. For example:
95 |
96 | ~~~md
97 | # Slidev
98 |
99 | Hello World
100 |
101 | ---
102 |
103 | # Page 2
104 |
105 | Directly use code blocks for highlighting
106 |
107 | //```ts
108 | console.log('Hello, World!')
109 | //```
110 |
111 | ---
112 |
113 | # Page 3
114 | ~~~
115 |
116 | Read more about the Slidev Markdown syntax in the [syntax guide](/guide/syntax).
117 |
--------------------------------------------------------------------------------
/guide/install.md:
--------------------------------------------------------------------------------
1 | # Installation
2 |
3 | ## Starter Template
4 |
5 | > Slidev requires [**Node.js >=14.0**](https://nodejs.org/)
6 |
7 | The best way to get started is using our official starter template.
8 |
9 | With NPM:
10 |
11 | ```bash
12 | $ npm init slidev@latest
13 | ```
14 |
15 | With Yarn:
16 |
17 | ```bash
18 | $ yarn create slidev
19 | ```
20 |
21 | Follow the prompts and it will open up the slideshow at http://localhost:3030/ automatically for you.
22 |
23 | It also contains the basic setup and a short demo with instructions on how to get started with Slidev.
24 |
25 | ## Install Manually
26 |
27 | If you still prefer to install Slidev manually or would like to integrate it into your existing projects, you can do:
28 |
29 | ```bash
30 | $ npm install @slidev/cli @slidev/theme-default
31 | ```
32 | ```bash
33 | $ touch slides.md
34 | ```
35 | ```bash
36 | $ npx slidev
37 | ```
38 |
39 | > Please note if you are using [pnpm](https://pnpm.io), you will need to enable [shamefully-hoist](https://pnpm.io/npmrc#shamefully-hoist) option for Slidev to work properly:
40 | >
41 | > ```bash
42 | > echo 'shamefully-hoist=true' >> .npmrc
43 | > ```
44 |
45 | ## Install Globally
46 |
47 | > Available since v0.14
48 |
49 | You can install Slidev globally with the following command
50 |
51 | ```bash
52 | $ npm i -g @slidev/cli
53 | ```
54 |
55 | And then use `slidev` everywhere without creating a project every time.
56 |
57 | ```bash
58 | $ slidev
59 | ```
60 |
61 | This command will also try to use local `@slidev/cli` if it has been found in the `node_modules`.
62 |
63 | ## Install on Docker
64 |
65 | If you need a rapid way to run a presentation with containers, you can use the prebuilt [docker](https://hub.docker.com/r/tangramor/slidev) image maintained by [tangramor](https://github.com/tangramor), or build your own.
66 |
67 | Just run following command in your work folder:
68 |
69 | ```bash
70 | docker run --name slidev --rm -it \
71 | --user node \
72 | -v ${PWD}:/slidev \
73 | -p 3030:3030 \
74 | tangramor/slidev:latest
75 | ```
76 |
77 | If your work folder is empty, it will generate a template `slides.md` and other related files under your work folder, and launch the server on port `3030`.
78 |
79 | You can access your slides from http://localhost:3030/
80 |
81 |
82 | ### Build deployable image
83 |
84 | Or you can create your own slidev project to a docker image with Dockerfile:
85 |
86 | ```Dockerfile
87 | FROM tangramor/slidev:latest
88 |
89 | ADD . /slidev
90 |
91 | ```
92 |
93 | Create the docker image: `docker build -t myppt .`
94 |
95 | And run the container: `docker run --name myslides --rm --user node -p 3030:3030 myppt`
96 |
97 | You can visit your slides from http://localhost:3030/
98 |
99 |
100 | ### Build hostable SPA (Single Page Application)
101 |
102 | Run command `docker exec -i slidev npx slidev build` on the running container `slidev`. It will generate static HTML files under `dist` folder.
103 |
104 |
105 | #### Host on Github Pages
106 |
107 | You can host `dist` in a static web site such as [Github Pages](https://tangramor.github.io/slidev_docker/) or Gitlab Pages.
108 |
109 | Because in Github pages the url may contain subfolder, so you need to modify the generated `index.html` to change `href="/assets/xxx` to `href="./assets/xxx`. Or you may use `--base=//` option during the build process, such as: `docker exec -i slidev npx slidev build --base=/slidev_docker/`.
110 |
111 | And to avoid Jekyll build process, you need to add an empty file `.nojekyll`.
112 |
113 |
114 | #### Host by docker
115 |
116 | You can also host it by yourself with docker:
117 |
118 | ```bash
119 | docker run --name myslides --rm -p 80:80 -v ${PWD}/dist:/usr/share/nginx/html nginx:alpine
120 | ```
121 |
122 | Or create a static image with following Dockerfile:
123 |
124 | ```Dockerfile
125 | FROM nginx:alpine
126 |
127 | COPY dist /usr/share/nginx/html
128 |
129 | ```
130 |
131 | Create the docker image: `docker build -t mystaticppt .`
132 |
133 | And run the container: `docker run --name myslides --rm -p 80:80 mystaticppt`
134 |
135 | You can visit your slides from http://localhost/
136 |
137 |
138 | Refer to the [tangramor/slidev_docker](https://github.com/tangramor/slidev_docker) for more details.
139 |
--------------------------------------------------------------------------------
/guide/navigation.md:
--------------------------------------------------------------------------------
1 | # Navigation
2 |
3 | ## Navigation Bar
4 |
5 | Move your mouse to the left bottom corner of Slidev page, the navigation bar will be appeared.
6 |
7 | 
8 |
9 | | Shortcuts | Button | Description |
10 | | --- | --- | --- |
11 | | f | | toggle fullscreen |
12 | | right / space | | next animation or slide |
13 | | left | | previous animation or slide |
14 | | up | - | previous slide |
15 | | down | - | next slide |
16 | | o | | toggle [slides overview](#slides-overview) |
17 | | d | | toggle dark mode |
18 | | - | | toggle [camera view](/guide/recording#camera-view) |
19 | | - | | [recording](/guide/recording#camera-view) |
20 | | - | | enter [presenter mode](/guide/presenter-mode) |
21 | | - | | toggle [integrated editor](/guide/editors#integrated-editor) |
22 | | - | | download slides (only appear in [SPA build](/guide/exporting#single-page-application-spa)) |
23 | | - | | show information about the slides |
24 | | - | | show settings menu |
25 | | g | - | show goto... |
26 |
27 |
28 |
29 | ## Slides Overview
30 |
31 | By pressing o or clicking the button in the navigation bar, you can have the overview of your slides so you can jump between them easily.
32 |
33 | 
34 |
--------------------------------------------------------------------------------
/guide/presenter-mode.md:
--------------------------------------------------------------------------------
1 | # Presenter Mode
2 |
3 | Click the button in the navigation panel, or visit http://localhost:3030/presenter manually, to enter the presenter mode. Whenever you enter the presenter mode, other page instances will automatically stay in sync with the presenter.
4 |
5 | 
6 |
--------------------------------------------------------------------------------
/guide/recording.md:
--------------------------------------------------------------------------------
1 | # Recording
2 |
3 | Slidev has a built-in recording and camera view. You can use them to record your presentation easily in one place.
4 |
5 | ## Camera View
6 |
7 | Click the button in the navigation panel to show your camera view in the presentation. You can drag to move it, and use the handler on the right bottom corner to resize it. The size and position will persist in `localStorage` and will therefore be consistent across multiple refreshes, so no need to worry about that.
8 |
9 |
10 |
11 | ## Recording
12 |
13 | Clicking the button in the navigation panel will bring up a dialog for you. Here you can choose to either record your camera embedded in your slides or to separate them into two video files.
14 |
15 | This feature is powered by [RecordRTC](https://github.com/muaz-khan/RecordRTC) and uses the [WebRTC API](https://webrtc.org/).
16 |
17 | 
18 |
--------------------------------------------------------------------------------
/guide/why.md:
--------------------------------------------------------------------------------
1 | # Why Slidev
2 |
3 | There are a lot of feature-rich, general-purpose, WYSIWYG slides makers like [Microsoft PowerPoint](https://www.microsoft.com/en-us/microsoft-365/powerpoint) and [Apple Keynote](https://www.apple.com/keynote/). They work pretty well for making nice slides with animations, charts, and many other things, while being very intuitive and easy to learn. So why bother making Slidev?
4 |
5 | Slidev aims to provide the flexibility and interactivity for developers to make their presentations even more interesting, expressive, and attractive by using the tools and technologies they are already familiar with.
6 |
7 | When working with WYSIWYG editors, it is easy to get distracted by the styling options. Slidev remedies that by separating the content and visuals. This allows you to focus on one thing at a time, while also being able to reuse the themes from the community. Slidev does not seek to replace other slide deck builders entirely. Rather, it focuses on catering to the developer community.
8 |
9 | ## Slidev
10 |
11 | 
12 |
13 | Here are a few of the coolest features of Slidev:
14 |
15 | ## Markdown-based
16 |
17 | Slidev uses an extended Markdown format to store and organize your slides in a single plain text file. This lets you focus on making the content. And since the content and styles are separated, this also made it possible to switch between different themes effortlessly.
18 |
19 | Learn more about [Slidev's Markdown Syntax](/guide/syntax).
20 |
21 | ## Themable
22 |
23 | Themes for Slidev can be shared and installed using npm packages. You then apply them with only one line of config.
24 |
25 | Check out the [theme gallery](/themes/gallery) or [learn how to write a theme](/themes/write-a-theme).
26 |
27 | ## Developer Friendly
28 |
29 | Slidev provides first-class support for code snippets for developers. It supports both [Prism](https://prismjs.com/) and [Shiki](https://github.com/shikijs/shiki) to get pixel perfect syntax highlighting, while still being able to modify the code at any time. With [Monaco editor](https://microsoft.github.io/monaco-editor/) built-in, it also empowers you to do live coding / demonstration in your presentation with autocompletion, type hovering, and even TypeScript type check support.
30 |
31 | Learn more about [highlighters](/custom/highlighters) and [Monaco configuration](/custom/config-monaco).
32 |
33 | ## Fast
34 |
35 | Slidev is powered by [Vite](https://vitejs.dev/), [Vue 3](https://v3.vuejs.org/) and [Windi CSS](https://windicss.org/), which give you the most wonderful authoring experience. Every change you made will reflect to your slides **instantly**.
36 |
37 | Find more about [our tech stack](/guide/#tech-stack).
38 |
39 | ## Interactive & Expressive
40 |
41 | You can write custom Vue components and use them directly inside your markdown file. You can also interact with them inside the presentation to express your idea in a more interesting and intuitive way.
42 |
43 | ## Recording Support
44 |
45 | Slidev provides built-in recording and camera view. You can share your presentation with your camera view inside, or record and save them separately for your screen and camera. All with one go, no additional tools are needed.
46 |
47 | Learn more about [recording here](/guide/recording).
48 |
49 | ## Portable
50 |
51 | Export your slides into PDF, PNGs, or even a hostable Single-page Application (SPA) with a single command, and share them anywhere.
52 |
53 | Read more about that in the [exporting docs](/guide/exporting).
54 |
55 | ## Hackable
56 |
57 | Being powered by web technologies, anything that can be done in a web app is also possible with Slidev. For example, WebGL, API requests, iframes, or even live sharing. It's up to your imagination!
58 |
59 | ## Give it a Try
60 |
61 | Playing around with Slidev will tell you more than a thousand words. You are just one command away:
62 |
63 | ```bash
64 | $ npm init slidev
65 | ```
66 |
67 | Or have a quick preview of it:
68 |
69 |
20 |
21 | 
24 |
25 |
26 |
27 | 
28 |
29 | 
8 | 
43 |