diff --git a/.vitepress/config.js b/.vitepress/config.js
index adf4ecf..99aa937 100755
--- a/.vitepress/config.js
+++ b/.vitepress/config.js
@@ -149,7 +149,15 @@ const Customizations = [
     link: '/custom/config-vite',
   },
   {
+<<<<<<< HEAD
     text: 'Configurer Windi CSS',
+=======
+    text: 'Configure UnoCSS',
+    link: '/custom/config-unocss',
+  },
+  {
+    text: 'Configure Windi CSS',
+>>>>>>> c608c011ffbff72d267a0c074a4bfa5ff4b601a7
     link: '/custom/config-windicss',
   },
   {
@@ -165,7 +173,15 @@ const Customizations = [
     link: '/custom/config-mermaid',
   },
   {
+<<<<<<< HEAD
     text: 'Configurer les Raccourcis',
+=======
+    text: 'Configure Parser',
+    link: '/custom/config-parser',
+  },
+  {
+    text: 'Configure Shortcuts',
+>>>>>>> c608c011ffbff72d267a0c074a4bfa5ff4b601a7
     link: '/custom/config-shortcuts',
   },
   {
@@ -178,6 +194,17 @@ const Customizations = [
   }
 ]
 
+const BuiltIn = [
+  {
+    text: 'Components',
+    link: '/builtin/components',
+  },
+  {
+    text: 'Layouts',
+    link: '/builtin/layouts',
+  },
+]
+
 const Resources = [
   {
     text: 'Vitrines',
@@ -211,6 +238,7 @@ const slidebars = [
     children: Customizations,
   },
   {
+<<<<<<< HEAD
     text: 'Intégrations',
     children: [
       {
@@ -222,6 +250,10 @@ const slidebars = [
         link: '/builtin/layouts',
       },
     ],
+=======
+    text: 'Built-in',
+    children: BuiltIn,
+>>>>>>> c608c011ffbff72d267a0c074a4bfa5ff4b601a7
   },
 ]
 
@@ -252,7 +284,8 @@ module.exports = {
     editLinkText: 'Suggérer un changement sur cette page',
 
     algolia: {
-      apiKey: '1a5c5a504139c58f428974c78c55291d',
+      appId: 'LCBV6MIFS6',
+      apiKey: '1ff173fe73b20edc962c1c24c0b1c160',
       indexName: 'slidev',
       searchParameters: {
         // for translations maintainers: change the filter to your locale code (subdomain name)
@@ -278,7 +311,15 @@ module.exports = {
         items: Customizations,
       },
       {
+<<<<<<< HEAD
         text: 'Ressources',
+=======
+        text: 'Built-in',
+        items: BuiltIn,
+      },
+      {
+        text: 'Resources',
+>>>>>>> c608c011ffbff72d267a0c074a4bfa5ff4b601a7
         items: Resources,
       },
       {
diff --git a/.vitepress/showcases.ts b/.vitepress/showcases.ts
index 7c4c6fa..dbaac2d 100755
--- 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',
@@ -131,6 +131,52 @@ 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',
+  },
+  {
+    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',
+  },
+  {
+    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',
+  },
+  {
+    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!
   {
diff --git a/.vitepress/theme/components/AlgoliaSearchBox.vue b/.vitepress/theme/components/AlgoliaSearchBox.vue
index b9a5b7f..9561cb3 100755
--- a/.vitepress/theme/components/AlgoliaSearchBox.vue
+++ b/.vitepress/theme/components/AlgoliaSearchBox.vue
@@ -4,126 +4,76 @@
 
 <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)
 })
 
-function isSpecialClick(event: MouseEvent) {
-  return (
-    event.button === 1
-    || event.altKey
-    || event.ctrlKey
-    || event.metaKey
-    || event.shiftKey
-  )
-}
+// @ts-expect-error
+const docsearch$ = docsearch.default ?? docsearch
+type DocSearchProps = Parameters<typeof docsearch$>[0]
 
-function getRelativePath(absoluteUrl: string) {
-  const { pathname, hash } = new URL(absoluteUrl)
-
-  return pathname + hash
-}
+function initialize(userOptions: any) {
+  // 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)
+        }
+      }
+    },
 
-function update(options: any) {
-  if (vm && vm.vnode.el) {
-    vm.vnode.el.innerHTML
-      = '<div class="algolia-search-box" id="docsearch"></div>'
-    initialize(options)
-  }
+    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 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,
-          },
-        }
-      },
-    }),
+function getRelativePath(absoluteUrl: string) {
+  const { pathname, hash } = new URL(absoluteUrl)
+  return (
+    pathname.replace(
+      /\.html$/,
+      // @ts-expect-error
+      site.value.cleanUrls === 'disabled' ? '.html' : ''
+    ) + hash
   )
 }
 </script>
diff --git a/.vitepress/theme/components/Tweet.vue b/.vitepress/theme/components/Tweet.vue
index a7bc116..cd307a2 100755
--- 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 100755
--- 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 100755
--- 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))?$/, '') || '/'
 }
diff --git a/.vitepress/themes.ts b/.vitepress/themes.ts
index 6e504da..e887cd4 100755
--- a/.vitepress/themes.ts
+++ b/.vitepress/themes.ts
@@ -359,6 +359,73 @@ 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',
+    ],
+  },
+  {
+    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'
+    ],
+  },
+  {
+    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: '',
diff --git a/addons/write-an-addon.md b/addons/write-an-addon.md
index f01ad6a..29277e3 100644
--- a/addons/write-an-addon.md
+++ b/addons/write-an-addon.md
@@ -6,11 +6,19 @@
 
 Un addon peut contribuer aux points suivants :
 
+<<<<<<< HEAD
 - Styles globaux (à utiliser avec prudence c'est plus le rôle de [themes](/themes/use))
 - Fournir des mises en page personnalisées ou remplacer celle existante
 - Fournir des composants personnalisés ou remplacer celui existant
 - Étendre les configurations Windi CSS
 - Configurer des outils comme Monaco et Prism
+=======
+- 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 UnoCSS/Windi CSS configurations
+- Configure tools like Monaco and Prism
+>>>>>>> c608c011ffbff72d267a0c074a4bfa5ff4b601a7
 
 ## Conventions
 
diff --git a/builtin/components.md b/builtin/components.md
index 72e9750..b6173f8 100755
--- a/builtin/components.md
+++ b/builtin/components.md
@@ -2,6 +2,7 @@
 
 ## Composants Intégrés
 
+<<<<<<< HEAD
 > Les documentations de cette section sont toujours en cours d'élaboration. Avant cela, vous pouvez directement jeter un coup d'oeil au [code source](https://github.com/slidevjs/slidev/blob/main/packages/client/builtin)
 
 ### `Toc`
@@ -16,15 +17,27 @@ hideInToc: true
 ```
 
 Les titres sont affichés à l'aide du composant [`<Titres>`](#titles)
+=======
+### `Arrow`
+
+Draw an arrow.
+>>>>>>> c608c011ffbff72d267a0c074a4bfa5ff4b601a7
 
 #### Usage
 
 ~~~md
-<Toc />
+<Arrow x1="10" y1="20" x2="100" y2="200" />
+~~~
+
+Or:
+
+~~~md
+<Arrow v-bind="{ x1:10, y1:10, x2:200, y2:200 }" />
 ~~~
 
 Parameters:
 
+<<<<<<< HEAD
 * `columns` (`string | number`, défaut : `1`): Le nombre de colonnes de l'affichage
 * `listClass` (`string | string[]`, défaut : `''`): Classes à appliquer à la table des matières
 * `maxDepth` (`string | number`, défaut : `Infinity`): Le niveau de profondeur maximum du titre à afficher
@@ -33,6 +46,74 @@ Parameters:
   * `'all'`: Afficher tous les articles
   * `'onlyCurrentTree'`: Afficher uniquement les éléments qui sont dans l'arborescence actuelle (élément actif, parents et enfants de l'élément actif)
   * `'onlySiblings'`: Afficher uniquement les éléments qui sont dans l'arborescence actuelle et leurs frères et sœurs directs
+=======
+* `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
+<AutoFitText :max="200" :min="100" modelValue="Some text"/>
+~~~
+
+Parameters:
+
+* `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>
+~~~
+>>>>>>> c608c011ffbff72d267a0c074a4bfa5ff4b601a7
 
 ### `Link`
 
@@ -50,6 +131,42 @@ Paramètres:
 * `to` (`string | number`): Le chemin de la diapositive vers laquelle naviguer (les diapositives commencent à partir de "1")
 * `title` (`string`): Le titre à afficher
 
+### `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`
 
 Insérez le titre principal d'une diapositive analysée au format HTML.
@@ -80,7 +197,93 @@ Paramètres:
 
 * `no` (`string | number`): Le numéro de la diapositive à partir de laquelle afficher le titre (les diapositives commencent à partir de `1`)
 
+<<<<<<< HEAD
 ## Composants Customisés
+=======
+### `Toc`
+
+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
+
+~~~md
+<Toc />
+~~~
+
+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
+<Transform :scale="0.5">
+  <YourElements />
+</Transform>
+~~~
+
+Parameters:
+
+* `scale` (`number | string`, default `1`): transform scale value
+* `origin` (`string`, default `'top left'`): transform origin value
+
+### `Tweet`
+
+Embed a tweet.
+
+#### Usage
+
+~~~md
+<Tweet id="20" />
+~~~
+
+Parameters:
+
+* `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
+>>>>>>> c608c011ffbff72d267a0c074a4bfa5ff4b601a7
 
 Créer un répertoire `components/` sous la racine de votre projet, et placez simplement vos composants Vue personnalisés sous celui-ci, puis vous pouvez l'utiliser avec le même nom dans votre fichier markdown!
 
diff --git a/custom/config-mermaid.md b/custom/config-mermaid.md
index 5372781..f6a144c 100755
--- a/custom/config-mermaid.md
+++ b/custom/config-mermaid.md
@@ -14,4 +14,38 @@ export default defineMermaidSetup(() => {
 })
 ```
 
+<<<<<<< HEAD
 Avec la configuration, vous pouvez fournir un paramètre par défaut personnalisé pour [Mermaid](https://mermaid-js.github.io/). Reportez-vous aux définitions de type et à sa documentation pour plus de détails.
+=======
+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.
+>>>>>>> c608c011ffbff72d267a0c074a4bfa5ff4b601a7
diff --git a/custom/config-parser.md b/custom/config-parser.md
new file mode 100644
index 0000000..098b359
--- /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, headmatter}) => {
+  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 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.
+  - 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(() => {
+  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(() => {
+  return [
+    {
+      transformSlide(content, frontmatter) {
+        if ('_scale' in frontmatter) {
+          return [
+            `<Transform :scale=${frontmatter['_scale']}>`,
+            '',
+            content,
+            '',
+            '</Transform>'
+          ].join('\n')
+        }
+      },
+    },
+  ]
+})
+```
+
+And that's it.
diff --git a/custom/config-shortcuts.md b/custom/config-shortcuts.md
index 3fab6a0..62ec59d 100755
--- a/custom/config-shortcuts.md
+++ b/custom/config-shortcuts.md
@@ -6,7 +6,13 @@
 
 <Environment type="client" />
 
+<<<<<<< HEAD
 Créez `./setup/shortcuts.ts` avec le contenu suivant :
+=======
+## Getting started
+
+Create `./setup/shortcuts.ts` with the following content:
+>>>>>>> c608c011ffbff72d267a0c074a4bfa5ff4b601a7
 
 ```ts
 import type { NavOperations, ShortcutOptions } from '@slidev/types'
@@ -33,7 +39,13 @@ Avec la configuration, vous pouvez fournir le paramètre personnalisé pour les
 
 La fonction de configuration reçoit un objet avec certaines méthodes de navigation et renvoie un tableau contenant une configuration de raccourci. Reportez-vous aux définitions de type pour plus de détails.
 
+<<<<<<< HEAD
 Le type `key` n'autorise que les chaînes, mais vous pouvez toujours lier plusieurs clés en utilisant la convention suivante :
+=======
+## Advanced key binding
+
+The `key` type only allows for strings, but you can still bind multiple keys by using following convention:
+>>>>>>> c608c011ffbff72d267a0c074a4bfa5ff4b601a7
 
 ```ts
 import type { NavOperations, ShortcutOptions } from '@slidev/types'
@@ -51,4 +63,30 @@ export default defineShortcutsSetup((nav: NavOperations, base: ShortcutOptions[]
 })
 ```
 
+<<<<<<< HEAD
 Reportez-vous à [useMagicKeys | VueUse](https://vueuse.org/core/useMagicKeys/) pour plus de détails sur l'événement de pression de touche.
+=======
+## 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.
+>>>>>>> c608c011ffbff72d267a0c074a4bfa5ff4b601a7
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 170aba0..772776a 100755
--- a/custom/config-windicss.md
+++ b/custom/config-windicss.md
@@ -2,12 +2,27 @@
 
 <Environment type="node" />
 
+<<<<<<< HEAD
 Markdown prend naturellement en charge les balises HTML intégrées. Vous pouvez donc styliser votre contenu comme vous le souhaitez. Pour plus de commodité, nous avons [Windi CSS](https://github.com/windicss/windicss) intégré, vous pouvez donc styliser le balisage directement à l'aide des utilitaires de classe.
+=======
+::: 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.
+>>>>>>> c608c011ffbff72d267a0c074a4bfa5ff4b601a7
 
 Par exemple :
 
 ```html
-<div class="grid pt-4 gap-4 grids-cols-[100px,1fr]">
+<div class="grid pt-4 gap-4 grid-cols-[100px,1fr]">
 
 ### Nom
 
diff --git a/custom/directory-structure.md b/custom/directory-structure.md
index c9457b3..a9796e1 100755
--- a/custom/directory-structure.md
+++ b/custom/directory-structure.md
@@ -115,7 +115,11 @@ import './code.css'
 import './layouts.css'
 ```
 
+<<<<<<< HEAD
 Les styles seront traités par [Windi CSS](http://windicss.org/) et [PostCSS](https://postcss.org/), vous pouvez donc utiliser l'imbrication css et [at-directives](https://windicss.org/features/directives.html) prêt à l'emploi. Par exemple :
+=======
+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:
+>>>>>>> c608c011ffbff72d267a0c074a4bfa5ff4b601a7
 
 ```less
 .slidev-layout {
diff --git a/custom/index.md b/custom/index.md
index ad5c4d3..0a3e149 100755
--- a/custom/index.md
+++ b/custom/index.md
@@ -1,6 +1,10 @@
 # Customisations
 
+<<<<<<< HEAD
 Slidev est entièrement personnalisable, du style aux configurations d'outillage. Il vous permet de configurer les outils ci-dessous ([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.)
+>>>>>>> c608c011ffbff72d267a0c074a4bfa5ff4b601a7
 
 ## Configurations du frontmatter
 
@@ -18,11 +22,30 @@ titleTemplate: '%s - Slidev'
 # informations pour vos diapositives, peut être une chaîne de démarquage
 info: false
 
+<<<<<<< HEAD
 # téléchargement de pdf activé dans la version SPA, peut également être une URL personnalisée
+=======
+# enable presenter mode, can be boolean, 'dev' or 'build'
+presenter: true
+# enabled pdf downloading in SPA build, can also be a custom url
+>>>>>>> c608c011ffbff72d267a0c074a4bfa5ff4b601a7
 download: false
 # nom de fichier du fichier d'exportation
 exportFilename: 'slidev-exported'
+<<<<<<< HEAD
 # surligneur de syntaxe, peut être 'prism' ou 'shiki'
+=======
+# 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'
+>>>>>>> c608c011ffbff72d267a0c074a4bfa5ff4b601a7
 highlighter: 'prism'
 # afficher les numéros de ligne dans les blocs de code
 lineNumbers: false
@@ -70,11 +93,40 @@ drawings:
   persist: false
   presenterOnly: false
   syncAll: true
+<<<<<<< HEAD
+=======
+
+# HTML tag attributes
+htmlAttrs:
+  dir: 'ltr'
+  lang: 'en'
+---
+>>>>>>> c608c011ffbff72d267a0c074a4bfa5ff4b601a7
 ```
 
 Consultez les [définitions de type](https://github.com/slidevjs/slidev/blob/main/packages/types/src/types.ts#L29) pour plus d'options.
 
+<<<<<<< HEAD
 ## Structure du répertoire
+=======
+## 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
+>>>>>>> c608c011ffbff72d267a0c074a4bfa5ff4b601a7
 
 Slidev utilise des conventions de structure de répertoires pour minimiser la surface de configuration et rendre les extensions de fonctionnalités flexibles et intuitives.
 
@@ -82,6 +134,7 @@ Reportez-vous à la section [Structure des répertoires](/custom/directory-struc
 
 ## `vite.config.ts`
 
+<<<<<<< HEAD
 Reportez-vous à la section [Configurer Vite](/custom/config-vite).
 
 ## `windicss.config.ts`
@@ -97,3 +150,13 @@ Reportez-vous à la section [Configurer Windi CSS](/custom/config-windicss).
 - [Configurer Monaco](/custom/config-monaco)
 - [Configurer KaTeX](/custom/config-katex)
 - [Configurer Mermaid](/custom/config-mermaid)
+=======
+- [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)
+- [Configure Mermaid](/custom/config-mermaid)
+>>>>>>> c608c011ffbff72d267a0c074a4bfa5ff4b601a7
diff --git a/guide/animations.md b/guide/animations.md
index 5992d32..19366dd 100755
--- a/guide/animations.md
+++ b/guide/animations.md
@@ -60,7 +60,26 @@ Same as `v-click` but instead of making the element appear, it makes the element
 
 Un élément deviendra visible à chaque fois que vous cliquerez sur "suivant".
 
+<<<<<<< HEAD
 ### Nombre de clics personnalisés
+=======
+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
+>>>>>>> c608c011ffbff72d267a0c074a4bfa5ff4b601a7
 
 Par défaut, Slidev compte le nombre d'étapes nécessaires avant de passer à la diapositive suivante. Vous pouvez remplacer ce paramètre en passant l'option frontmatter `clicks` :
 
@@ -198,6 +217,84 @@ Le texte `Slidev` passera de `-80px` à sa position d'origine lors de l'initiali
 
 Mode d'apprentissage: [Démo](https://sli.dev/demo/starter/7) | [@vueuse/motion](https://motion.vueuse.org/) | [v-motion](https://motion.vueuse.org/directive-usage.html) | [Préréglages]f(https://motion.vueuse.org/presets.html)
 
+<<<<<<< HEAD
 ## Transitions de pages
 
 > La prise en charge intégrée des diapositives n'est PAS ENCORE fournie dans la version actuelle. Nous prévoyons d'ajouter un support pour eux dans la prochaine version majeure. Avant cela, vous pouvez toujours utiliser vos styles et bibliothèques personnalisés pour ce faire.
+=======
+## Slide Transitions
+
+<div id="pages-transitions" />
+
+> Available since v0.39.0
+
+Slidev supports slide 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 backward)
+- `slide-right` - Slides to the right (slide to left 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
+
+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
+---
+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
+---
+```
+>>>>>>> c608c011ffbff72d267a0c074a4bfa5ff4b601a7
diff --git a/guide/exporting.md b/guide/exporting.md
index 276ff52..a10869c 100755
--- a/guide/exporting.md
+++ b/guide/exporting.md
@@ -1,6 +1,8 @@
 # Exportation
 
-## PDF
+## Slides
+
+### PDF
 
 > L'exportation au format PDF ou PNG repose sur [Playwright](https://playwright.dev) pour le rendu. Vous devrez donc installer [`playwright-chromium`](https://playwright.dev/docs/installation#download-single-browser-binary) pour utiliser cette fonctionnalité.
 > Si vous effectuez une exportation dans un environnement CI, [le guide du dramaturge CI](https://playwright.dev/docs/ci) peut être utile.
@@ -19,24 +21,145 @@ $ slidev export
 
 Après quelques secondes, vos diapositives seront prêtes dans `./slides-exports.pdf`.
 
+<<<<<<< HEAD
 ### Étapes d'exportation des clics
+=======
+### 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:
+>>>>>>> c608c011ffbff72d267a0c074a4bfa5ff4b601a7
 
 > Disponible depuis v0.21
 
+<<<<<<< HEAD
 Par défaut, Slide export une page par diapositive avec les animations de clics désactivées. Si vous souhaitez exporter des diapositives avec plusieurs étapes dans plusieurs pages, passez l'option `--with-clicks`.
+=======
+### 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` option.
+>>>>>>> c608c011ffbff72d267a0c074a4bfa5ff4b601a7
 
 ```bash
 $ slidev export --with-clicks
 ```
 
-## PNGs
+### Slide range
 
+<<<<<<< HEAD
 En passant l'option `--format png`, Slidev exportera des images PNG pour chaque diapositive au lieu d'un PDF.
+=======
+You can also specify a range of slides to export with the `--range` option.
+>>>>>>> c608c011ffbff72d267a0c074a4bfa5ff4b601a7
 
 ```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
+
+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.
+
+
+### 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
+
+> 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
+```
+
+This command also accept multiple entries like for the [export command](#multiple-entries)
+
 ## Single-Page Application (SPA)
 
+<<<<<<< HEAD
 Voir [Hébergement statique](/guide/hosting).
+=======
+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]
+```
+>>>>>>> c608c011ffbff72d267a0c074a4bfa5ff4b601a7
diff --git a/guide/faq.md b/guide/faq.md
index 19693bf..b9d2a35 100755
--- a/guide/faq.md
+++ b/guide/faq.md
@@ -4,7 +4,11 @@
 
 Étant donné que Slidev est basé sur le Web, vous pouvez appliquer n'importe quelle disposition de grille à votre guise. [Grilles CSS](https://css-tricks.com/snippets/css/complete-guide-grid/), [flexboxes](https://css-tricks.com/snippets/css/a-guide-to-flexbox/), ou même [Masonry](https://css-tricks.com/native-css-masonry-layout-in-css-grid/), vous obtenez tous les contrôles.
 
+<<<<<<< HEAD
 Puisque nous avons [Windi CSS](https://windicss.org/) intégré, voici un moyen simple de référence :
+=======
+Since we have [UnoCSS](https://unocss.dev/) built-in, here is one simple way for you to reference:
+>>>>>>> c608c011ffbff72d267a0c074a4bfa5ff4b601a7
 
 ```html
 <div class="grid grid-cols-2 gap-4">
@@ -24,7 +28,7 @@ La seconde colonne
 Pour allez plus loin, vous pouvez personnaliser la taille de chaque colonne comme :
 
 ```html
-<div class="grid grid-cols-[200px,1fr,10%] gap-4">
+<div class="grid grid-cols-[200px_1fr_10%] gap-4">
 <div>
     
 La première colonne (200px)
@@ -43,7 +47,11 @@ La troisième colonne (10% de largeur jusqu'au conteneur parent)
 </div>
 ```
 
+<<<<<<< HEAD
 En savoir plus sur [les grilles Windi CSS](https://windicss.org/utilities/grid.html).
+=======
+Learn more about [Windi CSS Grids](https://windicss.org/utilities/layout/grid.html).
+>>>>>>> c608c011ffbff72d267a0c074a4bfa5ff4b601a7
 
 ## Positionnement
 
diff --git a/guide/hosting.md b/guide/hosting.md
index 4ebcc1e..85460b7 100644
--- a/guide/hosting.md
+++ b/guide/hosting.md
@@ -8,7 +8,15 @@ Vous pouvez également intégrer les diapositives dans une SPA autohébergée :
 $ slidev build
 ```
 
+<<<<<<< HEAD
 L'application générée sera disponible sous `dist/` et vous pourrez ensuite l'héberger sur [Pages GitHub](https://pages.github.com/), [Netlify](https://netlify.app/), [Vercel](https://vercel.com/), ou ce que vous voulez. Vous pouvez maintenant partager vos diapositives avec le reste du monde avec un seul lien.
+=======
+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.
+>>>>>>> c608c011ffbff72d267a0c074a4bfa5ff4b601a7
 
 ### Chemin de base
 
@@ -30,9 +38,15 @@ download: true
 ---
 ```
 
+<<<<<<< HEAD
 Slidev générera un fichier pdf avec la construction et un bouton de téléchargement sera affiché dans le SPA.
 
 Vous pouvez également fournir une URL personnalisée au PDF. Dans ce cas, le processus de rendu sera ignoré.
+=======
+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 for the PDF. In that case, the rendering process will be skipped.
+>>>>>>> c608c011ffbff72d267a0c074a4bfa5ff4b601a7
 
 ```md
 ---
@@ -40,7 +54,54 @@ download: 'https://myside.com/my-talk.pdf'
 ---
 ```
 
+<<<<<<< HEAD
 ## Exemples
+=======
+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 --out 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
+```
+
+### 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
+>>>>>>> c608c011ffbff72d267a0c074a4bfa5ff4b601a7
 
 Voici quelques exemples de SPA exportées :
 
@@ -51,7 +112,11 @@ Pour en savoir plus, consultez [Showcases](/showcases).
 
 ## Hébergement
 
+<<<<<<< HEAD
 Nous vous recommandons d'utiliser `npm init slidev@lastest` pour échafauder votre projet, qui contient les fichiers de configuration nécessaires pour héberger les services prêts à l'emploi.
+=======
+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.
+>>>>>>> c608c011ffbff72d267a0c074a4bfa5ff4b601a7
 
 ### Netlify
 
@@ -73,7 +138,11 @@ Créez `netlify.toml` dans la racine de votre projet avec le contenu suivant.
   status = 200
 ```
 
+<<<<<<< HEAD
 Ensuite, accédez à votre tableau de bord Netlify, créez un nouveau site avec le repositorie.
+=======
+Then go to your Netlify dashboard and create a new site with the repository.
+>>>>>>> c608c011ffbff72d267a0c074a4bfa5ff4b601a7
 
 ### Vercel
 
@@ -89,16 +158,27 @@ Créez `vercel.json` dans la racine de votre projet avec le contenu suivant.
 }
 ```
 
+<<<<<<< HEAD
 Accédez ensuite à votre tableau de bord Vercel, créez un nouveau site avec le repository.
+=======
+Then go to your Vercel dashboard and create a new site with the repository.
+>>>>>>> c608c011ffbff72d267a0c074a4bfa5ff4b601a7
 
 ## GitHub Pages
 
 - [GitHub Pages](https://pages.github.com/)
 
+<<<<<<< HEAD
 Pour déployer vos diapositives sur GitHub Pages :
 - téléchargez tous les fichiers du projet dans votre repository (c'est-à-dire nommé `name_of_repo`)
 - créez `.github/workflows/deploy.yml` avec le contenu suivant pour déployer vos diapositives sur GitHub Pages via GitHub Actions. Dans ce fichier, remplacez `<name_of_repo>` par `name_of_repo`.
 - 
+=======
+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`.
+
+>>>>>>> c608c011ffbff72d267a0c074a4bfa5ff4b601a7
 ```yaml
 name: Deploy pages
 on: push
@@ -106,8 +186,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
@@ -123,5 +203,10 @@ jobs:
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 ```
+<<<<<<< HEAD
 - Dans votre repository, allez dans Paramètres > Pages. Sous « Build and Deployment », sélectionnez « Deploy from a branch », sélectionnez « gh-pages » et « root ». Cliquez sur enregistrer.
 - Enfin, une fois tous les flux de travail exécutés, un lien vers les diapositives doit apparaître sous Paramètres > 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.
+>>>>>>> c608c011ffbff72d267a0c074a4bfa5ff4b601a7
diff --git a/guide/index.md b/guide/index.md
index 14a2fb5..29e7b67 100755
--- a/guide/index.md
+++ b/guide/index.md
@@ -2,7 +2,11 @@
 
 ## Aperçu
 
+<<<<<<< HEAD
 Slidev <sup>(slide + dev, `/slʌɪdɪv/`)</sup> est un créateur et présentateur de diapositives basé sur le Web. Il est conçu pour que les développeurs se concentrent sur l'écriture de contenu dans Markdown tout en ayant la puissance des composants HTML et Vue pour fournir des mises en page et des conceptions parfaites au pixel près avec des démos interactives intégrées dans vos présentations.
+=======
+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.
+>>>>>>> c608c011ffbff72d267a0c074a4bfa5ff4b601a7
 
 Il utilise un fichier de démarque riche en fonctionnalités pour générer de belles diapositives avec une expérience de rechargement instantané, ainsi que de nombreuses intégrations intégrées telles que le codage en direct, l'exportation de PDF, l'enregistrement de présentations, etc. Comme il est alimenté par le Web, vous pouvez tout faire avec Slidev - les possibilités sont infinies.
 
@@ -10,6 +14,7 @@ Vous pouvez en savoir plus sur la raison d'être du projet dans la section [Pour
 
 ### Caractéristiques
 
+<<<<<<< HEAD
 - 📝 [**basé sur Markdown**](/guide/syntax.html) - utilisez vos éditeurs et flux de travail préférés
 - 🧑‍💻 [**Convivial pour les développeurs**](/guide/syntax.html#code-blocks) - coloration syntaxique intégrée, codage en direct, etc.
 - 🎨 [**Themable**](/themes/gallery.html) - le thème peut être partagé et utilisé avec les packages npm
@@ -25,6 +30,23 @@ Vous pouvez en savoir plus sur la raison d'être du projet dans la section [Pour
 - 📤 [**Portable**](/guide/exporting.html) - exportez en PDF, PNG ou même un SPA hébergeable
 - ⚡️ [**Fast**](https://vitejs.dev) - rechargement instantané alimenté par [Vite](https://vitejs.dev)
 - 🛠 [**Hackable**](/custom/config-vite.html) - en utilisant les plugins Vite, les composants Vue ou tout package npm
+=======
+- 📝 [**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 [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
+- 🧮 [**LaTeX**](/guide/syntax.html#latex) - built-in LaTeX math equations support
+- 📰 [**Diagrams**](/guide/syntax.html#diagrams) - creates diagrams with textual descriptions 
+- 🌟 [**Icons**](/guide/syntax.html#icons) - Access to icons from any iconset directly
+- 💻 [**Editors**](/guide/editors.html) - integrated editor, or [extension for VS Code](https://github.com/slidevjs/slidev-vscode)
+- 🎥 [**Recording**](/guide/recording.html) - built-in recording and camera view
+- 📤 [**Portable**](/guide/exporting.html) - export into PDF, PNGs, or even a hostable SPA
+- ⚡️ [**Fast**](https://vitejs.dev) - instant reloading powered by [Vite](https://vitejs.dev)
+- 🛠 [**Hackable**](/custom/config-vite.html) - using Vite plugins, Vue components, or any npm packages
+>>>>>>> c608c011ffbff72d267a0c074a4bfa5ff4b601a7
 
 ### Pile technologique
 
@@ -63,7 +85,17 @@ Avec Yarn :
 $ yarn create slidev
 ```
 
+<<<<<<< HEAD
 Suivez les instructions et commencez à créer vos diapositives maintenant ! Pour plus de détails sur la syntaxe de démarquage, lisez le [guide de syntaxe](/guide/syntax).
+=======
+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).
+>>>>>>> c608c011ffbff72d267a0c074a4bfa5ff4b601a7
 
 ### Interface de ligne de commande
 
diff --git a/guide/install.md b/guide/install.md
index 5cd7222..5dfbcce 100755
--- a/guide/install.md
+++ b/guide/install.md
@@ -18,7 +18,17 @@ Avec Yarn :
 $ yarn create slidev
 ```
 
+<<<<<<< HEAD
 Suivez les invités et il ouvrira le diaporama à `http://localhost:3030/` automatiquement pour vous.
+=======
+With PNPM:
+
+```bash
+$ pnpm create slidev
+```
+
+Follow the prompts and it will open up the slideshow at `http://localhost:3030/` automatically for you.
+>>>>>>> c608c011ffbff72d267a0c074a4bfa5ff4b601a7
 
 Il contient également la configuration de base et une courte démo avec des instructions sur la façon de démarrer avec Slidev.
 
@@ -197,6 +207,7 @@ Exportez les diapositives au format PDF (ou autre format).
 
 Options:
 
+<<<<<<< HEAD
 * `--output` (`string`, défaut : use `exportFilename` (voir https://sli.dev/custom/#frontmatter-configures) ou utiliser `[entry]-export`): chemin vers la sortie.
 * `--base` (`'pdf', 'png', 'md'`, défaut : `'pdf'`): format de sortie.
 * `--timeout` (`number`, défaut : `30000`): délai d'attente pour le rendu de la page d'impression (voir https://playwright.dev/docs/api/class-page#page-goto).
@@ -204,6 +215,15 @@ Options:
 * `--dark` (`boolean`, défaut : `false`): exporter en tant que thème sombre.
 * `--with-clicks`, `-c` (`boolean`, défaut : `false`): exporter des pages pour chaque clic (voir https://sli.dev/guide/animations.html#click-animations).
 * `--theme`, `-t` (`string`): thème de remplacement.
+=======
+* `--output` (`string`, default: use `exportFilename` (see https://sli.dev/custom/#frontmatter-configures) or use `[entry]-export`): path to the output.
+* `--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.
+* `--with-clicks`, `-c` (`boolean`, default: `false`): export pages for every clicks (see https://sli.dev/guide/animations.html#click-animations).
+* `--theme`, `-t` (`string`): override theme.
+>>>>>>> c608c011ffbff72d267a0c074a4bfa5ff4b601a7
 
 ### `slidev format [entry]`
 
diff --git a/guide/presenter-mode.md b/guide/presenter-mode.md
index 65a6f16..ae3a4c6 100755
--- a/guide/presenter-mode.md
+++ b/guide/presenter-mode.md
@@ -3,3 +3,33 @@
 Cliquez sur le bouton <carbon-user-speaker class="inline-icon-btn"/> dans le panneau de navigation ou visitez manuellement `http://localhost:3030/presenter` pour accéder au mode présentateur. Chaque fois que vous entrez en mode présentateur, les autres instances de page resteront automatiquement synchronisées avec le présentateur.
 
 ![](/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.
diff --git a/guide/syntax.md b/guide/syntax.md
index 93bc2ad..832a6ea 100755
--- a/guide/syntax.md
+++ b/guide/syntax.md
@@ -2,7 +2,11 @@
 
 Les diapositives sont écrites dans **un seul fichier markdown** (par défaut `./slides.md`).
 
+<<<<<<< HEAD
 Vous pouvez utiliser [les fonctionnalités Markdown](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet) comme vous le feriez normalement, avec le support supplémentaire du HTML intégré et des composants Vue. Le style à l'aide de [Windi CSS](https://windicss.org) est également pris en charge. Utilisez `---` avec une nouvelle ligne pour séparer vos diapositives.
+=======
+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. 
+>>>>>>> c608c011ffbff72d267a0c074a4bfa5ff4b601a7
 
 ~~~md
 # Slidev
@@ -76,7 +80,11 @@ Nous supportons [Prism](http://prismjs.com) et [Shiki](https://github.com/shiki/
 
 ### Mise en évidence de ligne
 
+<<<<<<< HEAD
 Pour mettre en évidence des lignes spécifiques, ajoutez simplement des numéros de ligne entre crochets `{}`. Les numéros de ligne commencent à compter de 1.
+=======
+To highlight specific lines, simply add line numbers within bracket `{}`. Line numbers start counting from 1 by default.
+>>>>>>> c608c011ffbff72d267a0c074a4bfa5ff4b601a7
 
 ~~~ts
 //```ts {2,3}
@@ -89,7 +97,37 @@ function add(
 //```
 ~~~
 
+<<<<<<< HEAD
 Pour changer la surbrillance en plusieurs étapes, vous pouvez utiliser `|` pour les séparer. Par exemple
+=======
+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
+>>>>>>> c608c011ffbff72d267a0c074a4bfa5ff4b601a7
 
 ~~~ts
 //```ts {2-3|5|all}
@@ -121,7 +159,7 @@ Si le code ne rentre pas dans une diapositive, vous pouvez passer une option max
 et activer le défilement
 
 ~~~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
@@ -145,7 +183,31 @@ console.log('HelloWorld')
 
 En savoir plus sur la [configuration de Monaco](/custom/config-monaco).
 
+<<<<<<< HEAD
 ## Styles intégrés
+=======
+### 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
+>>>>>>> c608c011ffbff72d267a0c074a4bfa5ff4b601a7
 
 Vous pouvez utiliser la balise `<style>` dans votre Markdown directement pour remplacer les styles de la **diapositive actuelle**.
 
@@ -163,9 +225,15 @@ h1 {
 # La prochaine diapositive n'est pas affectée
 ```
 
+<<<<<<< HEAD
 La balise `<style>` dans Markdown est toujours [scoped](https://vue-loader.vuejs.org/guide/scoped-css.html). Pour avoir des remplacements de style globaux, consultez la [section de personnalisation](/custom/directory-structure#style).
 
 Propulsé par [Windi CSS](https://windicss.org), vous pouvez utiliser directement des css imbriqués et des [répertoires](https://windicss.org/features/directives.html) (par exemple, `@apply`)
+=======
+`<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 [UnoCSS](/custom/config-unocss), you can directly use nested css and [directives](https://windicss.org/features/directives.html) (e.g. `@apply`)
+>>>>>>> c608c011ffbff72d267a0c074a4bfa5ff4b601a7
 
 ```md
 # Slidev
diff --git a/guide/why.md b/guide/why.md
index b2b96be..0131cc1 100755
--- a/guide/why.md
+++ b/guide/why.md
@@ -32,7 +32,11 @@ En savoir plus sur [surligneurs](/custom/highlighters) et [configuration Monaco]
 
 ## Rapide
 
+<<<<<<< HEAD
 Slidev est alimenté par [Vite](https://vitejs.dev/), [Vue 3](https://v3.vuejs.org/) et [Windi CSS](https://windicss.org/), qui vous offrent la plus merveilleuse expérience de création. Chaque modification que vous apportez sera répercutée sur vos diapositives **instantanément**.
+=======
+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**.
+>>>>>>> c608c011ffbff72d267a0c074a4bfa5ff4b601a7
 
 En savoir plus sur [notre pile technologique](/guide/#pile-technologique).
 
diff --git a/themes/write-a-theme.md b/themes/write-a-theme.md
index a4cba66..c46b0b8 100755
--- a/themes/write-a-theme.md
+++ b/themes/write-a-theme.md
@@ -12,12 +12,21 @@ Ensuite, vous pouvez le modifier et jouer avec. Vous pouvez également vous réf
 
 Un thème peut contribuer aux points suivants :
 
+<<<<<<< HEAD
 - Styles globaux
 - Fournir des configurations par défaut (police, schéma de couleurs, surligneurs, etc.)
 - Fournir des mises en page personnalisées ou remplacer celle existante
 - Fournir des composants personnalisés ou remplacer l'existant
 - Étendre les configurations de WindiCSS 
 - Configurer des outils comme Monaco et Prism
+=======
+- Global styles
+- 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 UnoCSS/Windi CSS configurations
+- Configure tools like Monaco and Prism
+>>>>>>> c608c011ffbff72d267a0c074a4bfa5ff4b601a7
 
 ## Conventions
 
@@ -64,7 +73,7 @@ Un thème peut fournir des [configurations par défaut](/custom/#frontmatter-con
 // package.json
 {
   "slidev": {
-    "default": {
+    "defaults": {
       "aspectRatio": "16/9",
       "canvasWidth": 980,
       "fonts": {
@@ -128,7 +137,7 @@ N'oubliez pas non plus de spécifier les surligneurs pris en charge dans votre `
 // package.json
 {
   "slidev": {
-    "highlighter": "shiki" // or "prism" or "all"
+    "highlighter": "shiki" // or "prism" or "both"
   }
 }
 ```