From a9706e023e005538c02c8ba9f36d03876f65dacb Mon Sep 17 00:00:00 2001
From: Leon Si <leon@leondreamed.com>
Date: Wed, 5 Oct 2022 05:47:29 -0400
Subject: [PATCH 01/42] docs: fix typos and tweak grammar (#94)

---
 guide/hosting.md | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/guide/hosting.md b/guide/hosting.md
index 1392a7a..61511e8 100644
--- a/guide/hosting.md
+++ b/guide/hosting.md
@@ -31,9 +31,9 @@ download: true
 ---
 ```
 
-Slidev will generate a pdf file along with the build, and a download button will be displayed in the SPA.
+Slidev will generate a PDF file along with the build, and a download button will be displayed in the SPA.
 
-You can also provide a custom url to the PDF. In that case, the rendering process will be skipped.
+You can also provide a custom URL for the PDF. In that case, the rendering process will be skipped.
 
 ```md
 ---
@@ -52,7 +52,7 @@ For more, check out [Showcases](/showcases).
 
 ## Hosting
 
-We recommend to use `npm init slidev@lastest` to scaffolding your project, which contains the necessary configuration files for hosting services out-of-box.
+We recommend to use `npm init slidev@latest` to scaffold your project, which contains the necessary configuration files for hosting services out-of-the-box.
 
 ### Netlify
 
@@ -74,7 +74,7 @@ Create `netlify.toml` in your project root with the following content.
   status = 200
 ```
 
-Then go to your Netlify dashboard, create new site with the repository.
+Then go to your Netlify dashboard and create a new site with the repository.
 
 ### Vercel
 
@@ -90,7 +90,7 @@ Create `vercel.json` in your project root with the following content.
 }
 ```
 
-Then go to your Vercel dashboard, create new site with the repository.
+Then go to your Vercel dashboard and create a new site with the repository.
 
 ## GitHub Pages
 
@@ -98,7 +98,7 @@ Then go to your Vercel dashboard, create new site with the repository.
 
 To deploy your slides on GitHub Pages:
 - upload all the files of the project in your repo (i.e. named `name_of_repo`)
-- create `.github/workflows/deploy.yml` with following content to deploy your slides to GitHub Pages via GitHub Actions. In this file, replace `<name_of_repo>`with `name_of_repo`.
+- create `.github/workflows/deploy.yml` with following content to deploy your slides to GitHub Pages via GitHub Actions. In this file, replace `<name_of_repo>` with `name_of_repo`.
 
 ```yaml
 name: Deploy pages
@@ -124,5 +124,5 @@ jobs:
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 ```
-- In your repository, go to Setting>Pages. Under "Build and deployment", select "Deploy from a branch", select  "gh- pages" and "root". Click on save.
-- Finally, after all workflows is executed, a link to the slides should appear under Setting>Pages.
+- In your repository, go to Settings>Pages. Under "Build and deployment", select "Deploy from a branch", select "gh-pages" and "root". Click on save.
+- Finally, after all workflows are executed, a link to the slides should appear under Settings>Pages.

From 550ff2f51c9e98efef76cff45ffe0cbb619afd7d Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Tue, 18 Oct 2022 10:43:11 +0800
Subject: [PATCH 02/42] chore: update algolia component

---
 .../theme/components/AlgoliaSearchBox.vue     | 179 +++++++-----------
 1 file changed, 73 insertions(+), 106 deletions(-)

diff --git a/.vitepress/theme/components/AlgoliaSearchBox.vue b/.vitepress/theme/components/AlgoliaSearchBox.vue
index b9a5b7f..f1479a4 100644
--- a/.vitepress/theme/components/AlgoliaSearchBox.vue
+++ b/.vitepress/theme/components/AlgoliaSearchBox.vue
@@ -4,126 +4,93 @@
 
 <script setup lang="ts">
 import '@docsearch/css'
-import { useRoute, useRouter } from 'vitepress'
-import { getCurrentInstance, onMounted, watch } from 'vue'
 import docsearch from '@docsearch/js'
-import type { DocSearchHit } from '@docsearch/react/dist/esm/types'
-import type { DefaultTheme } from '../config'
+import { onMounted } from 'vue'
+import { useRouter, useRoute, useData } from 'vitepress'
 
-const props = defineProps<{
-  options: DefaultTheme.AlgoliaSearchOptions
-}>()
-
-const vm = getCurrentInstance()
-const route = useRoute()
 const router = useRouter()
-
-watch(
-  () => props.options,
-  (value) => {
-    update(value)
-  },
-)
+const route = useRoute()
+const { theme, site } = useData()
 
 onMounted(() => {
-  initialize(props.options)
+  initialize(theme.value.algolia)
+  setTimeout(poll, 16)
 })
 
-function isSpecialClick(event: MouseEvent) {
-  return (
-    event.button === 1
-    || event.altKey
-    || event.ctrlKey
-    || event.metaKey
-    || event.shiftKey
-  )
-}
+function poll() {
+  // programmatically open the search box after initialize
+  const e = new Event('keydown') as any
 
-function getRelativePath(absoluteUrl: string) {
-  const { pathname, hash } = new URL(absoluteUrl)
+  e.key = 'k'
+  e.metaKey = true
 
-  return pathname + hash
-}
+  window.dispatchEvent(e)
 
-function update(options: any) {
-  if (vm && vm.vnode.el) {
-    vm.vnode.el.innerHTML
-      = '<div class="algolia-search-box" id="docsearch"></div>'
-    initialize(options)
-  }
+  setTimeout(() => {
+    if (!document.querySelector('.DocSearch-Modal')) {
+      poll()
+    }
+  }, 16)
 }
 
+// @ts-expect-error
+const docsearch$ = docsearch.default ?? docsearch
+type DocSearchProps = Parameters<typeof docsearch$>[0]
+
 function initialize(userOptions: any) {
-  docsearch(
-    Object.assign({}, userOptions, {
-      container: '#docsearch',
-
-      searchParameters: Object.assign({}, userOptions.searchParameters),
-
-      navigator: {
-        navigate: ({ suggestionUrl }: { suggestionUrl: string }) => {
-          const { pathname: hitPathname } = new URL(
-            window.location.origin + suggestionUrl,
-          )
-
-          // Router doesn't handle same-page navigation so we use the native
-          // browser location API for anchor navigation
-          if (route.path === hitPathname)
-            window.location.assign(window.location.origin + suggestionUrl)
-
-          else
-            router.go(suggestionUrl)
-        },
-      },
-
-      transformItems: (items: DocSearchHit[]) => {
-        return items.map((item) => {
-          return Object.assign({}, item, {
-            url: getRelativePath(item.url),
-          })
-        })
-      },
-
-      hitComponent: ({
-        hit,
-        children,
-      }: {
-        hit: DocSearchHit
-        children: any
-      }) => {
-        const relativeHit = hit.url.startsWith('http')
-          ? getRelativePath(hit.url as string)
-          : hit.url
-
-        return {
-          type: 'a',
-          ref: undefined,
-          constructor: undefined,
-          key: undefined,
-          props: {
-            href: hit.url,
-            onClick: (event: MouseEvent) => {
-              if (isSpecialClick(event))
-                return
-
-              // we rely on the native link scrolling when user is already on
-              // the right anchor because Router doesn't support duplicated
-              // history entries
-              if (route.path === relativeHit)
-                return
-
-              // if the hits goes to another page, we prevent the native link
-              // behavior to leverage the Router loading feature
-              if (route.path !== relativeHit)
-                event.preventDefault()
-
-              router.go(relativeHit)
-            },
-            children,
-          },
+  // note: multi-lang search support is removed since the theme
+  // doesn't support multiple locales as of now.
+  const options = Object.assign<{}, {}, DocSearchProps>({}, userOptions, {
+    container: '#docsearch',
+
+    navigator: {
+      navigate({ itemUrl }: any) {
+        const { pathname: hitPathname } = new URL(
+          window.location.origin + itemUrl
+        )
+
+        // router doesn't handle same-page navigation so we use the native
+        // browser location API for anchor navigation
+        if (route.path === hitPathname) {
+          window.location.assign(window.location.origin + itemUrl)
+        } else {
+          router.go(itemUrl)
         }
-      },
-    }),
+      }
+    },
+
+    transformItems(items: any) {
+      return items.map((item: any) => {
+        return Object.assign({}, item, {
+          url: getRelativePath(item.url)
+        })
+      })
+    },
+
+    // @ts-expect-error vue-tsc thinks this should return Vue JSX but it returns the required React one
+    hitComponent({ hit, children }) {
+      return {
+        __v: null,
+        type: 'a',
+        ref: undefined,
+        constructor: undefined,
+        key: undefined,
+        props: { href: hit.url, children }
+      }
+    }
+  })
+
+  docsearch$(options)
+}
+
+function getRelativePath(absoluteUrl: string) {
+  const { pathname, hash } = new URL(absoluteUrl)
+  return (
+    pathname.replace(
+      /\.html$/,
+      // @ts-expect-error
+      site.value.cleanUrls === 'disabled' ? '.html' : ''
+    ) + hash
   )
 }
 </script>

From ecd8bf022f3594c9efceac78aae2852a0055f9bf Mon Sep 17 00:00:00 2001
From: Haroen Viaene <fingebimus@me.com>
Date: Tue, 18 Oct 2022 04:44:35 +0200
Subject: [PATCH 03/42] docs(search): correct credentials for docsearch (#95)

---
 .vitepress/config.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/.vitepress/config.js b/.vitepress/config.js
index c5b3569..cc900d2 100644
--- a/.vitepress/config.js
+++ b/.vitepress/config.js
@@ -252,7 +252,8 @@ module.exports = {
     editLinkText: 'Suggest changes to this page',
 
     algolia: {
-      apiKey: '1a5c5a504139c58f428974c78c55291d',
+      appId: 'LCBV6MIFS6',
+      apiKey: '1ff173fe73b20edc962c1c24c0b1c160',
       indexName: 'slidev',
       searchParameters: {
         // for translations maintainers: change the filter to your locale code (subdomain name)

From 7fa7d16a90641985a70320e5115ac4f427cc8508 Mon Sep 17 00:00:00 2001
From: Giacomo Lombardi <lomby92@gmail.com>
Date: Tue, 25 Oct 2022 07:27:57 +0200
Subject: [PATCH 04/42] doc: add presenter notes export guide (#96)

Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>
---
 guide/exporting.md | 20 ++++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/guide/exporting.md b/guide/exporting.md
index 5ee1fb0..334be75 100644
--- a/guide/exporting.md
+++ b/guide/exporting.md
@@ -1,6 +1,8 @@
 # Exporting
 
-## PDF
+## Slides
+
+### PDF
 
 > 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.
 > If you are doing exporting in a CI environment, [the playwright CI guide](https://playwright.dev/docs/ci) can be helpful.
@@ -25,7 +27,7 @@ In case you want to export your slides using the dark version of the theme, use
 $ slidev export --dark
 ```
 
-### Export Clicks Steps
+#### Export Clicks Steps
 
 > Available since v0.21
 
@@ -35,7 +37,7 @@ By default, Slidev exports one page per slide with clicks animations disabled. I
 $ slidev export --with-clicks
 ```
 
-## PNGs
+### PNGs
 
 When passing in the `--format png` option, Slidev will export PNG images for each slide instead of a PDF.
 
@@ -43,6 +45,16 @@ When passing in the `--format png` option, Slidev will export PNG images for eac
 $ slidev export --format png
 ```
 
-## Single-Page Application (SPA)
+### Single-Page Application (SPA)
 
 See [Static Hosting](/guide/hosting).
+
+## Presenter notes
+
+> Available since v0.36.8
+
+Export only the presenter notes (the last comment block for each slide) into a text document in PDF.
+
+```bash
+$ slidev export-notes
+```

From 26a45505735ed4d0647775c328a0d7b7a4ca0a65 Mon Sep 17 00:00:00 2001
From: Liran Tal <liran.tal@gmail.com>
Date: Tue, 25 Oct 2022 08:29:07 +0300
Subject: [PATCH 05/42] docs: update for advanced navigation features (#79)

---
 custom/config-shortcuts.md | 26 ++++++++++++++++++++++++++
 1 file changed, 26 insertions(+)

diff --git a/custom/config-shortcuts.md b/custom/config-shortcuts.md
index db6cb05..0944a15 100644
--- a/custom/config-shortcuts.md
+++ b/custom/config-shortcuts.md
@@ -6,6 +6,8 @@
 
 <Environment type="client" />
 
+## Getting started
+
 Create `./setup/shortcuts.ts` with the following content:
 
 ```ts
@@ -33,6 +35,8 @@ With the setup, you can provide the custom setting for shortcuts mentioned in [N
 
 The configuration function receives an object with some navigation methods, and returns an array containing some shortcut configuration. Refer to the type definitions for more details.
 
+## Advanced key binding
+
 The `key` type only allows for strings, but you can still bind multiple keys by using following convention:
 
 ```ts
@@ -51,4 +55,26 @@ export default defineShortcutsSetup((nav: NavOperations, base: ShortcutOptions[]
 })
 ```
 
+## Advanced navigation features
+
+The `nav` navigation operations allows you to access some functionalities than basic _next slide_ or _previous slide_. See the following for use-cases:
+
+```ts
+import { defineShortcutsSetup, NavOperations } from '@slidev/types'
+
+export default defineShortcutsSetup((nav: NavOperations) => {
+  return [
+    {
+      key: 'e',
+      
+      // Set the `e` keyboard shortcut to be used as a bookmark
+      // or quick-access of sorts, to navigate specifically to
+      // slide number 42
+      fn: () => nav.go(42),
+      autoRepeat: true,
+    }
+  ]
+})
+```
+
 Refer to [useMagicKeys | VueUse](https://vueuse.org/core/useMagicKeys/) for more details about key pressed event.

From 37da379f2085eaf0e279e3b3929565606e0df481 Mon Sep 17 00:00:00 2001
From: Minsu Kim <alstn2468_@naver.com>
Date: Tue, 25 Oct 2022 14:49:35 +0900
Subject: [PATCH 06/42] docs: Update showcase list (#92)

---
 .vitepress/showcases.ts | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/.vitepress/showcases.ts b/.vitepress/showcases.ts
index 7c4c6fa..43b3526 100644
--- a/.vitepress/showcases.ts
+++ b/.vitepress/showcases.ts
@@ -131,6 +131,17 @@ export const showcases: ShowCaseInfo[] = [
     sourceLink: 'https://github.com/webup/openfunction-talks/tree/main/202-node-async',
     at: 'OpenFunction Tutorial Sharing',
     datetime: '2022-05-08',
+  },
+    {
+    title: 'Is it Okay to Pursue Functional Programming on Frontend?',
+    author: {
+      name: 'Minsu Kim , Changhui Lee',
+    },
+    at: '2022 JSConf Korea',
+    slidesLink: 'https://moonlit-nougat-422445.netlify.app/1',
+    sourceLink: 'https://github.com/alstn2468/2022-jsconf-presentation',
+    cover: 'https://raw.githubusercontent.com/alstn2468/2022-jsconf-presentation/main/public/images/og.png',
+    datetime: '2022-09-16',
   },
   // Add yours here!
   {

From e414b8d4982fad572da8803b6a2c84edd570a01e Mon Sep 17 00:00:00 2001
From: godkun <godkun666@126.com>
Date: Fri, 4 Nov 2022 20:59:05 +0800
Subject: [PATCH 07/42] docs:  add slidev ppt template with naive-ui (#97)

---
 .vitepress/showcases.ts | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/.vitepress/showcases.ts b/.vitepress/showcases.ts
index 43b3526..80db948 100644
--- a/.vitepress/showcases.ts
+++ b/.vitepress/showcases.ts
@@ -143,6 +143,17 @@ export const showcases: ShowCaseInfo[] = [
     cover: 'https://raw.githubusercontent.com/alstn2468/2022-jsconf-presentation/main/public/images/og.png',
     datetime: '2022-09-16',
   },
+  {
+    title: 'Blazing slidev ppt template with naive-ui',
+    author: {
+      name: 'godkun',
+    },
+    at: 'personal sharing',
+    slidesLink: 'https://ppt.godkun.top',
+    sourceLink: 'https://github.com/godkun/ppt-template',
+    cover: 'https://github.com/godkun/ppt-template/raw/main/public/show.gif',
+    datetime: '2022-10-24',
+  },
   // Add yours here!
   {
     title: 'Yours?',

From 041453dfdd1dbc3f02b3114416e1b20b60563679 Mon Sep 17 00:00:00 2001
From: Michael Hoffmann <michael.hoffmann@mokkapps.de>
Date: Fri, 4 Nov 2022 13:59:28 +0100
Subject: [PATCH 08/42] Add slidev-theme-mokkapps (#98)

---
 .vitepress/themes.ts | 27 +++++++++++++++++++++++++++
 1 file changed, 27 insertions(+)

diff --git a/.vitepress/themes.ts b/.vitepress/themes.ts
index 6e504da..8d98809 100644
--- a/.vitepress/themes.ts
+++ b/.vitepress/themes.ts
@@ -359,6 +359,33 @@ export const community: ThemeInfo[] = [
       'light',
     ],
   },
+  {
+    id: 'slidev-theme-mokkapps',
+    name: 'Mokkapps',
+    description: 'A theme for my personal brand "Mokkapps"',
+    author: {
+      name: 'Michael Hoffmann',
+      link: 'https://github.com/mokkapps',
+    },
+    repo: 'https://github.com/mokkapps/slidev-theme-mokkapps',
+    previews: [
+      'https://cdn.jsdelivr.net/gh/mokkapps/slidev-theme-mokkapps@master/screenshots/dark/001.png',
+      'https://cdn.jsdelivr.net/gh/mokkapps/slidev-theme-mokkapps@master/screenshots/dark/002.png',
+      'https://cdn.jsdelivr.net/gh/mokkapps/slidev-theme-mokkapps@master/screenshots/dark/003.png',
+      'https://cdn.jsdelivr.net/gh/mokkapps/slidev-theme-mokkapps@master/screenshots/dark/004.png',
+      'https://cdn.jsdelivr.net/gh/mokkapps/slidev-theme-mokkapps@master/screenshots/dark/005.png',
+      'https://cdn.jsdelivr.net/gh/mokkapps/slidev-theme-mokkapps@master/screenshots/dark/006.png',
+      'https://cdn.jsdelivr.net/gh/mokkapps/slidev-theme-mokkapps@master/screenshots/dark/007.png',
+      'https://cdn.jsdelivr.net/gh/mokkapps/slidev-theme-mokkapps@master/screenshots/dark/008.png',
+      'https://cdn.jsdelivr.net/gh/mokkapps/slidev-theme-mokkapps@master/screenshots/dark/009.png',
+      'https://cdn.jsdelivr.net/gh/mokkapps/slidev-theme-mokkapps@master/screenshots/dark/010.png',
+      'https://cdn.jsdelivr.net/gh/mokkapps/slidev-theme-mokkapps@master/screenshots/dark/011.png',
+    ],
+    tags: [
+      'dark',
+      'light',
+    ],
+  },
   // Add yours here!
   {
     id: '',

From eb148aa43004e4f35f192bf482a90cc220e943c3 Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Tue, 8 Nov 2022 16:50:52 +0800
Subject: [PATCH 09/42] fix: disable search box auto open, close #99

---
 .../theme/components/AlgoliaSearchBox.vue       | 17 -----------------
 1 file changed, 17 deletions(-)

diff --git a/.vitepress/theme/components/AlgoliaSearchBox.vue b/.vitepress/theme/components/AlgoliaSearchBox.vue
index f1479a4..9561cb3 100644
--- a/.vitepress/theme/components/AlgoliaSearchBox.vue
+++ b/.vitepress/theme/components/AlgoliaSearchBox.vue
@@ -14,25 +14,8 @@ const { theme, site } = useData()
 
 onMounted(() => {
   initialize(theme.value.algolia)
-  setTimeout(poll, 16)
 })
 
-function poll() {
-  // programmatically open the search box after initialize
-  const e = new Event('keydown') as any
-
-  e.key = 'k'
-  e.metaKey = true
-
-  window.dispatchEvent(e)
-
-  setTimeout(() => {
-    if (!document.querySelector('.DocSearch-Modal')) {
-      poll()
-    }
-  }, 16)
-}
-
 // @ts-expect-error
 const docsearch$ = docsearch.default ?? docsearch
 type DocSearchProps = Parameters<typeof docsearch$>[0]

From 35a71a169226ed1a0aecd46caa63ecf4e468608c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A9mi=20Emonet?= <twitwi@users.noreply.github.com>
Date: Thu, 24 Nov 2022 09:41:04 +0100
Subject: [PATCH 10/42] docs: add parser customization (preparser, but also
 link vite config) (#91)

---
 .vitepress/config.js    |   4 +
 custom/config-parser.md | 177 ++++++++++++++++++++++++++++++++++++++++
 2 files changed, 181 insertions(+)
 create mode 100644 custom/config-parser.md

diff --git a/.vitepress/config.js b/.vitepress/config.js
index cc900d2..1f46141 100644
--- a/.vitepress/config.js
+++ b/.vitepress/config.js
@@ -164,6 +164,10 @@ const Customizations = [
     text: 'Configure Mermaid',
     link: '/custom/config-mermaid',
   },
+  {
+    text: 'Configure Parser',
+    link: '/custom/config-parser',
+  },
   {
     text: 'Configure Shortcuts',
     link: '/custom/config-shortcuts',
diff --git a/custom/config-parser.md b/custom/config-parser.md
new file mode 100644
index 0000000..054660b
--- /dev/null
+++ b/custom/config-parser.md
@@ -0,0 +1,177 @@
+# Configure and Extend the Parser
+
+Slidev parses your presentation file (e.g. `slides.md`) in three steps:
+
+1. A "preparsing" step is carried out: the file is split into slides using the `---` separator, and considering the possible frontmatter blocks.
+2. Each slide is parsed with an external library.
+3. Slidev resolves the special frontmatter property `src: ....`, which allows to include other md files.
+
+## Markdown Parser
+
+Configuring the markdown parser used in step 2 can be done by [configuring Vite internal plugins](/custom/config-vite#configure-internal-plugins).
+
+## Preparser Extensions
+
+> Available since v0.37.0
+
+:::warning
+Important: when modifying the preparser configuration, you need to stop and start slidev again (restart might not be sufficient).
+:::
+
+The preparser (step 1 above) is highly extensible and allows to implement custom syntaxes for your md files. Extending the preparser is considered **an advanced feature** and is susceptible to break [editor integrations](/guide/editors) due to implicit changes in the syntax.
+
+To customize it, create a `./setup/preparser.ts` file with the following content:
+
+
+```ts
+import { definePreparserSetup } from '@slidev/types'
+
+export default definePreparserSetup((filepath) => {
+  return [
+    {
+      transformRawLines(lines) {
+        for (const i in lines) {
+          if (lines[i] === '@@@')
+            lines[i] = 'HELLO'
+        }
+      },
+    }
+  ]
+})
+```
+
+This example systematically replaces any `@@@` line by a line with `hello`. It illustrates the structure of a preparser configuration file and some of the main concepts the preparser involves:
+- `definePreparserSetup` must be called with a function as parameter.
+- The function receives the file path (of the root presentation file) and could use this information (e.g., enable extensions based on the presentation file).
+- The function must return a list of preparser extensions.
+- An extension can contain:
+  - a `transformRawLines(lines)` function that runs just after parsing the headmatter of the md file and receives a list of all lines (from the md file). The function can mutate the list arbitrarily.
+  - a `transformSlide(content, frontmatter)` function that is called for each slide, just after splitting the file, and receives the slide content as a string and the frontmatter of the slide as an object. The function can mutate the frontmatter and must return the content string (possibly modified, possibly `undefined` if no modifications have been done).
+  - a `name`
+
+## Example Preparser Extensions
+
+### Use case 1: compact syntax top-level presentation
+
+Imagine a situation where (part of) your presentation is mainly showing cover images and including other md files. You might want a compact notation where for instance (part of) `slides.md` is as follows:
+
+```md
+
+@cover: /nice.jpg
+# Welcome
+@src: page1.md
+@src: page2.md
+@cover: /break.jpg
+@src: pages3-4.md
+@cover: https://source.unsplash.com/collection/94734566/1920x1080
+# Questions?
+see you next time
+
+```
+
+To allow these `@src:` and `@cover:` syntaxes, create a `./setup/preparser.ts` file with the following content:
+
+
+```ts
+import { definePreparserSetup } from '@slidev/types'
+
+export default definePreparserSetup((filepath) => {
+  return [
+    {
+      transformRawLines(lines) {
+        let i = 0
+        while (i < lines.length) {
+          const l = lines[i]
+          if (l.match(/^@cover:/i)) {
+            lines.splice(i, 1,
+              '---',
+              'layout: cover',
+              `background: ${l.replace(/^@cover: */i, '')}`,
+              '---',
+              '')
+            continue
+          }
+          if (l.match(/^@src:/i)) {
+            lines.splice(i, 1,
+              '---',
+              `src: ${l.replace(/^@src: */i, '')}`,
+              '---',
+              '')
+            continue
+          }
+          i++
+        }
+      }
+    },
+  ]
+})
+```
+
+And that's it.
+
+
+### Use case 2: using custom frontmatter to wrap slides
+
+Imagine a case where you often want to scale some of your slides but still want to use a variety of existing layouts so create a new layout would not be suited.
+For instance, you might want to write your `slides.md` as follows:
+
+```md
+
+
+
+---
+layout: quote
+_scale: 0.75
+---
+
+# Welcome
+
+> great!
+
+---
+_scale: 4
+---
+# Break
+
+---
+
+# Ok
+
+---
+layout: center
+_scale: 2.5
+---
+# Questions?
+see you next time
+
+```
+
+Here we used an underscore in `_scale` to avoid possible conflicts with existing frontmatter properties (indeed, the case of `scale`, without underscore would cause potential problems).
+
+
+To handle this `_scale: ...` syntax in the frontmatter, create a `./setup/preparser.ts` file with the following content:
+
+
+```ts
+import { definePreparserSetup } from '@slidev/types'
+
+export default definePreparserSetup((filepath) => {
+  return [
+    {
+      transformSlide(content, frontmatter) {
+        if ('_scale' in frontmatter) {
+          return [
+            `<Transform :scale=${frontmatter['_scale']}>`,
+            '',
+            content,
+            '',
+            '</Transform>'
+          ].join('\n')
+        }
+      },
+    },
+  ]
+})
+```
+
+And that's it.

From 276185826c2f774c4c27838d374730dd54986752 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A9mi=20Emonet?= <twitwi@users.noreply.github.com>
Date: Tue, 13 Dec 2022 20:45:16 +0100
Subject: [PATCH 11/42] docs: update parameters in definePreparserSetup (#101)

---
 custom/config-parser.md | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/custom/config-parser.md b/custom/config-parser.md
index 054660b..098b359 100644
--- a/custom/config-parser.md
+++ b/custom/config-parser.md
@@ -26,7 +26,7 @@ To customize it, create a `./setup/preparser.ts` file with the following content
 ```ts
 import { definePreparserSetup } from '@slidev/types'
 
-export default definePreparserSetup((filepath) => {
+export default definePreparserSetup(({filepath, headmatter}) => {
   return [
     {
       transformRawLines(lines) {
@@ -42,7 +42,7 @@ export default definePreparserSetup((filepath) => {
 
 This example systematically replaces any `@@@` line by a line with `hello`. It illustrates the structure of a preparser configuration file and some of the main concepts the preparser involves:
 - `definePreparserSetup` must be called with a function as parameter.
-- The function receives the file path (of the root presentation file) and could use this information (e.g., enable extensions based on the presentation file).
+- The function receives the file path (of the root presentation file) and headmatter (from the md file). It could use this information (e.g., enable extensions based on the presentation file).
 - The function must return a list of preparser extensions.
 - An extension can contain:
   - a `transformRawLines(lines)` function that runs just after parsing the headmatter of the md file and receives a list of all lines (from the md file). The function can mutate the list arbitrarily.
@@ -75,7 +75,7 @@ To allow these `@src:` and `@cover:` syntaxes, create a `./setup/preparser.ts` f
 ```ts
 import { definePreparserSetup } from '@slidev/types'
 
-export default definePreparserSetup((filepath) => {
+export default definePreparserSetup(() => {
   return [
     {
       transformRawLines(lines) {
@@ -155,7 +155,7 @@ To handle this `_scale: ...` syntax in the frontmatter, create a `./setup/prepar
 ```ts
 import { definePreparserSetup } from '@slidev/types'
 
-export default definePreparserSetup((filepath) => {
+export default definePreparserSetup(() => {
   return [
     {
       transformSlide(content, frontmatter) {

From 5cffe3bca749ea2af7b370223f0f442d15d88d8e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jos=C3=A9=20dBruxelles?=
 <18559798+jdbruxelles@users.noreply.github.com>
Date: Mon, 19 Dec 2022 21:51:17 +0100
Subject: [PATCH 12/42] fix: use bold instead of code tag to avoid breaking
 chars on mobile (#100)

Closes https://github.com/slidevjs/slidev/issues/778
---
 guide/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/guide/index.md b/guide/index.md
index 0d8c943..d69182d 100644
--- a/guide/index.md
+++ b/guide/index.md
@@ -2,7 +2,7 @@
 
 ## Overview
 
-Slidev <sup>(slide + dev, `/slʌɪdɪv/`)</sup> 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.
+Slidev <sup>(slide + dev, **/slʌɪdɪv/**)</sup> 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.
 
 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.
 

From c32272eee9133102e2913c79e771691761502cce Mon Sep 17 00:00:00 2001
From: Sara Tavares <29093946+stavares843@users.noreply.github.com>
Date: Wed, 21 Dec 2022 09:02:16 +0000
Subject: [PATCH 13/42] chore(typos): fix typos (#102)

Co-authored-by: stavares843 <stavares843@users.noreply.github.com>
---
 .vitepress/theme/components/Tweet.vue | 2 +-
 .vitepress/theme/support/sideBar.ts   | 6 +++---
 .vitepress/theme/utils.ts             | 4 ++--
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/.vitepress/theme/components/Tweet.vue b/.vitepress/theme/components/Tweet.vue
index a7bc116..cd307a2 100644
--- a/.vitepress/theme/components/Tweet.vue
+++ b/.vitepress/theme/components/Tweet.vue
@@ -1,5 +1,5 @@
 <!--
-A simple wrapper for embeded Tweet
+A simple wrapper for embedded Tweet
 
 Usage:
 
diff --git a/.vitepress/theme/support/sideBar.ts b/.vitepress/theme/support/sideBar.ts
index 0d6b201..9ef6bd4 100644
--- a/.vitepress/theme/support/sideBar.ts
+++ b/.vitepress/theme/support/sideBar.ts
@@ -3,7 +3,7 @@ import {
   isArray,
   ensureSlash,
   ensureStartingSlash,
-  removeExtention,
+  removeExtension,
 } from '../utils'
 
 export function isSideBarConfig(
@@ -33,7 +33,7 @@ export function getSideBarConfig(
 
   // get the very first segment of the path to compare with nulti sidebar keys
   // and make sure it's surrounded by slash
-  path = removeExtention(path)
+  path = removeExtension(path)
   path = ensureStartingSlash(path).split('/')[1] || '/'
   path = ensureSlash(path)
 
@@ -57,7 +57,7 @@ export function getFlatSideBarLinks(
 ): DefaultTheme.SideBarLink[] {
   return sidebar.reduce<DefaultTheme.SideBarLink[]>((links, item) => {
     if (item.link)
-      links.push({ text: item.text, link: removeExtention(item.link) })
+      links.push({ text: item.text, link: removeExtension(item.link) })
 
     if (isSideBarGroup(item))
       links = [...links, ...getFlatSideBarLinks(item.children)]
diff --git a/.vitepress/theme/utils.ts b/.vitepress/theme/utils.ts
index aad8b5a..6e985af 100644
--- a/.vitepress/theme/utils.ts
+++ b/.vitepress/theme/utils.ts
@@ -69,9 +69,9 @@ export function ensureEndingSlash(path: string): string {
 }
 
 /**
- * Remove `.md` or `.html` extention from the given path. It also converts
+ * Remove `.md` or `.html` extension from the given path. It also converts
  * `index` to slush.
  */
-export function removeExtention(path: string): string {
+export function removeExtension(path: string): string {
   return path.replace(/(index)?(\.(md|html))?$/, '') || '/'
 }

From a89202a9190ecc9fbbd155cbeed518e8424e54e3 Mon Sep 17 00:00:00 2001
From: Michael Hoffmann <michael.hoffmann@mokkapps.de>
Date: Tue, 10 Jan 2023 15:53:06 +0100
Subject: [PATCH 14/42] docs: update syntax.md (#103)

---
 guide/syntax.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/guide/syntax.md b/guide/syntax.md
index 427e727..1586585 100644
--- a/guide/syntax.md
+++ b/guide/syntax.md
@@ -121,7 +121,7 @@ If the code doesn't fit into one slide, you can pass an extra maxHeight option w
 and enable scrolling
 
 ~~~ts {2|3|7|12}
-//```ts {2|3|7|12} {maxHeight:'100'}
+//```ts {2|3|7|12} {maxHeight:'100px'}
 function add(
   a: Ref<number> | number,
   b: Ref<number> | number

From 2236db4ca3c6a596f2e166018eb6ce3371852b4f Mon Sep 17 00:00:00 2001
From: Tony Cabaye <tony.cabaye@smile.fr>
Date: Fri, 20 Jan 2023 19:16:03 +0100
Subject: [PATCH 15/42] feat: add LightOrDark component doc (#106)

---
 builtin/components.md | 43 +++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 43 insertions(+)

diff --git a/builtin/components.md b/builtin/components.md
index e07348d..092ca7a 100644
--- a/builtin/components.md
+++ b/builtin/components.md
@@ -80,6 +80,49 @@ Parameters:
 
 * `no` (`string | number`): The number of the slide to display the title from (slides starts from `1`)
 
+### `LightOrDark`
+
+Use it to display one thing or another depending on the active light or dark theme.
+
+#### Usage
+
+Use it with the two named Slots `#dark` and `#light`:
+~~~md
+<LightOrDark>
+  <template #dark>Dark mode is on</template>
+  <template #light>Light mode is on</template>
+</LightOrDark>
+~~~
+
+Provided props on `LightOrDark` component will be available using scoped slot props:
+~~~md
+<LightOrDark width="100" alt="some image">
+  <template #dark="props">
+    <img src="/dark.png" v-bind="props"/>
+  </template>
+  <template #light="props">
+    <img src="/light.png" v-bind="props"/>
+  </template>
+</LightOrDark>
+~~~
+
+You can provide markdown in the slots, but you will need to surround the content with blank lines:
+~~~md
+<LightOrDark>
+  <template #dark>
+  
+![dark](/dark.png)
+
+  </template>
+  <template #light>
+  
+![light](/light.png)
+
+  </template>
+</LightOrDark>
+~~~
+
+
 ## Custom Components
 
 Create a directory `components/` under your project root, and simply put your custom Vue components under it, then you can use it with the same name in your markdown file!

From 9477d414697bced184348cd18c6374f1bbd82a5c Mon Sep 17 00:00:00 2001
From: Tony Cabaye <tony.cabaye@smile.fr>
Date: Fri, 20 Jan 2023 19:17:03 +0100
Subject: [PATCH 16/42] feat: add presenter mode documentation (#105)

---
 custom/index.md         |  2 ++
 guide/presenter-mode.md | 30 ++++++++++++++++++++++++++++++
 2 files changed, 32 insertions(+)

diff --git a/custom/index.md b/custom/index.md
index f52edee..7f001d5 100644
--- a/custom/index.md
+++ b/custom/index.md
@@ -18,6 +18,8 @@ titleTemplate: '%s - Slidev'
 # information for your slides, can be a markdown string
 info: false
 
+# enable presenter mode, can be boolean, 'dev' or 'build'
+presenter: true
 # enabled pdf downloading in SPA build, can also be a custom url
 download: false
 # filename of the export file
diff --git a/guide/presenter-mode.md b/guide/presenter-mode.md
index 882c6e4..793cc2a 100644
--- a/guide/presenter-mode.md
+++ b/guide/presenter-mode.md
@@ -3,3 +3,33 @@
 Click the <carbon-user-speaker class="inline-icon-btn"/> 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.
 
 ![](/screenshots/presenter-mode.png)
+
+## Disabling
+
+Presenter mode is enabled by default.
+
+You can disable this feature with the following config:
+
+```md
+---
+presenter: false
+---
+```
+
+Or you can enable it only for `dev` or `build` mode by setting the mode you want in the config:
+```md
+---
+presenter: dev
+---
+```
+In that case the presenter will only be available when running `slidev` but not when running `slidev build`.
+
+## Remote restricted access
+
+You can run your presentation with remote access by running `slidev --remote`.
+
+In that case you may want to share the slides with other people but you don't want them to access the presenter mode to mess up your presentation.
+
+For this scenario you can provide a password for starting the server by running `slidev --remote=your_password`.
+
+In that case you will need to provide the password when accessing `/presenter/*` routes.

From 8d6e5c8c26cd8e0bdf78481faddcc258dab98b3c Mon Sep 17 00:00:00 2001
From: Michael Hoffmann <michael.hoffmann@mokkapps.de>
Date: Mon, 23 Jan 2023 11:53:38 +0100
Subject: [PATCH 17/42] Update showcases.ts (#108)

---
 .vitepress/showcases.ts | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/.vitepress/showcases.ts b/.vitepress/showcases.ts
index 80db948..239742f 100644
--- a/.vitepress/showcases.ts
+++ b/.vitepress/showcases.ts
@@ -154,6 +154,18 @@ export const showcases: ShowCaseInfo[] = [
     cover: 'https://github.com/godkun/ppt-template/raw/main/public/show.gif',
     datetime: '2022-10-24',
   },
+  {
+    title: 'Building a Polite Popup with Nuxt 3',
+    author: {
+      name: 'Michael Hoffmann',
+      link: 'https://github.com/mokkapps',
+    },
+    at: 'Vue.js Nation 2023',
+    slidesLink: 'https://vuejsnation-2023-talk-polite-popup.netlify.app',
+    sourceLink: 'https://github.com/Mokkapps/vuejsnation-2023-lightning-talk-polite-popup-nuxt-3-slides',
+    cover: 'https://raw.githubusercontent.com/Mokkapps/vuejsnation-2023-lightning-talk-polite-popup-nuxt-3-slides/main/screenshots/001.png',
+    datetime: '2023-01-25',
+  },
   // Add yours here!
   {
     title: 'Yours?',

From 2e53e8c41664c5aa920ca84e738e95c8a05fb349 Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Sun, 29 Jan 2023 03:55:13 +0100
Subject: [PATCH 18/42] feat: page transition

---
 guide/animations.md | 72 ++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 71 insertions(+), 1 deletion(-)

diff --git a/guide/animations.md b/guide/animations.md
index 875123f..d394dfe 100644
--- a/guide/animations.md
+++ b/guide/animations.md
@@ -200,4 +200,74 @@ Learn mode: [Demo](https://sli.dev/demo/starter/7) | [@vueuse/motion](https://mo
 
 ## Pages Transitions
 
-> 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.
+> Available since v0.39.0
+
+Slidev supports page transitions out of the box. You can enable it by setting the `transition` frontmatter option:
+
+```md
+---
+transition: slide-left
+---
+```
+
+This will give you a nice sliding effects on slide switching. Setting it in the frontmatter will apply to all slides. You can also set different transition per slide.
+
+### Builtin Transitions
+
+- `fade` - Crossfade in/out
+- `fade-out` - Fade out and then fade in
+- `slide-left` - Slides to the left, slide to right when going back
+- `slide-right` - Slides to the right, slide to left when going back
+- `slide-top` - Slides to the top, slide to bottom when going back
+- `slide-bottom` - Slides to the bottom, slide to top when going back
+
+### Custom Transitions
+
+Slidev's page transitions are powered by [Vue Transition](https://vuejs.org/guide/built-ins/transition.html). You can provide your custom transitions by:
+
+```md
+---
+transition: my-transition
+---
+```
+
+and then in your custom stylesheets:
+
+```css
+.my-transition-enter-active,
+.my-transition-leave-active {
+  transition: opacity 0.5s ease;
+}
+
+.my-transition-enter-from,
+.my-transition-leave-to {
+  opacity: 0;
+}
+```
+
+Learn more how it works in [Vue Transition](https://vuejs.org/guide/built-ins/transition.html).
+
+### Forward & Backward Transitions
+
+You can specify different transitions for forward and backward navigation using `|` as a separator in the transition name:
+
+```md
+---
+transition: go-forward | go-backward
+---
+```
+
+With this, when you go from slide 1 to slide 2, the `go-forward` transition will be applied. When you go from slide 2 to slide 1, the `go-backward` transition will be applied.
+
+### Advanced Usage
+
+The `transition` field accepts an option that will passed to the [`<TransitionGroup>`](https://vuejs.org/api/built-in-components.html#transition) component. For example:
+
+```md
+---
+transition:
+  name: my-transition
+  enterFromClass: custom-enter-from
+  enterActiveClass: custom-enter-active
+---
+```

From fcb11d11a499480757c50cb793ef4eab97f3bebe Mon Sep 17 00:00:00 2001
From: TheJChaps <jChapman@users.noreply.github.com>
Date: Fri, 3 Feb 2023 03:34:27 -0500
Subject: [PATCH 19/42] docs: fix broken link in faq (#111)

---
 guide/faq.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/guide/faq.md b/guide/faq.md
index 6a1beb2..1918a3c 100644
--- a/guide/faq.md
+++ b/guide/faq.md
@@ -43,7 +43,7 @@ The third column (10% width to parent container)
 </div>
 ```
 
-Learn more about [Windi CSS Grids](https://windicss.org/utilities/grid.html).
+Learn more about [Windi CSS Grids](https://windicss.org/utilities/layout/grid.html).
 
 ## Positioning
 

From e1c823dc686884305284e986b4ad90d8ddf17cb8 Mon Sep 17 00:00:00 2001
From: Elio Struyf <info@estruyf.be>
Date: Fri, 3 Feb 2023 09:51:25 +0100
Subject: [PATCH 20/42] docs: added an example of creating custom Mermaid
 styles (#110)

---
 custom/config-mermaid.md | 30 ++++++++++++++++++++++++++++++
 1 file changed, 30 insertions(+)

diff --git a/custom/config-mermaid.md b/custom/config-mermaid.md
index 4469d12..f2a6f8a 100644
--- a/custom/config-mermaid.md
+++ b/custom/config-mermaid.md
@@ -15,3 +15,33 @@ export default defineMermaidSetup(() => {
 ```
 
 With the setup, you can provide a custom default setting for [Mermaid](https://mermaid-js.github.io/). Refer to the type definitions and its documentation for more details.
+
+## Custom theme/styles
+
+In case you want to create your custom Mermaid themes or styles, you can do this by defining `themeVariables` like in the following example:
+
+```ts
+import { defineMermaidSetup } from '@slidev/types'
+
+export default defineMermaidSetup(() => {
+  return {
+    theme: 'base',
+    themeVariables: {
+      // General theme variables
+      noteBkgColor: "#181d29",
+      noteTextColor: "#F3EFF5cc",
+      noteBorderColor: "#404551",
+
+      // Sequence diagram variables
+      actorBkg: "#0E131F",
+      actorBorder: "#44FFD2",
+      actorTextColor: "#F3EFF5",
+      actorLineColor: "#F3EFF5",
+      signalColor: "#F3EFF5",
+      signalTextColor: "#F3EFF5",
+    }
+  }
+})
+```
+
+You can find all theme variables on the [Mermaid Theme Configuration](https://mermaid.js.org/config/theming.html) page.

From d6bb78bee02ae26b2b28a0fbb1a84020007ef547 Mon Sep 17 00:00:00 2001
From: Elio Struyf <info@estruyf.be>
Date: Fri, 3 Feb 2023 09:52:02 +0100
Subject: [PATCH 21/42] docs: Added the unnamed theme (#109)

---
 .vitepress/themes.ts | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/.vitepress/themes.ts b/.vitepress/themes.ts
index 8d98809..4821888 100644
--- a/.vitepress/themes.ts
+++ b/.vitepress/themes.ts
@@ -386,6 +386,25 @@ export const community: ThemeInfo[] = [
       'light',
     ],
   },
+  {
+    id: 'slidev-theme-the-unnamed',
+    name: 'The unnamed',
+    description: 'A theme based on The unnamed VS Code theme',
+    author: {
+      name: 'Elio Struyf',
+      link: 'https://elio.dev',
+    },
+    repo: 'https://github.com/estruyf/slidev-theme-the-unnamed',
+    previews: [
+      'https://cdn.jsdelivr.net/gh/estruyf/slidev-theme-the-unnamed@main/assets/cover.png',
+      'https://cdn.jsdelivr.net/gh/estruyf/slidev-theme-the-unnamed@main/assets/about-me.png',
+      'https://cdn.jsdelivr.net/gh/estruyf/slidev-theme-the-unnamed@main/assets/default.png',
+      'https://cdn.jsdelivr.net/gh/estruyf/slidev-theme-the-unnamed@main/assets/section.png',
+    ],
+    tags: [
+      'dark'
+    ],
+  },
   // Add yours here!
   {
     id: '',

From 4e268b66b3d9c80085bd3b005dd2736a4b187b98 Mon Sep 17 00:00:00 2001
From: Neil Mispelaar <neil.mispelaar@outlook.com>
Date: Fri, 3 Feb 2023 03:53:21 -0500
Subject: [PATCH 22/42] docs: add documentation for export range feature Fix
 #821 (#104)

---
 guide/exporting.md | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/guide/exporting.md b/guide/exporting.md
index 334be75..450d762 100644
--- a/guide/exporting.md
+++ b/guide/exporting.md
@@ -45,9 +45,17 @@ When passing in the `--format png` option, Slidev will export PNG images for eac
 $ slidev export --format png
 ```
 
-### Single-Page Application (SPA)
+### Export a range of slides
 
-See [Static Hosting](/guide/hosting).
+By default, all slides in the presentation are exported. If you want to export a specific slide or a range of slides you can set the `--range` option and specify which slides you would like to export. 
+
+```bash
+$ slidev export --range 1,6-8,10
+```
+
+This option accepts both specific slide numbers and ranges.
+
+The example above would export slides 1,6,7,8, and 10. 
 
 ## Presenter notes
 
@@ -58,3 +66,7 @@ Export only the presenter notes (the last comment block for each slide) into a t
 ```bash
 $ slidev export-notes
 ```
+
+## Single-Page Application (SPA)
+
+See [Static Hosting](/guide/hosting).

From 38e076f9a7c55cbd4d7b58579eecb54e77e9723a Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Fri, 3 Feb 2023 09:55:44 +0100
Subject: [PATCH 23/42] docs: improve slide transition explanation

---
 guide/animations.md | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/guide/animations.md b/guide/animations.md
index d394dfe..badc4b1 100644
--- a/guide/animations.md
+++ b/guide/animations.md
@@ -198,11 +198,13 @@ The text `Slidev` will move from `-80px` to its original position on initializat
 
 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)
 
-## Pages Transitions
+## Slide Transitions
+
+<div id="pages-transitions" />
 
 > Available since v0.39.0
 
-Slidev supports page transitions out of the box. You can enable it by setting the `transition` frontmatter option:
+Slidev supports slide transitions out of the box. You can enable it by setting the `transition` frontmatter option:
 
 ```md
 ---
@@ -216,14 +218,14 @@ This will give you a nice sliding effects on slide switching. Setting it in the
 
 - `fade` - Crossfade in/out
 - `fade-out` - Fade out and then fade in
-- `slide-left` - Slides to the left, slide to right when going back
-- `slide-right` - Slides to the right, slide to left when going back
-- `slide-top` - Slides to the top, slide to bottom when going back
-- `slide-bottom` - Slides to the bottom, slide to top when going back
+- `slide-left` - Slides to the left (slide to right when going backward)
+- `slide-right` - Slides to the right (slide to left when going backward)
+- `slide-top` - Slides to the top (slide to bottom when going backward)
+- `slide-bottom` - Slides to the bottom (slide to top when going backward)
 
 ### Custom Transitions
 
-Slidev's page transitions are powered by [Vue Transition](https://vuejs.org/guide/built-ins/transition.html). You can provide your custom transitions by:
+Slidev's slide transitions are powered by [Vue Transition](https://vuejs.org/guide/built-ins/transition.html). You can provide your custom transitions by:
 
 ```md
 ---

From 8ffa1fd2a7c795eb019785595170c2cc8d47c39b Mon Sep 17 00:00:00 2001
From: yheuhtozr <84892012+yheuhtozr@users.noreply.github.com>
Date: Sun, 5 Feb 2023 19:23:34 +0900
Subject: [PATCH 24/42] Update syntax.md: Embedded Styles (#113)

---
 guide/syntax.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/guide/syntax.md b/guide/syntax.md
index 1586585..b5a832d 100644
--- a/guide/syntax.md
+++ b/guide/syntax.md
@@ -163,7 +163,7 @@ h1 {
 # Next slide is not affected
 ```
 
-`<style>` tag in Markdown is always [scoped](https://vue-loader.vuejs.org/guide/scoped-css.html). To have global style overrides, check out the [customization section](/custom/directory-structure#style).
+`<style>` tag in Markdown is always [scoped](https://vuejs.org/api/sfc-css-features.html#scoped-css). As an outstanding result, a selector with the child combinator (`.a > .b`) is unusable as such; see the previous link. To have global style overrides, check out the [customization section](/custom/directory-structure#style).
 
 Powered by [Windi CSS](https://windicss.org), you can directly use nested css and [directives](https://windicss.org/features/directives.html) (e.g. `@apply`)
 

From dbdc820c8574243d4ae38131ae2a53f6a35a9104 Mon Sep 17 00:00:00 2001
From: Matteo Azzolini <57189921+matteo-azzolini@users.noreply.github.com>
Date: Mon, 6 Feb 2023 09:19:59 +0100
Subject: [PATCH 25/42] docs: fix typo in builtin slide transitions (#114)

---
 guide/animations.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/guide/animations.md b/guide/animations.md
index badc4b1..ca0de23 100644
--- a/guide/animations.md
+++ b/guide/animations.md
@@ -220,8 +220,8 @@ This will give you a nice sliding effects on slide switching. Setting it in the
 - `fade-out` - Fade out and then fade in
 - `slide-left` - Slides to the left (slide to right when going backward)
 - `slide-right` - Slides to the right (slide to left when going backward)
-- `slide-top` - Slides to the top (slide to bottom when going backward)
-- `slide-bottom` - Slides to the bottom (slide to top when going backward)
+- `slide-up` - Slides to the top (slide to bottom when going backward)
+- `slide-down` - Slides to the bottom (slide to top when going backward)
 
 ### Custom Transitions
 

From 9cb6406db9a1c6f2173bfecb05a29ede60989b99 Mon Sep 17 00:00:00 2001
From: Alexander Eble <35292572+alexanderdavide@users.noreply.github.com>
Date: Tue, 7 Feb 2023 01:05:27 +0100
Subject: [PATCH 26/42] docs: update Showcases (#107)

---
 .vitepress/showcases.ts | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/.vitepress/showcases.ts b/.vitepress/showcases.ts
index 239742f..dbaac2d 100644
--- a/.vitepress/showcases.ts
+++ b/.vitepress/showcases.ts
@@ -115,7 +115,7 @@ export const showcases: ShowCaseInfo[] = [
       name: 'Alexander Eble',
       link: 'https://github.com/alexanderdavide',
     },
-    slidesLink: 'https://git-most-wanted.alex-eble.de',
+    slidesLink: 'https://alexeble.de/talks/git-most-wanted/',
     sourceLink: 'https://github.com/alexanderdavide/git-most-wanted',
     at: 'Internal Tech Talk',
     datetime: '2022-03-11',
@@ -166,6 +166,18 @@ export const showcases: ShowCaseInfo[] = [
     cover: 'https://raw.githubusercontent.com/Mokkapps/vuejsnation-2023-lightning-talk-polite-popup-nuxt-3-slides/main/screenshots/001.png',
     datetime: '2023-01-25',
   },
+  {
+    title: 'Dev Environment as Code',
+    cover: 'https://cdn.jsdelivr.net/gh/alexanderdavide/dev-environment-as-code@assets/slides-export/001.png',
+    author: {
+      name: 'Alexander Eble',
+      link: 'https://github.com/alexanderdavide',
+    },
+    slidesLink: 'https://alexeble.de/talks/dev-environment-as-code/',
+    sourceLink: 'https://github.com/alexanderdavide/dev-environment-as-code',
+    at: 'Internal Tech Talk',
+    datetime: '2022-12-01',
+  },
   // Add yours here!
   {
     title: 'Yours?',

From 7f25ea87516174a4aad5140a81bf55677df906c1 Mon Sep 17 00:00:00 2001
From: JD Solanki <jdsolanki0001@gmail.com>
Date: Fri, 17 Feb 2023 21:51:32 +0530
Subject: [PATCH 27/42] docs(themes): added dracula (#115)

---
 .vitepress/themes.ts | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/.vitepress/themes.ts b/.vitepress/themes.ts
index 4821888..e887cd4 100644
--- a/.vitepress/themes.ts
+++ b/.vitepress/themes.ts
@@ -405,6 +405,27 @@ export const community: ThemeInfo[] = [
       'dark'
     ],
   },
+  {
+    id: 'slidev-theme-dracula',
+    name: 'Dracula',
+    description: 'One the best dark theme meets slidev',
+    author: {
+      name: 'JD Solanki (jd-solanki)',
+      link: 'https://github.com/jd-solanki',
+    },
+    repo: 'https://github.com/jd-solanki/slidev-theme-dracula',
+    previews: [
+      'https://cdn.jsdelivr.net/gh/jd-solanki/slidev-theme-dracula/screenshots/screenshot-1.png',
+      'https://cdn.jsdelivr.net/gh/jd-solanki/slidev-theme-dracula/screenshots/screenshot-2.png',
+      'https://cdn.jsdelivr.net/gh/jd-solanki/slidev-theme-dracula/screenshots/screenshot-3.png',
+      'https://cdn.jsdelivr.net/gh/jd-solanki/slidev-theme-dracula/screenshots/screenshot-4.png',
+      'https://cdn.jsdelivr.net/gh/jd-solanki/slidev-theme-dracula/screenshots/screenshot-5.png',
+    ],
+    tags: [
+      'dark',
+      'minimalism',
+    ],
+  },
   // Add yours here!
   {
     id: '',

From 6c48fa71593662bad85077530a48f46ebcc45c30 Mon Sep 17 00:00:00 2001
From: Tony CABAYE <tony.cabaye@smile.fr>
Date: Tue, 24 Jan 2023 18:03:17 +0100
Subject: [PATCH 28/42] feat/export-options

---
 custom/index.md    |  9 ++++++
 guide/exporting.md | 70 ++++++++++++++++++++++++++++++++++++++++++----
 guide/hosting.md   | 33 +++++++++++++++++++++-
 3 files changed, 106 insertions(+), 6 deletions(-)

diff --git a/custom/index.md b/custom/index.md
index 7f001d5..8b096b4 100644
--- a/custom/index.md
+++ b/custom/index.md
@@ -24,6 +24,15 @@ presenter: true
 download: false
 # filename of the export file
 exportFilename: 'slidev-exported'
+# export options
+# use export CLI options in camelCase format
+# Learn more: https://sli.dev/guide/exporting.html
+export:
+  format: pdf
+  timeout: 30000
+  dark: false
+  withClicks: false
+  withToc: false
 # syntax highlighter, can be 'prism' or 'shiki'
 highlighter: 'prism'
 # show line numbers in code blocks
diff --git a/guide/exporting.md b/guide/exporting.md
index 450d762..745d020 100644
--- a/guide/exporting.md
+++ b/guide/exporting.md
@@ -21,28 +21,70 @@ $ slidev export
 
 After a few seconds, your slides will be ready at `./slides-export.pdf`.
 
+### PNGs and Markdown
+
+When passing in the `--format png` option, Slidev will export PNG images for each slide instead of a PDF.
+
+```bash
+$ slidev export --format png
+```
+
+You can also compile a markdown file composed of compiled png using `--format md`.
+
+```bash
+$ slidev export --format md
+```
+
+### Dark mode
+
 In case you want to export your slides using the dark version of the theme, use the `--dark` option:
 
 ```bash
 $ slidev export --dark
 ```
 
-#### Export Clicks Steps
+### Export Clicks Steps
 
 > Available since v0.21
 
-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.
+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` option.
 
 ```bash
 $ slidev export --with-clicks
 ```
 
-### PNGs
+### Slide range
 
-When passing in the `--format png` option, Slidev will export PNG images for each slide instead of a PDF.
+You can also specify a range of slides to export with the `--range` option.
 
 ```bash
-$ slidev export --format png
+$ slidev export --range 1,4-5,6
+```
+
+### PDF outline
+
+> Available since v0.36.10
+
+You can generate the PDF outline by passing the `--with-toc` option.
+
+```bash
+$ slidev export --with-toc
+```
+
+### Output filename
+
+You can specify the output filename with the `--output` option.
+
+```bash
+$ slidev export --output my-pdf-export
+```
+
+Or in the frontmatter configuration:
+
+```yaml
+---
+exportFilename: my-pdf-export
+---
 ```
 
 ### Export a range of slides
@@ -70,3 +112,21 @@ $ slidev export-notes
 ## Single-Page Application (SPA)
 
 See [Static Hosting](/guide/hosting).
+
+## Troubleshooting
+
+### Timeout
+
+For big presentation you might want to increase the playwrigth timeout with `--timeout`
+
+```bash
+$ slidev export --timeout 60000
+```
+
+### Executable path
+
+You can set the browser executable path for playwright using `--executable-path`
+
+```bash
+$ slidev export --executable-path [path_to_chromium]
+```
diff --git a/guide/hosting.md b/guide/hosting.md
index 61511e8..3214ed0 100644
--- a/guide/hosting.md
+++ b/guide/hosting.md
@@ -9,7 +9,11 @@ You can also build the slides into a self-hostable SPA:
 $ slidev build
 ```
 
-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.
+The generated application will be available under `dist/`.
+
+You can test the generated build using a web server (Apache, NGINX, Caddy...etc.) or in the project you can directly run: `npx vite preview`.
+
+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.
 
 ### Base Path
 
@@ -41,6 +45,33 @@ download: 'https://myside.com/my-talk.pdf'
 ---
 ```
 
+This can also be done with the CLI option `--download` (`boolean` only).
+
+```bash
+$ slidev build --download
+```
+
+When using the download option, you can also provide the export options:
+
+* By using [CLI export options](/guide/exporting.html)
+* Or [frontmatter export options](/custom/#frontmatter-configures)
+
+### Output directory
+
+You can change the output directory using `--out`.
+
+```bash
+$ slidev build --dir my-build-folder
+```
+
+### Watch mode
+
+By passing the `--watch` option the build will run in watch mode and will rebuild anytime the source changes.
+
+```bash
+$ slidev build --watch
+```
+
 ## Examples
 
 Here are a few examples of the exported SPA:

From b66a4ce1191b87de4c77e9317fce3a7c22d6c624 Mon Sep 17 00:00:00 2001
From: Tony Cabaye <tony.cabaye@smile.fr>
Date: Fri, 24 Feb 2023 15:13:04 +0100
Subject: [PATCH 29/42] feat: add built-in components doc and add buil-in menu
 (#116)

---
 .vitepress/config.js  |  26 +++--
 builtin/components.md | 220 +++++++++++++++++++++++++++++++++---------
 2 files changed, 190 insertions(+), 56 deletions(-)

diff --git a/.vitepress/config.js b/.vitepress/config.js
index 1f46141..5763eb9 100644
--- a/.vitepress/config.js
+++ b/.vitepress/config.js
@@ -182,6 +182,17 @@ const Customizations = [
   }
 ]
 
+const BuiltIn = [
+  {
+    text: 'Components',
+    link: '/builtin/components',
+  },
+  {
+    text: 'Layouts',
+    link: '/builtin/layouts',
+  },
+]
+
 const Resources = [
   {
     text: 'Showcases',
@@ -216,16 +227,7 @@ const slidebars = [
   },
   {
     text: 'Built-in',
-    children: [
-      {
-        text: 'Components',
-        link: '/builtin/components',
-      },
-      {
-        text: 'Layouts',
-        link: '/builtin/layouts',
-      },
-    ],
+    children: BuiltIn,
   },
 ]
 
@@ -282,6 +284,10 @@ module.exports = {
         text: 'Customize',
         items: Customizations,
       },
+      {
+        text: 'Built-in',
+        items: BuiltIn,
+      },
       {
         text: 'Resources',
         items: Resources,
diff --git a/builtin/components.md b/builtin/components.md
index 092ca7a..871db85 100644
--- a/builtin/components.md
+++ b/builtin/components.md
@@ -2,37 +2,90 @@
 
 ## Built-in Components
 
-> The documentations of this section is still working in progress. Before that, you can take a look at the [source code](https://github.com/slidevjs/slidev/blob/main/packages/client/builtin) directly.
+### `Arrow`
 
-### `Toc`
+Draw an arrow.
 
-Insert a Table Of Content.
+#### Usage
 
-If you want a slide to not appear in the `<Toc>` component, you can use in the front matter block of the slide:
-```yml
----
-hideInToc: true
----
-```
+~~~md
+<Arrow x1="10" y1="20" x2="100" y2="200" />
+~~~
 
-Titles are displayed using the [`<Titles>` component](#titles)
+Or:
+
+~~~md
+<Arrow v-bind="{ x1:10, y1:10, x2:200, y2:200 }" />
+~~~
+
+Parameters:
+
+* `x1` (`string | number`, required): start point x position
+* `y1` (`string | number`, required): start point y position
+* `x2` (`string | number`, required): end point x position
+* `y2` (`string | number`, required): end point x position
+* `width` (`string | number`, default: `2`): line width
+* `color` (`string`, default: `'currentColor'`): line color
+
+### `AutoFitText`
+
+> Experimental
+
+Box inside which the font size will automatically adapt to fit the content. Similar to PowerPoint or Keynote TextBox.
 
 #### Usage
 
 ~~~md
-<Toc />
+<AutoFitText :max="200" :min="100" modelValue="Some text"/>
 ~~~
 
 Parameters:
 
-* `columns` (`string | number`, default: `1`): The number of columns of the display
-* `listClass` (`string | string[]`, default: `''`): Classes to apply to the table of contents list
-* `maxDepth` (`string | number`, default: `Infinity`): The maximum depth level of title to display
-* `minDepth` (`string | number`, default: `1`): The minimum depth level of title to display
-* `mode` (`'all' | 'onlyCurrentTree'| 'onlySiblings'`, default: `'all'`):
-  * `'all'`: Display all items
-  * `'onlyCurrentTree'`: Display only items that are in current tree (active item, parents and children of active item)
-  * `'onlySiblings'`: Display only items that are in current tree and their direct siblings
+* `max` (`string | number`, default `100`): Maximum font size
+* `min` (`string | number`, default `30`): Minimum font size
+* `modelValue` (`string`, default `''`): text content
+
+### `LightOrDark`
+
+Use it to display one thing or another depending on the active light or dark theme.
+
+#### Usage
+
+Use it with the two named Slots `#dark` and `#light`:
+~~~md
+<LightOrDark>
+  <template #dark>Dark mode is on</template>
+  <template #light>Light mode is on</template>
+</LightOrDark>
+~~~
+
+Provided props on `LightOrDark` component will be available using scoped slot props:
+~~~md
+<LightOrDark width="100" alt="some image">
+  <template #dark="props">
+    <img src="/dark.png" v-bind="props"/>
+  </template>
+  <template #light="props">
+    <img src="/light.png" v-bind="props"/>
+  </template>
+</LightOrDark>
+~~~
+
+You can provide markdown in the slots, but you will need to surround the content with blank lines:
+~~~md
+<LightOrDark>
+  <template #dark>
+  
+![dark](/dark.png)
+
+  </template>
+  <template #light>
+  
+![light](/light.png)
+
+  </template>
+</LightOrDark>
+~~~
 
 ### `Link`
 
@@ -50,6 +103,42 @@ Parameters:
 * `to` (`string | number`): The path of the slide to navigate to (slides starts from `1`)
 * `title` (`string`): The title to display
 
+### `RenderWhen`
+
+Render slot only when the context match (for example when we are in presenter view).
+
+#### Usage
+
+~~~md
+<RenderWhen context="presenter">This will only be rendered in presenter view.</RenderWhen>
+~~~
+
+Context type: `'main' | 'slide' | 'overview' | 'presenter' | 'previewNext'`
+
+Parameters:
+
+* `context` (`Context | Context[]`): context or array of contexts you want the slot to be rendered
+
+### `SlideCurrentNo`
+
+Current slide number.
+
+#### Usage
+
+~~~md
+<SlideCurrentNo />
+~~~
+
+### `SlidesTotal`
+
+Total number of slides.
+
+#### Usage
+
+~~~md
+<SlidesTotal />
+~~~
+
 ### `Titles`
 
 Insert the main title from a slide parsed as HTML.
@@ -80,48 +169,87 @@ Parameters:
 
 * `no` (`string | number`): The number of the slide to display the title from (slides starts from `1`)
 
-### `LightOrDark`
+### `Toc`
 
-Use it to display one thing or another depending on the active light or dark theme.
+Insert a Table Of Content.
+
+If you want a slide to not appear in the `<Toc>` component, you can use in the front matter block of the slide:
+```yml
+---
+hideInToc: true
+---
+```
+
+Titles are displayed using the [`<Titles>` component](#titles)
 
 #### Usage
 
-Use it with the two named Slots `#dark` and `#light`:
 ~~~md
-<LightOrDark>
-  <template #dark>Dark mode is on</template>
-  <template #light>Light mode is on</template>
-</LightOrDark>
+<Toc />
 ~~~
 
-Provided props on `LightOrDark` component will be available using scoped slot props:
+Parameters:
+
+* `columns` (`string | number`, default: `1`): The number of columns of the display
+* `listClass` (`string | string[]`, default: `''`): Classes to apply to the table of contents list
+* `maxDepth` (`string | number`, default: `Infinity`): The maximum depth level of title to display
+* `minDepth` (`string | number`, default: `1`): The minimum depth level of title to display
+* `mode` (`'all' | 'onlyCurrentTree'| 'onlySiblings'`, default: `'all'`):
+  * `'all'`: Display all items
+  * `'onlyCurrentTree'`: Display only items that are in current tree (active item, parents and children of active item)
+  * `'onlySiblings'`: Display only items that are in current tree and their direct siblings
+
+### `Transform`
+
+Apply scaling or transforming to elements.
+
+#### Usage
+
 ~~~md
-<LightOrDark width="100" alt="some image">
-  <template #dark="props">
-    <img src="/dark.png" v-bind="props"/>
-  </template>
-  <template #light="props">
-    <img src="/light.png" v-bind="props"/>
-  </template>
-</LightOrDark>
+<Transform :scale="0.5">
+  <YourElements />
+</Transform>
 ~~~
 
-You can provide markdown in the slots, but you will need to surround the content with blank lines:
+Parameters:
+
+* `scale` (`number | string`, default `1`): transform scale value
+* `origin` (`string`, default `'top left'`): transform origin value
+
+### `Tweet`
+
+Embed a tweet.
+
+#### Usage
+
 ~~~md
-<LightOrDark>
-  <template #dark>
-  
-![dark](/dark.png)
+<Tweet id="20" />
+~~~
 
-  </template>
-  <template #light>
-  
-![light](/light.png)
+Parameters:
 
-  </template>
-</LightOrDark>
+* `id` (`number | string`, required): id of the tweet
+* `scale` (`number | string`, default `1`): transform scale value
+* `conversation` (`string`, default `'none'`): [tweet embed parameter](https://developer.twitter.com/en/docs/twitter-for-websites/embedded-tweets/guides/embedded-tweet-parameter-reference)
+
+### `VAfter`, `VClick` and `VClicks`
+
+See https://sli.dev/guide/animations.html
+### `Youtube`
+
+Embed a youtube video.
+
+#### Usage
+
+~~~md
+<Youtube id="luoMHjh-XcQ" />
 ~~~
 
+Parameters:
+
+* `id` (`string`, required): id of the youtube video
+* `width` (`number`): width of the video
+* `height` (`number`): height of the video
 
 ## Custom Components
 

From c6bd8fafb193e7f3bdd5b8c4dcb6aaa4b1f97ed8 Mon Sep 17 00:00:00 2001
From: Enzo Notario <enzo.notario@gmail.com>
Date: Sun, 5 Mar 2023 22:34:24 -0300
Subject: [PATCH 30/42] docs: fix typo in output directory (#118)

---
 guide/hosting.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/guide/hosting.md b/guide/hosting.md
index 3214ed0..2fa5563 100644
--- a/guide/hosting.md
+++ b/guide/hosting.md
@@ -61,7 +61,7 @@ When using the download option, you can also provide the export options:
 You can change the output directory using `--out`.
 
 ```bash
-$ slidev build --dir my-build-folder
+$ slidev build --out my-build-folder
 ```
 
 ### Watch mode

From 46f11048bbcb1c239aeff6e3b8061dbba0f779ed Mon Sep 17 00:00:00 2001
From: Elio Struyf <elio@struyfconsulting.be>
Date: Mon, 6 Mar 2023 07:00:16 +0100
Subject: [PATCH 31/42] docs: Added pnpm script (#117)

---
 guide/index.md | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/guide/index.md b/guide/index.md
index d69182d..dbae3b7 100644
--- a/guide/index.md
+++ b/guide/index.md
@@ -65,6 +65,12 @@ With Yarn:
 $ yarn create slidev
 ```
 
+With pnpm:
+
+```bash
+$ pnpm create slidev
+```
+
 Follow the prompts and start making your slides now! For more details about the markdown syntax, read through the [syntax guide](/guide/syntax).
 
 ### Command Line Interface

From 1317cbcaae63868c5cfbb66bcf4560be7f9c5fbf Mon Sep 17 00:00:00 2001
From: Tony Cabaye <tony.cabaye@smile.fr>
Date: Fri, 24 Mar 2023 19:14:15 +0100
Subject: [PATCH 32/42] docs: updates for 0.40.5 (#119)

---
 custom/index.md     | 21 +++++++++++++++++++++
 guide/animations.md | 15 +++++++++++++++
 guide/exporting.md  | 21 ++++++++++++++++++++-
 guide/hosting.md    | 16 ++++++++++++++++
 guide/syntax.md     | 20 ++++++++++++++++++++
 5 files changed, 92 insertions(+), 1 deletion(-)

diff --git a/custom/index.md b/custom/index.md
index 8b096b4..2be30ce 100644
--- a/custom/index.md
+++ b/custom/index.md
@@ -81,11 +81,32 @@ drawings:
   persist: false
   presenterOnly: false
   syncAll: true
+
+# HTML tag attributes
+htmlAttrs:
+  dir: 'ltr'
+  lang: 'en'
 ---
 ```
 
 Check out the [type definitions](https://github.com/slidevjs/slidev/blob/main/packages/types/src/config.ts) for more options.
 
+## Per slide configuration
+
+In addition, every slide accepts the following configuration in the Frontmatter block:
+
+* `clicks` (`number`): Custom clicks count (learn more [here](/guide/animations.html#custom-clicks-count)).
+* `disabled` (`boolean`): Completely disable the slide.
+* `hide` (`boolean`): Hide sub-slides when using `src` (learn more [here](/guide/syntax.html#multiple-entries)).
+* `hideInToc` (`boolean`): Hide the slide for the `<Toc>` components (learn more [here](/builtin/components.html#toc)).
+* `layout` (`string`): Defines the layout component applied to the slide (learn more [here](/guide/syntax.html#front-matter-layouts) and [here](/builtin/layouts.html)).
+* `level` (`number`): Override the title level for the `<Title>` and `<Toc>` components (only if `title` has also been declared, learn more [here](/builtin/components.html#titles)).
+* `preload` (`boolean`, default `true`): preload the next slide (learn more [here](/guide/animations.html#motion)).
+* `routeAlias` (`string`): create a route alias that can be used in the URL or with the `<Link>` component (learn more [here](/builtin/components.html#link)).
+* `src` (`string`): Includes a markdown file (learn more [here](/guide/syntax.html#multiple-entries)).
+* `title` (`string`): Override the title for the `<Title>` and `<Toc>` components (learn more [here](/builtin/components.html#titles)).
+* `transition` (`string | TransitionProps`): Defines the transition between the slide and the next one (learn more [here](/guide/animations.html#slide-transitions)).
+
 ## Directory Structure
 
 Slidev uses directory structure conventions to minimalize the configuration surface and make extensions in functionality flexible and intuitive.
diff --git a/guide/animations.md b/guide/animations.md
index ca0de23..fabf6a8 100644
--- a/guide/animations.md
+++ b/guide/animations.md
@@ -60,6 +60,21 @@ Same as `v-click` but instead of making the element appear, it makes the element
 
 An item will become visible each time you click "next".
 
+It accepts a `depth` props for nested list:
+
+```md
+<v-clicks depth="2">
+
+- Item 1
+  - Item 1.1
+  - Item 1.2
+- Item 2
+  - Item 2.1
+  - Item 2.2
+
+</v-clicks>
+```
+
 ### Custom Clicks Count
 
 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:
diff --git a/guide/exporting.md b/guide/exporting.md
index 745d020..a3a2179 100644
--- a/guide/exporting.md
+++ b/guide/exporting.md
@@ -97,7 +97,24 @@ $ slidev export --range 1,6-8,10
 
 This option accepts both specific slide numbers and ranges.
 
-The example above would export slides 1,6,7,8, and 10. 
+The example above would export slides 1,6,7,8, and 10.
+
+
+### Multiple entries
+
+You can also export multiple slides at once.
+
+```bash
+$ slidev export slides1.md slides1.md
+```
+
+Or
+
+```bash
+$ slidev export *.md
+```
+
+In this case, each input file will generate its own PDf file.
 
 ## Presenter notes
 
@@ -109,6 +126,8 @@ Export only the presenter notes (the last comment block for each slide) into a t
 $ slidev export-notes
 ```
 
+This command also accept multiple entries like for the [export command](#multiple-entries)
+
 ## Single-Page Application (SPA)
 
 See [Static Hosting](/guide/hosting).
diff --git a/guide/hosting.md b/guide/hosting.md
index 2fa5563..e00e493 100644
--- a/guide/hosting.md
+++ b/guide/hosting.md
@@ -72,6 +72,22 @@ By passing the `--watch` option the build will run in watch mode and will rebuil
 $ slidev build --watch
 ```
 
+### Multiple entries
+
+You can also build multiple slides at once.
+
+```bash
+$ slidev build slides1.md slides1.md
+```
+
+Or
+
+```bash
+$ slidev build *.md
+```
+
+In this case, each input file will generate a folder containing the build in the output directory.
+
 ## Examples
 
 Here are a few examples of the exported SPA:
diff --git a/guide/syntax.md b/guide/syntax.md
index b5a832d..2126a93 100644
--- a/guide/syntax.md
+++ b/guide/syntax.md
@@ -145,6 +145,26 @@ console.log('HelloWorld')
 
 Learn more about [configuring Monaco](/custom/config-monaco).
 
+### Monaco diff
+
+Monaco can also generate a diff between two code blocks. Use `{monaco-diff}` to turn the block into a [diff Monaco editor](https://microsoft.github.io/monaco-editor/playground.html?source=v0.36.1#example-creating-the-diffeditor-multi-line-example) and use `~~~` to separate both original and modified version of the code!
+
+```md
+//```ts {monaco-diff}
+This line is removed on the right.
+just some text
+abcd
+efgh
+Some more text
+~~~
+just some text
+abcz
+zzzzefgh
+Some more text.
+This line is removed on the left.
+//```
+```
+
 ## Embedded Styles
 
 You can use `<style>` tag in your Markdown directly to override styles for the **current slide**.

From c2931a4b1de23de51866bfc76636cc1667f323b4 Mon Sep 17 00:00:00 2001
From: imanmalekian31 <58827166+imanmalekian31@users.noreply.github.com>
Date: Mon, 3 Apr 2023 11:11:27 +0330
Subject: [PATCH 33/42] ci: update checkout and setup-node (#120)

---
 guide/hosting.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/guide/hosting.md b/guide/hosting.md
index e00e493..788aa26 100644
--- a/guide/hosting.md
+++ b/guide/hosting.md
@@ -154,8 +154,8 @@ jobs:
   deploy:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
         with:
           node-version: '14'
       - name: Install dependencies

From 6a80cc0c94cf8b34952ae82166e50b0d7a05f1fa Mon Sep 17 00:00:00 2001
From: matttrice <3946949+matttrice@users.noreply.github.com>
Date: Tue, 4 Apr 2023 01:09:17 -0600
Subject: [PATCH 34/42] fix: replace commas with underscores in atomic-css
 (#122)

---
 guide/faq.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/guide/faq.md b/guide/faq.md
index 1918a3c..0db5d8d 100644
--- a/guide/faq.md
+++ b/guide/faq.md
@@ -24,7 +24,7 @@ The second column
 Go further, you can customize the size of each column like:
 
 ```html
-<div class="grid grid-cols-[200px,1fr,10%] gap-4">
+<div class="grid grid-cols-[200px_1fr_10%] gap-4">
 <div>
 
 The first column (200px)

From 86744c7f6c0257bbc850cc76bc921ff08eb82107 Mon Sep 17 00:00:00 2001
From: matttrice <3946949+matttrice@users.noreply.github.com>
Date: Tue, 4 Apr 2023 07:15:44 -0600
Subject: [PATCH 35/42] docs: grids-cols to grid-cols (#121)

---
 custom/config-windicss.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/custom/config-windicss.md b/custom/config-windicss.md
index ef399d6..58e4db9 100644
--- a/custom/config-windicss.md
+++ b/custom/config-windicss.md
@@ -7,7 +7,7 @@ Markdown naturally supports embedded HTML markups. You can therefore style your
 For example:
 
 ```html
-<div class="grid pt-4 gap-4 grids-cols-[100px,1fr]">
+<div class="grid pt-4 gap-4 grid-cols-[100px,1fr]">
 
 ### Name
 

From 7acc3394a2458462d04fe918c5d45c5414a749e6 Mon Sep 17 00:00:00 2001
From: Timo Zander <timo---zander@live.de>
Date: Thu, 18 May 2023 11:16:35 +0200
Subject: [PATCH 36/42] docs: add pnpm to install.md instructions (#123)

---
 guide/install.md | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/guide/install.md b/guide/install.md
index 6b7364c..772e527 100644
--- a/guide/install.md
+++ b/guide/install.md
@@ -18,6 +18,12 @@ With Yarn:
 $ yarn create slidev
 ```
 
+With PNPM:
+
+```bash
+$ pnpm create slidev
+```
+
 Follow the prompts and it will open up the slideshow at `http://localhost:3030/` automatically for you.
 
 It also contains the basic setup and a short demo with instructions on how to get started with Slidev.

From d29625cb3633171f7cf2087a777e68a1cd76ea6f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Br=C3=BAn=C3=B3=20Salomon?=
 <35275408+bru02@users.noreply.github.com>
Date: Sun, 21 May 2023 14:21:14 +0200
Subject: [PATCH 37/42] docs: align theme docs with types (#124)

---
 themes/write-a-theme.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/themes/write-a-theme.md b/themes/write-a-theme.md
index 45658dc..5dae9fb 100644
--- a/themes/write-a-theme.md
+++ b/themes/write-a-theme.md
@@ -64,7 +64,7 @@ A theme can provide default [configurations](/custom/#frontmatter-configures) vi
 // package.json
 {
   "slidev": {
-    "default": {
+    "defaults": {
       "aspectRatio": "16/9",
       "canvasWidth": 980,
       "fonts": {
@@ -128,7 +128,7 @@ Also, remember to specify the supported highlighters in your `package.json`
 // package.json
 {
   "slidev": {
-    "highlighter": "shiki" // or "prism" or "all"
+    "highlighter": "shiki" // or "prism" or "both"
   }
 }
 ```

From 19d3ad78801d41f8e35b2c2f4cbeecc8b90afaea Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Fri, 26 May 2023 21:50:08 +0200
Subject: [PATCH 38/42] feat: configuring UnoCSS

---
 .vitepress/config.js          |  4 ++++
 addons/write-an-addon.md      |  2 +-
 custom/config-unocss.md       | 44 +++++++++++++++++++++++++++++++++++
 custom/config-windicss.md     | 13 ++++++++++-
 custom/directory-structure.md |  2 +-
 custom/index.md               |  3 ++-
 guide/faq.md                  |  2 +-
 guide/index.md                |  2 +-
 guide/syntax.md               |  4 ++--
 guide/why.md                  |  2 +-
 themes/write-a-theme.md       |  2 +-
 11 files changed, 70 insertions(+), 10 deletions(-)
 create mode 100644 custom/config-unocss.md

diff --git a/.vitepress/config.js b/.vitepress/config.js
index 5763eb9..ee680b8 100644
--- a/.vitepress/config.js
+++ b/.vitepress/config.js
@@ -148,6 +148,10 @@ const Customizations = [
     text: 'Configure Vite',
     link: '/custom/config-vite',
   },
+  {
+    text: 'Configure UnoCSS',
+    link: '/custom/config-unocss',
+  },
   {
     text: 'Configure Windi CSS',
     link: '/custom/config-windicss',
diff --git a/addons/write-an-addon.md b/addons/write-an-addon.md
index 5a9b250..13d3a1a 100644
--- a/addons/write-an-addon.md
+++ b/addons/write-an-addon.md
@@ -9,7 +9,7 @@ An addon can contribute to the following points:
 - Global styles (use with caution has it is more the role of [themes](/themes/use))
 - Provide custom layouts or override the existing one
 - Provide custom components or override the existing one
-- Extend Windi CSS configurations
+- Extend UnoCSS/Windi CSS configurations
 - Configure tools like Monaco and Prism
 
 ## Conventions
diff --git a/custom/config-unocss.md b/custom/config-unocss.md
new file mode 100644
index 0000000..9d9cad1
--- /dev/null
+++ b/custom/config-unocss.md
@@ -0,0 +1,44 @@
+# Configure UnoCSS
+
+<Environment type="node" />
+
+[UnoCSS](https://unocss.dev) is now the default CSS framework for Slidev since v0.42.0. UnoCSS is an fast atomic CSS engine that has full flexibility and extensibility.
+
+By default, Slidev enables the following presets out-of-box:
+
+- [@unocss/preset-uno](https://unocss.dev/presets/uno) - Tailwind / Windi CSS compatible utilities
+- [@unocss/preset-attributify](https://unocss.dev/presets/attributify) - Attributify mode
+- [@unocss/preset-icons](https://unocss.dev/presets/icons) - Use any icons as class
+- [@unocss/preset-web-fonts](https://unocss.dev/presets/web-fonts) - Use web fonts at ease
+- [@unocss/transformer-directives](https://unocss.dev/transformers/directives) - Use `@apply` in CSS
+
+You can therefore style your content the way you want. For example:
+
+```html
+<div class="grid pt-4 gap-4 grid-cols-[100px,1fr]">
+
+### Name
+
+- Item 1
+- Item 2
+
+</div>
+```
+
+## Configurations
+
+You can create `uno.config.ts` under the root of your project to extend the builtin configurations
+
+```ts
+import { defineConfig } from 'unocss'
+
+export default defineConfig({
+  shortcuts: {
+    // custom the default background
+    'bg-main': 'bg-white text-[#181818] dark:(bg-[#121212] text-[#ddd])',
+  },
+  // ...
+})
+```
+
+Learn more about [UnoCSS configurations](https://unocss.dev/guide/config-file)
diff --git a/custom/config-windicss.md b/custom/config-windicss.md
index 58e4db9..901839b 100644
--- a/custom/config-windicss.md
+++ b/custom/config-windicss.md
@@ -2,7 +2,18 @@
 
 <Environment type="node" />
 
-Markdown naturally supports embedded HTML markups. You can therefore style your content the way you want. To provide some convenience, we have [Windi CSS](https://github.com/windicss/windicss) built-in, so you can style markup directly using class utilities. 
+::: warning
+Since Slidev v0.42.0, [UnoCSS](/custom/config-unocss) become the default CSS framework for Slidev.
+
+You can still use Windi CSS by setting `css: windicss` in the frontmatter.
+```md
+---
+css: windicss
+---
+```
+:::
+
+Markdown naturally supports embedded HTML markups. You can therefore style your content the way you want.
 
 For example:
 
diff --git a/custom/directory-structure.md b/custom/directory-structure.md
index 9ab9333..3e7c7e2 100644
--- a/custom/directory-structure.md
+++ b/custom/directory-structure.md
@@ -115,7 +115,7 @@ import './code.css'
 import './layouts.css'
 ```
 
-Styles will be processed by [Windi CSS](https://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:
+Styles will be processed by [UnoCSS](https://unocss.dev/) 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:
 
 ```less
 .slidev-layout {
diff --git a/custom/index.md b/custom/index.md
index 2be30ce..70305cb 100644
--- a/custom/index.md
+++ b/custom/index.md
@@ -1,6 +1,6 @@
 # Customizations
 
-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.)
+Slidev is fully customizable, from styling to tooling configurations. It allows you to configure the tools underneath ([Vite](/custom/config-vite), [UnoCSS](/custom/config-unocss), [Monaco](/custom/config-monaco), etc.)
 
 ## Frontmatter Configures
 
@@ -118,6 +118,7 @@ Refer to the [Directory Structure](/custom/directory-structure) section.
 - [Highlighters](/custom/highlighters)
 - [Configure Vue](/custom/config-vue)
 - [Configure Vite](/custom/config-vite)
+- [Configure UnoCSS](/custom/config-unocss)
 - [Configure Windi CSS](/custom/config-windicss)
 - [Configure Monaco](/custom/config-monaco)
 - [Configure KaTeX](/custom/config-katex)
diff --git a/guide/faq.md b/guide/faq.md
index 0db5d8d..7065180 100644
--- a/guide/faq.md
+++ b/guide/faq.md
@@ -4,7 +4,7 @@
 
 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.
 
-Since we have [Windi CSS](https://windicss.org/) built-in, here is one simple way for you to reference:
+Since we have [UnoCSS](https://windicss.org/) built-in, here is one simple way for you to reference:
 
 ```html
 <div class="grid grid-cols-2 gap-4">
diff --git a/guide/index.md b/guide/index.md
index dbae3b7..50c475a 100644
--- a/guide/index.md
+++ b/guide/index.md
@@ -13,7 +13,7 @@ You can learn more about the rationale behind the project in the [Why Slidev](/g
 - 📝 [**Markdown-based**](/guide/syntax.html) - use your favorite editors and workflow
 - 🧑‍💻 [**Developer Friendly**](/guide/syntax.html#code-blocks) - built-in syntax highlighting, live coding, etc.
 - 🎨 [**Themable**](/themes/gallery.html) - theme can be shared and used with npm packages
-- 🌈 [**Stylish**](/guide/syntax.html#embedded-styles) - on-demand utilities via [Windi CSS](https://windicss.org/) or [UnoCSS](https://github.com/unocss/unocss).
+- 🌈 [**Stylish**](/guide/syntax.html#embedded-styles) - on-demand utilities via [UnoCSS](https://github.com/unocss/unocss) or [Windi CSS](https://windicss.org/).
 - 🤹 [**Interactive**](/custom/directory-structure.html#components) - embedding Vue components seamlessly
 - 🎙 [**Presenter Mode**](/guide/presenter-mode.html) - use another window, or even your phone to control your slides
 - 🎨 [**Drawing**](/guide/drawing.html) - draw and annotate on your slides
diff --git a/guide/syntax.md b/guide/syntax.md
index 2126a93..c0805c9 100644
--- a/guide/syntax.md
+++ b/guide/syntax.md
@@ -2,7 +2,7 @@
 
 Slides are written within **a single markdown file** (by default `./slides.md`). 
 
-You can use [the Markdown features](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet) as you normally would, with the additional support of inlined HTML and Vue Components. Styling using [Windi CSS](https://windicss.org) is also supported. Use `---` padded with a new line to separate your slides. 
+You can use [the Markdown features](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet) as you normally would, with the additional support of inlined HTML and Vue Components. Styling using [UnoCSS](/custom/config-unocss) is also supported. Use `---` padded with a new line to separate your slides. 
 
 ~~~md
 # Slidev
@@ -185,7 +185,7 @@ h1 {
 
 `<style>` tag in Markdown is always [scoped](https://vuejs.org/api/sfc-css-features.html#scoped-css). As an outstanding result, a selector with the child combinator (`.a > .b`) is unusable as such; see the previous link. To have global style overrides, check out the [customization section](/custom/directory-structure#style).
 
-Powered by [Windi CSS](https://windicss.org), you can directly use nested css and [directives](https://windicss.org/features/directives.html) (e.g. `@apply`)
+Powered by [UnoCSS](/custom/config-unocss), you can directly use nested css and [directives](https://windicss.org/features/directives.html) (e.g. `@apply`)
 
 ```md
 # Slidev
diff --git a/guide/why.md b/guide/why.md
index ad773a3..80d7711 100644
--- a/guide/why.md
+++ b/guide/why.md
@@ -32,7 +32,7 @@ Learn more about [highlighters](/custom/highlighters) and [Monaco configuration]
 
 ## Fast
 
-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**.
+Slidev is powered by [Vite](https://vitejs.dev/), [Vue 3](https://v3.vuejs.org/) and [UnoCSS](https://unocss.dev/), which give you the most wonderful authoring experience. Every change you made will reflect to your slides **instantly**.
 
 Find more about [our tech stack](/guide/#tech-stack).
 
diff --git a/themes/write-a-theme.md b/themes/write-a-theme.md
index 5dae9fb..c01822d 100644
--- a/themes/write-a-theme.md
+++ b/themes/write-a-theme.md
@@ -16,7 +16,7 @@ A theme can contribute to the following points:
 - Provide default configurations (fonts, color schema, highlighters, etc.)
 - Provide custom layouts or override the existing one
 - Provide custom components or override the existing one
-- Extend Windi CSS configurations
+- Extend UnoCSS/Windi CSS configurations
 - Configure tools like Monaco and Prism
 
 ## Conventions

From e2d97fbd68e86abf383c60d24a33b740d2b414d4 Mon Sep 17 00:00:00 2001
From: Yusuke Nemoto <kaakaa@users.noreply.github.com>
Date: Mon, 29 May 2023 16:07:33 +0900
Subject: [PATCH 39/42] docs: fix incorrect option name (#125)

---
 guide/install.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/guide/install.md b/guide/install.md
index 772e527..cd5d6c0 100644
--- a/guide/install.md
+++ b/guide/install.md
@@ -202,7 +202,7 @@ Export slides to PDF (or other format).
 Options:
 
 * `--output` (`string`, default: use `exportFilename` (see https://sli.dev/custom/#frontmatter-configures) or use `[entry]-export`): path to the output.
-* `--base` (`'pdf', 'png', 'md'`, default: `'pdf'`): output format.
+* `--format` (`'pdf', 'png', 'md'`, default: `'pdf'`): output format.
 * `--timeout` (`number`, default: `30000`): timeout for rendering the print page (see https://playwright.dev/docs/api/class-page#page-goto).
 * `--range` (`string`): page ranges to export (example: `'1,4-5,6'`).
 * `--dark` (`boolean`, default: `false`): export as dark theme.

From 44920cd4f45ab8edf0e33ec63ba535a44d6418a2 Mon Sep 17 00:00:00 2001
From: Ferran Celades <ferran.celades@hotmail.com>
Date: Wed, 31 May 2023 15:40:15 +0200
Subject: [PATCH 40/42] docs: support setting startLines for codeblocks slidev
 (#126)

---
 guide/syntax.md | 28 +++++++++++++++++++++++++++-
 1 file changed, 27 insertions(+), 1 deletion(-)

diff --git a/guide/syntax.md b/guide/syntax.md
index c0805c9..979c472 100644
--- a/guide/syntax.md
+++ b/guide/syntax.md
@@ -76,7 +76,7 @@ We support [Prism](https://prismjs.com) and [Shiki](https://github.com/shikijs/s
 
 ### Line Highlighting
 
-To highlight specific lines, simply add line numbers within bracket `{}`. Line numbers start counting from 1.
+To highlight specific lines, simply add line numbers within bracket `{}`. Line numbers start counting from 1 by default.
 
 ~~~ts
 //```ts {2,3}
@@ -89,6 +89,32 @@ function add(
 //```
 ~~~
 
+You can enable line number to all slides by setting `lineNumbers: true` on the config or enable each code block individually by setting `lines:true`. In case you want to disable the numbering for an specific block when `lineNumbers: true` you can set `lines:false` for that block:
+
+~~~ts
+//```ts {2,3} {lines:true}
+function add(
+  a: Ref<number> | number,
+  b: Ref<number> | number
+) {
+  return computed(() => unref(a) + unref(b))
+}
+//```
+~~~
+
+You can also set the starting line for each code block and highlight the lines accordingly, defaults to 1:
+
+~~~ts
+//```ts {6,7} {lines:true, startLine:5}
+function add(
+  a: Ref<number> | number,
+  b: Ref<number> | number
+) {
+  return computed(() => unref(a) + unref(b))
+}
+//```
+~~~
+
 To change the highlight in multiple steps, you can use `|` to separate them. For example
 
 ~~~ts

From 281e164b346b52adc3a71e21d96d17965b799d59 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B6=A6=E5=BF=83?=
 <61275421+alephpi@users.noreply.github.com>
Date: Wed, 14 Jun 2023 15:06:39 +0200
Subject: [PATCH 41/42] fix: IPA correction (#127)

---
 guide/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/guide/index.md b/guide/index.md
index 50c475a..e43e32d 100644
--- a/guide/index.md
+++ b/guide/index.md
@@ -2,7 +2,7 @@
 
 ## Overview
 
-Slidev <sup>(slide + dev, **/slʌɪdɪv/**)</sup> 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.
+Slidev <sup>(slide + dev, **/slaɪdɪv/**)</sup> 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.
 
 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.
 

From c608c011ffbff72d267a0c074a4bfa5ff4b601a7 Mon Sep 17 00:00:00 2001
From: Yijie Mao <myj226@gmail.com>
Date: Tue, 11 Jul 2023 20:49:11 +0800
Subject: [PATCH 42/42] fix: FAQ page UnoCSS url (#129)

---
 guide/faq.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/guide/faq.md b/guide/faq.md
index 7065180..b05bfa1 100644
--- a/guide/faq.md
+++ b/guide/faq.md
@@ -4,7 +4,7 @@
 
 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.
 
-Since we have [UnoCSS](https://windicss.org/) built-in, here is one simple way for you to reference:
+Since we have [UnoCSS](https://unocss.dev/) built-in, here is one simple way for you to reference:
 
 ```html
 <div class="grid grid-cols-2 gap-4">