Esta função de configuração só será executada no ambiente Node.js, você pode ter acesso a API do Node.
+=======
+
+
+ Environment:
+ {{ type }}
+
+
+
+
+ This setup function will run on both Node.js and client side. Avoid using either Node's or DOM API to avoid runtime errors.
+
+
+ This setup function will only run on Node.js environment, you can have access to Node's API.
+>>>>>>> 21fdadc17cd2018f65c637e5727de640db5036e3
Esta função de configuração só será executada no lado do cliente. Verifique a compatibilidade do navegador quando importar pacotes.
diff --git a/.vitepress/theme/components/Home.vue b/.vitepress/theme/components/Home.vue
deleted file mode 100644
index 59b6eff..0000000
--- a/.vitepress/theme/components/Home.vue
+++ /dev/null
@@ -1,23 +0,0 @@
-
-
+
+```
+
+Check [HTML video element's doc](https://developer.mozilla.org/docs/Web/HTML/Element/Video) to see what can be included in this component's slot.
+
+Parameters:
+
+- `controls` (`boolean`, default: `false`): show the video controls
+- `autoplay` (`boolean | 'once'`, default: `false`):
+ - `true` or `'once'`: start the video only once and does not restart it once ended or paused
+ - `false`: never automatically start the video (rely on `controls` instead)
+- `autoreset` (`'slide' | 'click'`, default: `undefined`):
+ - `'slide'`: go back to the start of the video when going back to the slide
+ - `'click'`: go back to the start of the video when going back to the component's click turn
+- `poster` (`string | undefined`, default: `undefined`):
+ - The source of the image to print when the video is not playing.
+- `printPoster` (`string | undefined`, default: `undefined`):
+ - The override for `poster` when printing.
+- `timestamp` (`string | number`, default: `0`):
+ - The starting time of the video in seconds.
+- `printTimestamp` (`string | number | 'last' | undefined`, default: `undefined`):
+ - The override for `timestamp` when printing.
+
+::: warning
+When exporting, the video may fail to load because Chromium does not support some video formats. In this case, you can specify the executable path of the browser. See [Chromium executable path](/guide/exporting.html#executable-path) for more information.
+:::
+
+### `Youtube`
+
+Embed a youtube video.
+
+#### Usage
+
+```md
+
+```
+
+Parameters:
+
+- `id` (`string`, required): id of the youtube video
+- `width` (`number`): width of the video
+- `height` (`number`): height of the video
+
+You can also make the video start at specific time if you add `?start=1234` to the id value (where 1234 are seconds),
+>>>>>>> 21fdadc17cd2018f65c637e5727de640db5036e3
## Componentes customizados
diff --git a/builtin/layouts.md b/builtin/layouts.md
index ebc8d34..d71c9ae 100644
--- a/builtin/layouts.md
+++ b/builtin/layouts.md
@@ -4,10 +4,13 @@
> Já que temas podem sobrepor o comportamento dos layouts, o melhor jeito de saber exatamente o uso, parâmetros e exemplos é consultando suas respectivas documentações.
-
### `center`
+<<<<<<< HEAD
Exibe o conteúdo no meio da tela.
+=======
+Displays the content in the middle of the screen.
+>>>>>>> 21fdadc17cd2018f65c637e5727de640db5036e3
### `cover`
@@ -15,7 +18,11 @@ Usado para exibir a página de capa para a apresentação, pode conter o título
### `default`
+<<<<<<< HEAD
O layout mais básico, para exibir qualquer conteúdo.
+=======
+The most basic layout, to display any kind of content.
+>>>>>>> 21fdadc17cd2018f65c637e5727de640db5036e3
### `end`
@@ -39,8 +46,13 @@ Mostra uma imagem no lado esquerdo da tela, o conteúdo será posicionado à dir
---
layout: image-left
+<<<<<<< HEAD
# a fonte da imagem
image: ./caminho/para/a/imagem
+=======
+# the image source
+image: /path/to/the/image
+>>>>>>> 21fdadc17cd2018f65c637e5727de640db5036e3
# uma nome de classe customizado para o conteúdo
class: my-cool-content-on-the-right
@@ -57,8 +69,13 @@ Mostra uma imagem no lado direito da tela, o conteúdo será posicionado à esqu
---
layout: image-right
+<<<<<<< HEAD
# a fonte da imagem
image: ./caminho/para/a/imagem
+=======
+# the image source
+image: /path/to/the/image
+>>>>>>> 21fdadc17cd2018f65c637e5727de640db5036e3
# uma nome de classe customizado para o conteúdo
class: my-cool-content-on-the-left
@@ -75,11 +92,33 @@ Mostra uma imagem como o conteúdo principal da página.
---
layout: image
+<<<<<<< HEAD
# a fonte da imagem
image: ./caminho/para/a/imagem
+=======
+# the image source
+image: /path/to/the/image
+>>>>>>> 21fdadc17cd2018f65c637e5727de640db5036e3
+---
+```
+
+You can change the default background size (`cover`) by adding the `backgroundSize` attribute:
+
+```yaml
+---
+layout: image
+image: /path/to/the/image
+backgroundSize: contain
---
```
+```yaml
+---
+layout: image-left
+image: /path/to/the/image
+backgroundSize: 20em 70%
+---
+```
### `iframe-left`
@@ -132,7 +171,6 @@ url: https://github.com/slidevjs/slidev
---
```
-
### `intro`
Para introduzir a apresentação, geralmente com o título, uma descrição curta, o autor, etc.
@@ -159,7 +197,6 @@ Separa o conteúdo da página em duas colunas.
#### Uso
-
```md
---
layout: two-cols
@@ -176,7 +213,37 @@ Isto está à esquerda
Isto está à direita
```
+<<<<<<< HEAD
## Layouts Customizados
+=======
+### `two-cols-header`
+
+Separates the upper and lower lines of the page content, and the second line separates the left and right columns.
+
+#### Usage
+
+```md
+---
+layout: two-cols-header
+---
+
+This spans both
+
+::left::
+
+# Left
+
+This shows on the left
+
+::right::
+
+# Right
+
+This shows on the right
+```
+
+## Custom Layouts
+>>>>>>> 21fdadc17cd2018f65c637e5727de640db5036e3
Crie um diretório `layouts/` no diretório raiz do projeto, e simplesmente insira os componentes do seu layout customizado do Vue lá dentro.
diff --git a/components.d.ts b/components.d.ts
new file mode 100644
index 0000000..fc3f307
--- /dev/null
+++ b/components.d.ts
@@ -0,0 +1,73 @@
+/* eslint-disable */
+// @ts-nocheck
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+export {}
+
+/* prettier-ignore */
+declare module 'vue' {
+ export interface GlobalComponents {
+ Arrow: typeof import('./.vitepress/@slidev/client/builtin/Arrow.vue')['default']
+ AutoFitText: typeof import('./.vitepress/@slidev/client/builtin/AutoFitText.vue')['default']
+ 'Carbon:chevronLeft': typeof import('~icons/carbon/chevron-left')['default']
+ 'Carbon:chevronRight': typeof import('~icons/carbon/chevron-right')['default']
+ 'Carbon:logoGithub': typeof import('~icons/carbon/logo-github')['default']
+ 'Carbon:logoTwitter': typeof import('~icons/carbon/logo-twitter')['default']
+ 'Carbon:presentationFile': typeof import('~icons/carbon/presentation-file')['default']
+ 'Carbon:video': typeof import('~icons/carbon/video')['default']
+ CarbonApps: typeof import('~icons/carbon/apps')['default']
+ CarbonArrowLeft: typeof import('~icons/carbon/arrow-left')['default']
+ CarbonArrowRight: typeof import('~icons/carbon/arrow-right')['default']
+ CarbonBadge: typeof import('~icons/carbon/badge')['default']
+ CarbonDownload: typeof import('~icons/carbon/download')['default']
+ CarbonEdit: typeof import('~icons/carbon/edit')['default']
+ CarbonInformation: typeof import('~icons/carbon/information')['default']
+ CarbonMaximize: typeof import('~icons/carbon/maximize')['default']
+ CarbonMinimize: typeof import('~icons/carbon/minimize')['default']
+ CarbonMoon: typeof import('~icons/carbon/moon')['default']
+ CarbonPen: typeof import('~icons/carbon/pen')['default']
+ CarbonSettingsAdjust: typeof import('~icons/carbon/settings-adjust')['default']
+ CarbonSun: typeof import('~icons/carbon/sun')['default']
+ CarbonUserAvatar: typeof import('~icons/carbon/user-avatar')['default']
+ CarbonUserSpeaker: typeof import('~icons/carbon/user-speaker')['default']
+ CarbonVideo: typeof import('~icons/carbon/video')['default']
+ CodeBlockWrapper: typeof import('./.vitepress/@slidev/client/builtin/CodeBlockWrapper.vue')['default']
+ CodiconAdd: typeof import('~icons/codicon/add')['default']
+ CodiconEye: typeof import('~icons/codicon/eye')['default']
+ CodiconGlobe: typeof import('~icons/codicon/globe')['default']
+ CodiconLock: typeof import('~icons/codicon/lock')['default']
+ CodiconRunAll: typeof import('~icons/codicon/run-all')['default']
+ Demo: typeof import('./.vitepress/theme/components/Demo.vue')['default']
+ DemoEditor: typeof import('./.vitepress/theme/components/DemoEditor.vue')['default']
+ DemoSlide: typeof import('./.vitepress/theme/components/DemoSlide.vue')['default']
+ Environment: typeof import('./.vitepress/theme/components/Environment.vue')['default']
+ LandingPage: typeof import('./.vitepress/theme/components/LandingPage.vue')['default']
+ Link: typeof import('./.vitepress/@slidev/client/builtin/Link.vue')['default']
+ LogosVue: typeof import('~icons/logos/vue')['default']
+ MdiAccountCircle: typeof import('~icons/mdi/account-circle')['default']
+ Mermaid: typeof import('./.vitepress/@slidev/client/builtin/Mermaid.vue')['default']
+ Monaco: typeof import('./.vitepress/@slidev/client/builtin/Monaco.vue')['default']
+ PlantUml: typeof import('./.vitepress/@slidev/client/builtin/PlantUml.vue')['default']
+ RenderWhen: typeof import('./.vitepress/@slidev/client/builtin/RenderWhen.vue')['default']
+ RouterLink: typeof import('vue-router')['RouterLink']
+ RouterView: typeof import('vue-router')['RouterView']
+ ShowCaseInfo: typeof import('./.vitepress/theme/components/ShowCaseInfo.vue')['default']
+ ShowCases: typeof import('./.vitepress/theme/components/ShowCases.vue')['default']
+ SimpleIconsGithub: typeof import('~icons/simple-icons/github')['default']
+ SimpleIconsNpm: typeof import('~icons/simple-icons/npm')['default']
+ SlideCurrentNo: typeof import('./.vitepress/@slidev/client/builtin/SlideCurrentNo.vue')['default']
+ SlidesTotal: typeof import('./.vitepress/@slidev/client/builtin/SlidesTotal.vue')['default']
+ Starport: typeof import('vue-starport')['Starport']
+ StarportCarrier: typeof import('vue-starport')['StarportCarrier']
+ ThemeGallery: typeof import('./.vitepress/theme/components/ThemeGallery.vue')['default']
+ ThemeInfo: typeof import('./.vitepress/theme/components/ThemeInfo.vue')['default']
+ TheTweet: typeof import('./.vitepress/theme/components/TheTweet.vue')['default']
+ Toc: typeof import('./.vitepress/@slidev/client/builtin/Toc.vue')['default']
+ TocList: typeof import('./.vitepress/@slidev/client/builtin/TocList.vue')['default']
+ Transform: typeof import('./.vitepress/@slidev/client/builtin/Transform.vue')['default']
+ Tweet: typeof import('./.vitepress/@slidev/client/builtin/Tweet.vue')['default']
+ TwemojiCatWithTearsOfJoy: typeof import('~icons/twemoji/cat-with-tears-of-joy')['default']
+ UimRocket: typeof import('~icons/uim/rocket')['default']
+ Youtube: typeof import('./.vitepress/@slidev/client/builtin/Youtube.vue')['default']
+ }
+}
diff --git a/custom/config-mermaid.md b/custom/config-mermaid.md
index 0fafc8f..7b37a7d 100644
--- a/custom/config-mermaid.md
+++ b/custom/config-mermaid.md
@@ -14,4 +14,38 @@ export default defineMermaidSetup(() => {
})
```
+<<<<<<< HEAD
Com essa configuração, você pode prover as configurações customizadas para o [Mermaid](https://mermaid-js.github.io/). Consulte as definições de tipo e suas documentações para obter mais detalhes.
+=======
+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.
+>>>>>>> 21fdadc17cd2018f65c637e5727de640db5036e3
diff --git a/custom/config-monaco.md b/custom/config-monaco.md
index 941ebff..d3f2e6e 100644
--- a/custom/config-monaco.md
+++ b/custom/config-monaco.md
@@ -18,14 +18,15 @@ Saiba mais sobre [como configurar o Monaco](https://github.com/Microsoft/monaco-
Para usar o Monaco nos seus slides, simplesmente acrescente `{monaco}` aos seus blocos de código:
-~~~js
-//```js
+````md
+```js {monaco} // [!code ++]
const count = ref(1)
const plusOne = computed(() => count.value + 1)
console.log(plusOne.value) // 2
plusOne.value++ // error
+<<<<<<< HEAD
//```
~~~
@@ -50,26 +51,79 @@ Por padrão, Monaco só vai funcionar no modo `dev`. Se quiser tê-lo na aplica
---
monaco: true # padrão "dev"
---
+=======
+>>>>>>> 21fdadc17cd2018f65c637e5727de640db5036e3
```
+````
+<<<<<<< HEAD
## Instalação Automática dos Tipos
+=======
+## TypeScript Types
+>>>>>>> 21fdadc17cd2018f65c637e5727de640db5036e3
Quando é usado TypeScript com o Monaco, os tipos para as dependências serão instalados automaticamente no lado do cliente.
-~~~ts
-//```ts {monaco}
+````md
+```ts {monaco}
import { ref } from 'vue'
import { useMouse } from '@vueuse/core'
const counter = ref(0)
-//```
-~~~
+```
+````
+<<<<<<< HEAD
Neste exemplo acima, verifique que tanto o `vue` quanto o `@vueuse/core` estão instalados localmente assim como as dependências / dependências dev, o Slidev vai lidar com o resto para obter os tipos para o editor automaticamente!
+=======
+In the example above, make sure `vue` and `@vueuse/core` are installed locally as dependencies / devDependencies, Slidev will handle the rest to get the types working for the editor automatically. When deploy as SPA, those types will also be bundled for static hosting.
+
+### Additional Types
+
+Slidev will scan all the monaco codeblocks in your slides and import the types for those used libraries for you. In case it missed some, you can explicitly specify extra packages to import the types for:
+
+```md
+---
+monacoTypesAdditionalPackages:
+ - lodash-es
+ - foo
+---
+```
+
+### Auto Type Acquisition
+
+You can optionally switch to load types from CDN by setting the following headmatter:
+
+```md
+---
+monacoTypesSource: ata
+---
+```
+
+This feature is powered by [`@typescript/ata`](https://github.com/microsoft/TypeScript-Website/tree/v2/packages/ata) and runs completely on the client-side.
+>>>>>>> 21fdadc17cd2018f65c637e5727de640db5036e3
## Configurar Temas
+<<<<<<< HEAD
O tema é controlado pelo Slidev baseado no modo claro/escuro. Se você quiser customizar-lo, é só passar o id do tema na função de configuração:
+=======
+Since v0.48.0, Monaco will reuse the Shiki theme you configured in [Shiki's setup file](/custom/highlighters#configure-shiki), powered by [`@shikijs/monaco`](https://shiki.style/packages/monaco). You don't need to worry about it anymore and it will have a consistent style with the rest of your code blocks.
+
+## Configure the Editor
+
+> Available since v0.43.0
+
+If you would like to customize the Monaco editor you may pass an `editorOptions` object that matches the [Monaco IEditorOptions](https://microsoft.github.io/monaco-editor/docs.html#interfaces/editor.IEditorOptions.html) definition.
+
+````md
+```ts {monaco} { editorOptions: { wordWrap:'on'} }
+console.log('HelloWorld')
+```
+````
+
+Alternatively if you would like these options to be applied to every Monaco instance, you can return them in the `defineMonacoSetup` function
+>>>>>>> 21fdadc17cd2018f65c637e5727de640db5036e3
```ts
// ./setup/monaco.ts
@@ -77,34 +131,28 @@ import { defineMonacoSetup } from '@slidev/types'
export default defineMonacoSetup(() => {
return {
- theme: {
- dark: 'vs-dark',
- light: 'vs',
- },
+ editorOptions: {
+ wordWrap: 'on'
+ }
}
})
```
+<<<<<<< HEAD
Se você quiser carregar temas customizados:
+=======
+## Disabling
+>>>>>>> 21fdadc17cd2018f65c637e5727de640db5036e3
-```ts
-import { defineMonacoSetup } from '@slidev/types'
-
-// change to your themes
-import dark from 'theme-vitesse/themes/vitesse-dark.json'
-import light from 'theme-vitesse/themes/vitesse-light.json'
-
-export default defineMonacoSetup((monaco) => {
- monaco.editor.defineTheme('vitesse-light', light as any)
- monaco.editor.defineTheme('vitesse-dark', dark as any)
+Since v0.48.0, Monaco editor is enabled by default and only be bundled when you use it. If you want to disable it, you can set `monaco` to `false` in the frontmatter of your slide:
- return {
- theme: {
- light: 'vitesse-light',
- dark: 'vitesse-dark',
- },
- }
-})
+```yaml
+---
+monaco: false # can also be `dev` or `build` tp conditionally enable it
+---
```
+<<<<<<< HEAD
> Se você estiver criando um tema para o Slidev, use o `import()` dinâmico na função de configuração para obter resultados melhores.
+=======
+>>>>>>> 21fdadc17cd2018f65c637e5727de640db5036e3
diff --git a/custom/config-parser.md b/custom/config-parser.md
new file mode 100644
index 0000000..bfcd98a
--- /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, mode }) => {
+ 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), the headmatter (from the md file) and, since v0.48.0, a mode (dev, build or export). It could use this information (e.g., enable extensions based on the presentation file or whether we are exporting a PDF).
+- 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 [
+ ``,
+ '',
+ content,
+ '',
+ ''
+ ].join('\n')
+ }
+ },
+ },
+ ]
+})
+```
+
+And that's it.
diff --git a/custom/config-shortcuts.md b/custom/config-shortcuts.md
index 90a883d..4ae22ce 100644
--- a/custom/config-shortcuts.md
+++ b/custom/config-shortcuts.md
@@ -2,15 +2,25 @@
> Disponível a partir da v0.20
+> Since v0.35.6 (excluded), you decide which base shortcuts to keep (see `...base,` below).
+
+<<<<<<< HEAD
Crie o arquivo `./setup/shortcuts.ts` com o seguinte conteúdo:
+=======
+## Getting started
+
+Create `./setup/shortcuts.ts` with the following content:
+>>>>>>> 21fdadc17cd2018f65c637e5727de640db5036e3
```ts
-import { defineShortcutsSetup, NavOperations } from '@slidev/types'
+import type { NavOperations, ShortcutOptions } from '@slidev/types'
+import { defineShortcutsSetup } from '@slidev/types'
-export default defineShortcutsSetup((nav: NavOperations) => {
+export default defineShortcutsSetup((nav: NavOperations, base: ShortcutOptions[]) => {
return [
+ ...base, // keep the existing shortcuts
{
key: 'enter',
fn: () => nav.next(),
@@ -29,4 +39,50 @@ Com a configuração, você pode fornecer as customizações para os atalhos men
A função de configuração recebe um objeto com alguns métodos de navegação, e retorna um array contendo alguns atalhos de configuração. Confira as definições de tipos para mais detalhes.
+<<<<<<< HEAD
Confira [useMagicKeys | VueUse](https://vueuse.org/core/useMagicKeys/) para mais detalhes sobre o evento de uma tecla pressionada.
+=======
+## Advanced key binding
+
+The `key` type only allows for strings, but you can still bind multiple keys by using following convention:
+
+```ts
+import type { NavOperations, ShortcutOptions } from '@slidev/types'
+import { defineShortcutsSetup } from '@slidev/types'
+
+export default defineShortcutsSetup((nav: NavOperations, base: ShortcutOptions[]) => {
+ return [
+ ...base,
+ {
+ key: 'ShiftLeft+ArrowRight',
+ fn: () => nav.next(),
+ autoRepeat: true,
+ }
+ ]
+})
+```
+
+## 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 { NavOperations, defineShortcutsSetup } 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.
+>>>>>>> 21fdadc17cd2018f65c637e5727de640db5036e3
diff --git a/custom/config-unocss.md b/custom/config-unocss.md
new file mode 100644
index 0000000..65ef03b
--- /dev/null
+++ b/custom/config-unocss.md
@@ -0,0 +1,46 @@
+# Configure UnoCSS
+
+
+
+[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
+
+Slidev also adds shortcuts as can be seen in its [source code](https://github.com/slidevjs/slidev/blob/main/packages/client/uno.config.ts).
+
+You can therefore style your content the way you want. For example:
+
+```html
+
+
+### Name
+
+- Item 1
+- Item 2
+
+
+```
+
+## 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-vite.md b/custom/config-vite.md
index aae9bee..834df10 100644
--- a/custom/config-vite.md
+++ b/custom/config-vite.md
@@ -2,7 +2,11 @@
+<<<<<<< HEAD
O Slidev usa o [Vite](http://vitejs.dev/) por baixo dos panos. Isso significa que você pode aproveitar o excelente sistema de plug-ins do Vite para personalizar ainda mais seus slides.
+=======
+Slidev is powered by [Vite](https://vitejs.dev/) under the hood. This means you can leverage Vite's great plugin system to customize your slides even further.
+>>>>>>> 21fdadc17cd2018f65c637e5727de640db5036e3
O arquivo `vite.config.ts` será seguido se você tiver um.
@@ -11,9 +15,9 @@ O Slidev possui os seguintes plug-ins pré-configurados:
- [@vitejs/plugin-vue](https://github.com/vitejs/vite/tree/main/packages/plugin-vue)
- [unplugin-vue-components](https://github.com/antfu/unplugin-vue-components)
- [unplugin-icons](https://github.com/antfu/unplugin-icons)
-- [vite-plugin-md](https://github.com/antfu/vite-plugin-md)
-- [vite-plugin-windicss](https://github.com/windicss/vite-plugin-windicss)
+- [vite-plugin-vue-markdown](https://github.com/antfu/vite-plugin-vue-markdown)
- [vite-plugin-remote-assets](https://github.com/antfu/vite-plugin-remote-assets)
+- [unocss/vite](https://github.com/unocss/unocss/tree/main/packages/vite)
Saiba mais sobre as [pré-configurações aqui](https://github.com/slidevjs/slidev/blob/main/packages/slidev/node/plugins/preset.ts).
diff --git a/custom/config-windicss.md b/custom/config-windicss.md
index 4682946..7ac4bee 100644
--- a/custom/config-windicss.md
+++ b/custom/config-windicss.md
@@ -2,12 +2,20 @@
+<<<<<<< HEAD
O Markdown suporta naturalmente tags HTML embutidas. Portanto, você pode estilizar seu conteúdo como preferir. Para oferecer certa comodidade, nós temos o [Windi CSS](https://github.com/windicss/windicss) embutido, para que você possa estilizar o conteúdo diretamente usando classes.
+=======
+::: warning
+Since Slidev v0.47.0, we no longer support Windi CSS. Please migrate to [UnoCSS](/custom/config-unocss).
+:::
+
+Markdown naturally supports embedded HTML markups. You can therefore style your content the way you want.
+>>>>>>> 21fdadc17cd2018f65c637e5727de640db5036e3
Por exemplo:
```html
-
+
### Nome
diff --git a/custom/directory-structure.md b/custom/directory-structure.md
index 8519f4b..b31f0ac 100644
--- a/custom/directory-structure.md
+++ b/custom/directory-structure.md
@@ -5,6 +5,7 @@ O Slidev emprega algumas convenções de estrutura de diretório para minimizar
A estrutura básica é a seguinte:
```bash
+<<<<<<< HEAD
seu-slidev/
├── components/ # componentes customizados
├── layouts/ # layouts customizados
@@ -14,6 +15,17 @@ seu-slidev/
├── index.html # injeções ao index.html
├── slides.md # a entrada principal dos slides
└── vite.config.ts # extensões às configurações do vite
+=======
+your-slidev/
+ ├── components/ # custom components
+ ├── layouts/ # custom layouts
+ ├── public/ # static assets
+ ├── setup/ # custom setup / hooks
+ ├── styles/ # custom style
+ ├── index.html # injections to index.html
+ ├── slides.md # the main slides entry
+ └── vite.config.ts # extending vite config
+>>>>>>> 21fdadc17cd2018f65c637e5727de640db5036e3
```
Todos eles são opcionais.
@@ -48,7 +60,11 @@ seu-slidev/
```
+<<<<<<< HEAD
Esta funcionalidade é fornecida pelo [`vite-plugin-components`](https://github.com/antfu/vite-plugin-components), saiba mais por lá.
+=======
+This feature is powered by [`unplugin-vue-components`](https://github.com/antfu/unplugin-vue-components), learn more there.
+>>>>>>> 21fdadc17cd2018f65c637e5727de640db5036e3
O Slidev também disponibiliza alguns [componentes embutidos](/builtin/components) pra você usar.
@@ -115,19 +131,25 @@ import './code.css'
import './layouts.css'
```
+<<<<<<< HEAD
Estilos serão processados pelo [Windi CSS](http://windicss.org/) e o [PostCSS](https://postcss.org/), portanto você pode usar aninhamento de css e as [at-directives](https://windicss.org/features/directives.html) sem nenhuma configuração adicional.
Por exemplo:
+=======
+Styles will be processed by [UnoCSS](https://unocss.dev/) and [PostCSS](https://postcss.org/), so you can use css nesting and [at-directives](https://unocss.dev/transformers/directives#apply) out-of-box. For example:
+
+
+>>>>>>> 21fdadc17cd2018f65c637e5727de640db5036e3
```less
.slidev-layout {
- @apply px-14 py-10 text-[1.1rem];
+ --uno: px-14 py-10 text-[1.1rem];
h1, h2, h3, h4, p, div {
- @apply select-none;
+ --uno: select-none;
}
pre, code {
- @apply select-text;
+ --uno: select-text;
}
a {
@@ -136,7 +158,11 @@ Por exemplo:
}
```
+<<<<<<< HEAD
[Aprenda mais sobre a sintaxe](https://windicss.org/features/directives.html).
+=======
+[Learn more about the syntax](https://unocss.dev/transformers/directives#apply).
+>>>>>>> 21fdadc17cd2018f65c637e5727de640db5036e3
## `index.html`
@@ -184,5 +210,9 @@ O `index.html` final hospedado será:
Convenções: `global-top.vue` | `global-bottom.vue`
+<<<<<<< HEAD
Saiba mais: [Camadas Globais](/custom/global-layers)
+=======
+Learn more: [Global Layers](/custom/global-layers)
+>>>>>>> 21fdadc17cd2018f65c637e5727de640db5036e3
diff --git a/custom/fonts.md b/custom/fonts.md
index b38945e..4c622a5 100644
--- a/custom/fonts.md
+++ b/custom/fonts.md
@@ -9,12 +9,21 @@ No seu frontmatter, configure assim:
```yaml
---
fonts:
+<<<<<<< HEAD
# basicamente o texto
sans: 'Robot'
# use com a classe `font-serif` do windicss
serif: 'Robot Slab'
# para blocos de código, códigos inline, etc.
mono: 'Fira Code'
+=======
+ # basically the text
+ sans: Robot
+ # use with `font-serif` css class from UnoCSS
+ serif: Robot Slab
+ # for code blocks, inline code, etc.
+ mono: Fira Code
+>>>>>>> 21fdadc17cd2018f65c637e5727de640db5036e3
---
```
@@ -24,15 +33,24 @@ As fontes serão **importadas automaticamente do [Google Fonts](https://fonts.go
## Fontes Locais
+<<<<<<< HEAD
Por padrão, o Slidev assume que todas as fontes especificadas por meio da configuração `fonts` vêm do Google Fonts. Se você quiser usar fontes locais, especifique o `fonts.local` para interromper a importação automática.
+=======
+By default, Slidev assumes all the fonts specified via `fonts` configurations come from Google Fonts. If you want to use local fonts, specify the `fonts.local` to opt-out the auto-importing.
+>>>>>>> 21fdadc17cd2018f65c637e5727de640db5036e3
```yaml
---
fonts:
# assim como no font-family do css, você pode usar `,` para separar múltiplas como substitutas
sans: 'Helvetica Neue,Robot'
+<<<<<<< HEAD
# marca 'Helvetica Neue' como uma fonte local
local: 'Helvetica Neue'
+=======
+ # mark 'Helvetica Neue' as local font
+ local: Helvetica Neue
+>>>>>>> 21fdadc17cd2018f65c637e5727de640db5036e3
---
```
@@ -43,8 +61,13 @@ Por padrão, o Slidev importa três espessuras `200`,`400`,`600` para cada fonte
```yaml
---
fonts:
+<<<<<<< HEAD
sans: 'Robot'
# padrão
+=======
+ sans: Robot
+ # default
+>>>>>>> 21fdadc17cd2018f65c637e5727de640db5036e3
weights: '200,400,600'
# importa fontes itálicas, o padrão é `false`
italic: false
@@ -60,13 +83,19 @@ Na maioria das vezes, você só vai precisar especificar a "fonte especial" e o
```yaml
---
fonts:
- sans: 'Robot'
- serif: 'Robot Slab'
- mono: 'Fira Code'
+ sans: Robot
+ serif: Robot Slab
+ mono: Fira Code
---
```
+<<<<<<< HEAD
vai resultar em
+=======
+will result in
+
+
+>>>>>>> 21fdadc17cd2018f65c637e5727de640db5036e3
```css
.font-sans {
@@ -86,7 +115,7 @@ Se você quiser desabilitar as fontes substitutas, configure assim:
---
fonts:
mono: 'Fira Code, monospace'
- fallback: false
+ fallbacks: false
---
```
@@ -100,8 +129,6 @@ Atualmente, apenas o Google Fonts é suportado, nós planejamos adicionar mais p
```yaml
---
fonts:
- provide: 'none'
+ provider: none
---
```
-
-
diff --git a/custom/global-layers.md b/custom/global-layers.md
index 0398339..3809d2b 100644
--- a/custom/global-layers.md
+++ b/custom/global-layers.md
@@ -1,5 +1,6 @@
# Camadas Globais
+<<<<<<< HEAD
> Disponível a partir da v0.17
Camadas globais te permitem ter componentes customizados que **permanecem** pelos slides. Isto pode ser útil para ter rodapés, animações entre os slides, efeitos globais, etc.
@@ -11,11 +12,34 @@ Relacionamento das Camadas:
- Cabeçalho Global (`global-top.vue`)
- Slides
- Rodapé Global (`global-bottom.vue`)
+=======
+Global layers allow you to have custom components that **persist** across slides. This could be useful for having footers, cross-slide animations, global effects, etc.
+
+Slidev provides three layers for this usage, create `global-top.vue`, `global-bottom.vue` or `custom-nav-controls.vue` under your project root and it will pick up automatically.
+
+There are also layers for **each** slide: `layouts/slide-top.vue` and `layouts/slide-bottom.vue`. The usage is similar to the global layers, but they are applied to every slide, so there may be more than one instance of them.
+
+::: tip
+When exporting, the `--per-slide` option should be used to ensure the global layers are applied to each slide correctly.
+:::
+
+## Layers relationship
+
+At z-axis, from top to bottom:
+
+- NavControls
+ - Customized Navigation Controls (`custom-nav-controls.vue`)
+- Global Top (`global-top.vue`) - single instance
+- Slide Top (`slide-top.vue`) - instance per slide
+- Slide Content
+- Slide Bottom (`slide-bottom.vue`) - instance per slide
+- Global Bottom (`global-bottom.vue`) - single instance
+>>>>>>> 21fdadc17cd2018f65c637e5727de640db5036e3
## Exemplo
```html
-
+
@@ -23,13 +47,28 @@ Relacionamento das Camadas:
O texto `Seu Nome` vai aparecer em todos os slides.
+<<<<<<< HEAD
Para habilitar isso em função de alguma condição, você pode utilizar com o [Vue Global Context](/custom/vue-context).
+=======
+```html
+
+
+
+
+```
+
+The button `Next` will appear in NavControls.
+
+To enable it conditionally, you can apply it with the [Vue Global Context](/custom/vue-context).
+>>>>>>> 21fdadc17cd2018f65c637e5727de640db5036e3
```html
+=======
+
+
+ Hello **World**
+
+
+
Hey!
+>>>>>>> 21fdadc17cd2018f65c637e5727de640db5036e3
```
### `v-after`
+<<<<<<< HEAD
O uso do `v-after` é similar ao do `v-click`, mas ele tornará o elemento visível quando o `v-click` anterior tiver sido disparado.
```md
@@ -34,18 +57,48 @@ O uso do `v-after` é similar ao do `v-click`, mas ele tornará o elemento visí
```
Quando você clicar no botão "próximo", tanto `Olá` quanto `Mundo` aparecerão simultaneamente.
+=======
+`v-after` is only provided as a directive. It will turn the element visible when the previous `v-click` is triggered.
+
+```md
+
Hello
+
World
+```
+
+When you press "next", both `Hello` and `World` will show up together.
+>>>>>>> 21fdadc17cd2018f65c637e5727de640db5036e3
-### `v-click-hide`
+### Hide after clicking
+<<<<<<< HEAD
Tem o mesmo comportamento do `v-click`, mas em vez de fazer o elemento aparecer, faz o elemento invisível após do clique.
```md
Olá
+=======
+Add a `.hide` modifier to `v-click` or `v-after` to make the element invisible after clicking, instead of showing up.
+
+```md
+
Visible after 1 click
+
Hidden after 2 click
+
Hidden after 2 click
+```
+
+For `v-click` component, you can use the `hide` prop to achieve the same effect:
+
+```md
+ Visible after 1 click
+ Hidden after 2 click
+>>>>>>> 21fdadc17cd2018f65c637e5727de640db5036e3
```
### `v-clicks`
+<<<<<<< HEAD
`v-clicks` só é provido como um componente. É uma alternativa a aplicar a diretriz `v-click` em todos os elementos dentro dele. Ele é especialmente útil quando se está trabalhando com listas.
+=======
+`v-clicks` is only provided as a component. It's a shorthand to apply the `v-click` directive to all its child elements. It is especially useful when working with lists and tables.
+>>>>>>> 21fdadc17cd2018f65c637e5727de640db5036e3
```md
@@ -53,14 +106,162 @@ Tem o mesmo comportamento do `v-click`, mas em vez de fazer o elemento aparecer,
- Item 1
- Item 2
- Item 3
-- Item 4
```
+<<<<<<< HEAD
Um item se tornará visível a cada vez que você clicar em "próximo".
### Contagem de Cliques Customizadas
+=======
+An item will become visible each time you click "next".
+It accepts a `depth` prop for nested list:
+
+```md
+
+
+- Item 1
+ - Item 1.1
+ - Item 1.2
+- Item 2
+ - Item 2.1
+ - Item 2.2
+
+
+```
+
+Also, you can use the `every` prop to specify the number of items to show after each click:
+
+```md
+
+
+- Item 1 (part 1)
+- Item 1 (part 2)
+- Item 2 (part 1)
+- Item 2 (part 2)
+
+
+```
+
+### Positioning
+
+By default, the clicking animations take place one by one. You can customize the animation position of elements by using the `at` prop or the `v-click` directive with value.
+
+Like the CSS layout system, click-animated elements can be "relative" or "absolute":
+
+#### Relative Position
+
+This actual position of relative elements are calculated based on the previous relative elements:
+
+````md
+
visible after 1 click
+
visible after 3 clicks
+
hidden after 2 clicks
+
+```js {none|1|2}{at:'+5'}
+1 // highlighted after 7 clicks
+2 // highlighted after 8 clicks
+```
+````
+
+> [!NOTE]
+> The default value of `v-click` is `'+1'` when you don't specify it.
+
+In fact, `v-after` are just shortcuts for `v-click` with `at` prop:
+
+```md
+
+
+
+
+
+
+
+
+```
+
+:::info
+Only string values start with `'+'` or `'-'` like `'+1'` are treated as relative positions:
+
+| Value | Kind |
+| -------------- | -------- |
+| `'-1'`, `'+1'` | Relative |
+| `+1` === `1` | Absolute |
+| `'1'` | Absolute |
+
+So don't forget the single quotes for the relative values.
+:::
+
+#### Absolute Position
+
+The given value is the exact click count to show the element:
+
+````md
+
visible after 3 clicks
+
visible after 2 clicks
+
hidden after 1 click
+
+```js {none|1|2}{at:3}
+1 // highlighted after 3 clicks
+2 // highlighted after 4 clicks
+```
+````
+
+#### Mixed Case
+
+You can mix the absolute and relative positions:
+
+```md
+
visible after 1 click
+
visible after 3 clicks
+
visible after 2 click
+
visible after 1 click
+
visible after 4 clicks
+```
+
+The following example synchronizes the highlighting of the two code blocks:
+
+````md
+```js {1|2}{at:1}
+1 + 1
+'a' + 'b'
+```
+
+```js {1|2}{at:1}
+2
+'ab'
+```
+````
+
+### Enter & Leave
+
+You can also specify the enter and leave index for the `v-click` directive by passing an array. The end index is exclusive.
+
+```md
+
+ This will be hidden at click 2 and 3.
+
+
+
+ This will be shown at click 3, and hidden since click 4.
+
+```
+
+You can also use `v-switch` to achieve the same effect:
+
+```md
+
+ show at click 1, hide at click 2.
+ show at click 2, hide at click 5.
+ show at click 5, hide at click 7.
+
+```
+
+See [`VSwitch` Component](/builtin/components#vswitch) for more details.
+
+### Custom Total Clicks Count
+>>>>>>> 21fdadc17cd2018f65c637e5727de640db5036e3
Por padrão, o Slidev calcula quantos passos são necessários antes de passar para o próximo slide. Você pode sobrepor está configuração informando a propriedade `clicks` no frontmatter:
@@ -71,6 +272,7 @@ clicks: 10
---
```
+<<<<<<< HEAD
### Ordenação
Passando o índice o clique nas suas diretrizes, você pode customizar a ordem dos aparecimentos.
@@ -100,6 +302,9 @@ clicks: 3
```
### Transição de Elementos
+=======
+### Element Transitions
+>>>>>>> 21fdadc17cd2018f65c637e5727de640db5036e3
Quando você aplica a diretriz `v-click` aos seus elementos, a eles serão anexados a classe `slidev-vclick-target`. Quando os elementos estão ocultos, a classe `slidev-vclick-hidden` também será anexada. Por exemplo:
@@ -128,12 +333,18 @@ Por padrão, uma transição suave de opacidade é aplicada à essas classes:
}
```
+<<<<<<< HEAD
Você pode substituí-las no seu CSS customizado para alterar os efeitos de transição.
Por exemplo, você pode conseguir uma transição de aumentar a escala assim:
+=======
+You can override them to customize the transition effects in your custom stylesheets.
+
+For example, you can achieve the scaling up transitions by:
+>>>>>>> 21fdadc17cd2018f65c637e5727de640db5036e3
```css
-// styles.css
+/* styles.css */
.slidev-vclick-target {
transition: all 500ms ease;
@@ -161,7 +372,47 @@ Para especificar animações para um único slide ou layout definido:
Aprenda mais sobre a [customização de estilo](/custom/directory-structure#estilo).
+<<<<<<< HEAD
## Movimento
+=======
+## Rough Markers
+
+> Available since v0.48.0
+
+Slidev integrates [Rough Notation](https://github.com/linkstrifer/react-rough-notation) to allow marking or highlighting elements in your slides.
+
+### `v-mark`
+
+Rough Notation integrates comes with the `v-mark` directive.
+
+#### Type
+
+`v-mark.underline` for Underline mark, `v-mark.circle` for Circle mark, etc. Default to `underline`
+
+#### Color
+
+`v-mark.red` make the notation `red`. Supported builtin color themes from UnoCSS. For custom colors, use object syntax `v-mark="{ color: '#234' }"`
+
+#### Clicks
+
+`v-mark` works like `v-click` and will trigger after a click. Same as `v-click`, it allows you to pass a custom click value, like `v-mark="5"` or `v-mark="'+1'"`.
+
+#### Options
+
+Optionally you can pass an object to `v-mark` to specify the options, for example:
+
+```vue
+
+Important text
+
+```
+
+#### Preview
+
+
+
+## Motion
+>>>>>>> 21fdadc17cd2018f65c637e5727de640db5036e3
O Slidev tem o [@vueuse/motion](https://motion.vueuse.org/) integrado. Você pode usar a diretriz `v-motion` em qualquer elemento para aplicar movimento a ele. Por exemplo:
@@ -196,8 +447,116 @@ O texto `Slidev` se moverá de `-80px` até sua posição original na inicializa
>
> ```
+<<<<<<< HEAD
Saiba mais: [Demonstração](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)
## Transições de Página
> O suporte integrado para transição entre slides AINDA NÂO é provido na versão atual. Estamos planejando adicionar o suporte na próxima versão principal. Até lá, você ainda pode usar estilos customizados e bibliotecas para fazer isso.
+=======
+Learn mode: [Demo](https://sli.dev/demo/starter/7) | [@vueuse/motion](https://motion.vueuse.org/) | [v-motion](https://motion.vueuse.org/features/directive-usage) | [Presets](https://motion.vueuse.org/features/presets)
+
+## Slide 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)
+- `view-transition` - Slides with the view transitions API
+
+### View Transitions
+
+> Available since v0.43.0
+
+The **View Transitions API** provides a mechanism for easily creating animated transitions between different DOM states. Learn more how it works in [View Transitions API - MDN Web Docs - Mozilla](https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API).
+
+:::warning
+Experimental: This is not supported by all browsers. Check the [Browser compatibility table](https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API#browser_compatibility) carefully before using this.
+:::
+
+You can use the `view-transition-name` CSS property to name view transitions, which creates connections between different page elements and smooth transitions when switching slides.
+
+You can enable [MDC (Markdown Component) Syntax](/guide/syntax#mdc-syntax) support to conveniently name view-transitions:
+
+```md
+---
+transition: view-transition
+mdc: true
+---
+
+# View Transition {.inline-block.view-transition-title}
+
+---
+
+# View Transition {.inline-block.view-transition-title}
+```
+
+### 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 [``](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
+---
+```
+>>>>>>> 21fdadc17cd2018f65c637e5727de640db5036e3
diff --git a/guide/drawing.md b/guide/drawing.md
index 545d137..1a91b96 100644
--- a/guide/drawing.md
+++ b/guide/drawing.md
@@ -2,15 +2,25 @@
> Disponível a partir da v0.23
+<<<<<<< HEAD
Nós temos o [drauu](https://github.com/antfu/drauu) embutido para desenhos e anotações que podem melhorar ainda mais suas apresentações.
Pra começar, clique no ícone na barra de navegação e comece a desenhar. Isto também está disponível no [Modo Apresentador](/guide/presenter-mode). Desenhos e anotações que você ciar serão **sincronizadas** automaticamente por todas as instâncias em tempo real.
+=======
+[drauu](https://github.com/antfu/drauu) is built-in for drawing and annotation, should that help improve your presentation further.
-
+To start, click the icon in the toolbar and start drawing. It's also available in the [Presenter Mode](/guide/presenter-mode). Drawings and annotations you created will be **synced** automatically across all instances in real time.
+>>>>>>> 21fdadc17cd2018f65c637e5727de640db5036e3
+
+
## Use com uma caneta Stylus
+<<<<<<< HEAD
Quando usado com uma caneta stylus em um tablet (por exemplo, iPad com a Apple Pencil), o Slidev pode detectar com inteligência o tipo de entrada. Você pode desenhar diretamente nos seus slides com uma caneta sem precisar alternar para o modo de desenho, e tendo o controle de navegação com seus dedos ou mouse.
+=======
+When using a stylus pen on a tablet (for example, iPad with Apple Pencil), Slidev will intelligently detect the input type. You can directly draw on your slides with the pen without turning on the drawing mode, while having your fingers or mouse control the navigation.
+>>>>>>> 21fdadc17cd2018f65c637e5727de640db5036e3
## Manter Desenhos
@@ -18,7 +28,7 @@ A seguinte configuração do frontmatter te permite manter os desenhos como SVGs
```md
---
-drawings:
+drawings:
persist: true
---
```
@@ -29,7 +39,7 @@ Inteiramente:
```md
---
-drawings:
+drawings:
enabled: false
---
```
@@ -38,7 +48,7 @@ Apenas no Desenvolvimento:
```md
---
-drawings:
+drawings:
enabled: dev
---
```
@@ -47,20 +57,28 @@ Apenas no Modo de Apresentador:
```md
---
-drawings:
+drawings:
presenterOnly: true
---
```
## Sincronização dos Desenhos
+<<<<<<< HEAD
Por padrão, o Slidev sincroniza os seus desenhos por todas as instâncias. Se você estiver compartilhando seus slides com outras pessoas, você pode querer desabilitar a sincronização assim:
+=======
+By default, Slidev syncs up your drawings across all instances. If you are sharing your slides with others, you might want to disable the syncing via:
+>>>>>>> 21fdadc17cd2018f65c637e5727de640db5036e3
```md
---
-drawings:
+drawings:
syncAll: false
---
```
+<<<<<<< HEAD
Com esta configuração, só os desenhos da instância do apresentador serão sincronizados com as outras.
+=======
+With this config, only the drawing from the presenter instance will be able to sync with others.
+>>>>>>> 21fdadc17cd2018f65c637e5727de640db5036e3
diff --git a/guide/editors.md b/guide/editors.md
index 5b86fc4..d68b99e 100644
--- a/guide/editors.md
+++ b/guide/editors.md
@@ -1,12 +1,20 @@
# Suporte em Editores
+<<<<<<< HEAD
Já que o Slidev usa Markdown como fonte, você pode usar QUALQUER editor que ama escrever.
+=======
+Since Slidev uses Markdown as the source entry, you can use any editor you prefer to create your slides.
+>>>>>>> 21fdadc17cd2018f65c637e5727de640db5036e3
Se você quiser certo gerenciamento de alto-nível em seus slides, nós provemos as seguintes integrações em editores pra você!
## Editor Integrado
+<<<<<<< HEAD
O Slidev vem com um editor [CodeMirror](https://codemirror.net/) integrado que vai instantaneamente recarregar e salvar as alterações no seu arquivo.
+=======
+Slidev comes with an integrated editor that will instantly reload and save the changes to your file.
+>>>>>>> 21fdadc17cd2018f65c637e5727de640db5036e3
Clique no botão para abri-lo.
@@ -32,12 +40,55 @@ A extensão do VS Code fornece algumas funcionalidades para te ajudar a organiza
### Funcionalidades
+<<<<<<< HEAD
- Ver slides no painel lateral
- Botões de ir para o próximo / anterior
- Re-ordenação dos slides
- Separação de blocos no slide
- Conversão de Markdown para HTML
+=======
+- Preview slides in the side panel
+- Slides tree view
+- Re-ordering slides
+- Folding for slide blocks
+- Multiple slides project support
+- Start the dev server with one click
+>>>>>>> 21fdadc17cd2018f65c637e5727de640db5036e3
-
+
-
+::: code-group
+
+
+
+
+
+:::
+
+### Installation
+
+You can install the extension from the [VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=antfu.slidev).
+
+### Usage
+
+Click the `Slidev` icon in the activity bar to open the **Slidev panel**. In the Slidev panel, you can see the projects tree view, slides tree view, and the preview webview.
+
+In the **projects tree view**, you can see all the Slidev projects in your workspace. You can dlick the item to open the corresponding file, and click the icon over it to switch the active project. The icon allows you to load a slides project that wasn't scanned automatically.
+
+In the **slides tree view**, you can see all the slides in the active project. You can click the item to move you cursor to the slide in the editor, and drag and drop to reorder the slides.
+
+In the **preview webview**, you can click the icon to start the dev server and click the icon to open the slides in the browser. Toggle icon to sync/unsync the preview navigation with the editor cursor.
+
+There are also some **commands** you can use. Type `Slidev` in the command palette to see them.
+
+You can add glob patterns to the `slidev.include` configuration to include files as Slidev entries. The default value is `["**/*.md"]`. Example:
+
+```json
+{
+ "slidev.include": ["**/presentation.md"]
+}
+```
+
+## Prettier Plugin
+
+Slidev also provides a Prettier plugin to format your slides. You can use it with your favorite editor that supports Prettier. Docs for the plugin can be found [here](https://github.com/slidevjs/prettier-plugin).
diff --git a/guide/exporting.md b/guide/exporting.md
index 37d5bfd..53f8b80 100644
--- a/guide/exporting.md
+++ b/guide/exporting.md
@@ -1,22 +1,36 @@
# Exportando
-## PDF
+## Slides
+<<<<<<< HEAD
> A exportação para PDF depende do [Playwright](https://playwright.dev) para renderizar. Você precisa instalar o [`playwright-chromium`](https://playwright.dev/docs/installation#download-single-browser-binary) primeiro para usar esta funcionalidade.
> Se você estiver fazendo exportações num ambiente de CI, [o guia do playwright para CI](https://playwright.dev/docs/ci) pode ser útil.
Instale o `playwright-chromium`
+=======
+### PDF
+
+> Exporting to PDF, PPTX, or PNG relies on [Playwright](https://playwright.dev) for rendering. You will therefore need to install [`playwright-chromium`](https://npmjs.com/package/playwright-chromium) to use this feature.
+> If you are exporting within a CI environment, [the playwright CI guide](https://playwright.dev/docs/ci) can be helpful.
+
+1. Install `playwright-chromium`:
+>>>>>>> 21fdadc17cd2018f65c637e5727de640db5036e3
```bash
$ npm i -D playwright-chromium
```
+<<<<<<< HEAD
Agora exporte seus slides para PDF usando o seguinte comando
+=======
+2. Now export your slides to PDF using the following command:
+>>>>>>> 21fdadc17cd2018f65c637e5727de640db5036e3
```bash
$ slidev export
```
+<<<<<<< HEAD
Após alguns segundos, seus slides estarão prontos em `./slides-exports.pdf`.
### Exportar etapas de cliques
@@ -31,11 +45,185 @@ $ slidev export --with-clicks
## PNGs
Ao passar a opção `--format png`, o Slidev vai exportar imagens em PNG para cada slide em vez de PDF.
+=======
+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:
+>>>>>>> 21fdadc17cd2018f65c637e5727de640db5036e3
```bash
$ slidev export --format png
```
+You can also compile a markdown file composed of compiled png using `--format md`:
+
+```bash
+$ slidev export --format md
+```
+
+### PPTX (Microsoft PowerPoint)
+
+Slidev can also export your slides as a PPTX file:
+
+```bash
+$ slidev export --format pptx
+```
+
+Note that all the slides in the PPTX file will be exported as images, so the text will not be selectable. Presenter notes will be conveyed into the PPTX file on a per-slide basis.
+
+In this mode, the `--with-clicks` option is enabled by default. To disable it, use `--with-clicks false`.
+
+### 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
+
+> Available since v0.21
+
+By default, Slidev exports one page per slide with clicks animations disabled. If you want to export slides with multiple steps into multiple pages, pass the `--with-clicks` option:
+
+```bash
+$ slidev export --with-clicks
+```
+
+### 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 slides2.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
Veja [Hospedagem Estática](/guide/hosting).
+=======
+See [Static Hosting](/guide/hosting).
+
+## Exportable Docker Image
+
+To support the export feature, there is a [docker image](/guide/install#install-on-docker) (maintained by [@tangramor](https://github.com/tangramor)) with tag **playwright**. Run following command in your work folder:
+
+```bash
+docker run --name slidev --rm -it \
+ -v ${PWD}:/slidev \
+ -p 3030:3030 \
+ -e NPM_MIRROR="https://registry.npmmirror.com" \
+ tangramor/slidev:playwright
+```
+
+Then you can use the export feature like the following under your work folder:
+
+```bash
+docker exec -i slidev npx slidev export --timeout 2m --output slides.pdf
+```
+
+## Troubleshooting
+
+### Timeouts
+
+For big presentations you might want to increase the Playwright timeout with `--timeout`:
+
+```bash
+$ slidev export --timeout 60000
+```
+
+### Wait
+
+Some parts of your slides may require a longer time to render. You can use the `--wait` option to have an extra delay before exporting:
+
+```bash
+$ slidev export --wait 10000
+```
+
+There is also a `--wait-until` option to wait for a state before exporting each slide:
+
+```bash
+$ slidev export --wait-until none
+```
+
+Possible values:
+
+- `'networkidle'` - (_default_) consider operation to be finished when there are no network connections for at least `500` ms. Don't use this method for testing, rely on web assertions to assess readiness instead.
+- `'domcontentloaded'` - consider operation to be finished when the `DOMContentLoaded` event is fired.
+- `'load'` - consider operation to be finished when the `load` event is fired.
+- `'none'` - do not wait for any event.
+
+::: warning
+When specifying values other than `'networkidle'`, please make sure the printed slides are complete and correct. If some contents are missing, you may need to use the `--wait` option.
+:::
+
+### Executable path
+
+Chromium may miss some features like codecs that are required to decode some videos. You can set the browser executable path for Playwright to your Chrome or Edge using `--executable-path`:
+
+```bash
+$ slidev export --executable-path [path_to_chromium]
+```
+>>>>>>> 21fdadc17cd2018f65c637e5727de640db5036e3
diff --git a/guide/faq.md b/guide/faq.md
index 90f19f1..49a7df3 100644
--- a/guide/faq.md
+++ b/guide/faq.md
@@ -4,7 +4,11 @@
Já que o Slidev é baseado na Web, você pode aplicar qualquer layout de grid como quiser. [CSS Grids](https://css-tricks.com/snippets/css/complete-guide-grid/), [flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/), ou até [Masonry](https://css-tricks.com/native-css-masonry-layout-in-css-grid/), você tem total controle.
+<<<<<<< HEAD
Como nós temos o [Windi CSS](https://windicss.org/) integrado, aqui vai um jeito simples de você fazer isso:
+=======
+Since [UnoCSS](https://unocss.dev/) is built-in, here's one way that you can reference:
+>>>>>>> 21fdadc17cd2018f65c637e5727de640db5036e3
```html
@@ -24,7 +28,7 @@ A segunda coluna
Vá além, você pode customizar o tamanho de cada coluna assim:
```html
-
+
A primeira coluna (200px)
@@ -43,9 +47,13 @@ A terceira coluna (10% da largura do elemento pai)
```
+<<<<<<< HEAD
Aprenda mais sobre [Windi CSS Grids](https://windicss.org/utilities/grid.html).
## Posicionamento
+=======
+## Positioning
+>>>>>>> 21fdadc17cd2018f65c637e5727de640db5036e3
Os slides são definidos em um tamanho fixo (padrão `980x552px`) e se ajusta para caber na tela do usuário. Você pode tranquilamente usar posições absolutas em seus slides e elas serão expandidas com a tela.
@@ -96,7 +104,7 @@ Saiba mais: [Estilos Integrados](/guide/syntax.html#estilos-integrados)
Você pode fornecer estilos globais customizados criando um arquivo `./style.css`, por exemplo:
```css
-/* style.css */
+/* style.css */
h1 {
font-size: 10em !important;
diff --git a/guide/hosting.md b/guide/hosting.md
index ee0b71e..ab7945e 100644
--- a/guide/hosting.md
+++ b/guide/hosting.md
@@ -2,17 +2,33 @@
## Compilando Single Page Applications (SPA)
+<<<<<<< HEAD
Você também pode compilar os slides em uma aplicação SPA auto-hospedável:
+=======
+You can build the slides into a self-hostable SPA:
+>>>>>>> 21fdadc17cd2018f65c637e5727de640db5036e3
```bash
$ slidev build
```
+<<<<<<< HEAD
A aplicação gerada estará disponível na pasta `dist/` e a partir daí você pode hospedá-la no [GitHub Pages](https://pages.github.com/), [Netlify](https://netlify.app/), [Vercel](https://vercel.com/), ou em qualquer outra plataforma que preferir. Agora você pode compartilhar seus slides com o todo mundo com um único 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 other web server or service that you want. Now you can share your slides with the rest of the world with a single link.
+>>>>>>> 21fdadc17cd2018f65c637e5727de640db5036e3
### Diretório Base
+<<<<<<< HEAD
Para implantar seus slides em sub-rotas, você precisará passar a opção `--base`. Por exemplo:
+=======
+To deploy your slides under sub-routes, you will need to pass the `--base` option. The `--base` path **must begin and end** with a slash `/`; for example:
+>>>>>>> 21fdadc17cd2018f65c637e5727de640db5036e3
```bash
$ slidev build --base /palestras/minha-palestra-legal/
@@ -20,7 +36,11 @@ $ slidev build --base /palestras/minha-palestra-legal/
Consulte a [documentação do Vite](https://vitejs.dev/guide/build.html#public-base-path) para mais detalhes.
+<<<<<<< HEAD
## Disponibilize um PDF para download
+=======
+### Provide a Downloadable PDF
+>>>>>>> 21fdadc17cd2018f65c637e5727de640db5036e3
Você pode disponibilizar um PDF para download aos visitantes da sua aplicação SPA com a seguinte configuração:
@@ -30,9 +50,15 @@ download: true
---
```
+<<<<<<< HEAD
O Slidev vai gerar um arquivo PDF na compilação e um botão de download aparecerá na aplicação SPA.
Você também pode prover uma URL customizada para o PDF. Nesse caso, o processo de renderização do arquivo será pulado.
+=======
+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.
+>>>>>>> 21fdadc17cd2018f65c637e5727de640db5036e3
```md
---
@@ -40,7 +66,54 @@ download: 'https://myside.com/my-talk.pdf'
---
```
+<<<<<<< HEAD
## Exemplos
+=======
+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 build multiple slide decks at once.
+
+```bash
+$ slidev build slides1.md slides2.md
+```
+
+Or
+
+```bash
+$ slidev build *.md
+```
+
+In this case, each input file will generate a folder containing the build in the output directory.
+
+## Examples
+>>>>>>> 21fdadc17cd2018f65c637e5727de640db5036e3
Aqui estão alguns exemplos de aplicações SPA exportadas:
@@ -51,7 +124,11 @@ Para mais, veja a [Galeria](/showcases).
## Hospedando
+<<<<<<< HEAD
Nós recomendamos usar o comando `npm init slidev@lastest` para iniciar seu projeto, que já contém as configurações necessárias para serviços de hospedagem.
+=======
+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.
+>>>>>>> 21fdadc17cd2018f65c637e5727de640db5036e3
### Netlify
@@ -59,21 +136,25 @@ Nós recomendamos usar o comando `npm init slidev@lastest` para iniciar seu proj
Crie o arquivo `netlify.toml` na raiz do projeto com o seguinte conteúdo.
-```ts
-[build.environment]
- NODE_VERSION = "14"
-
+```toml
[build]
- publish = "dist"
- command = "npm run build"
+publish = 'dist'
+command = 'npm run build'
+
+[build.environment]
+NODE_VERSION = '20'
[[redirects]]
- from = "/*"
- to = "/index.html"
- status = 200
+from = '/*'
+to = '/index.html'
+status = 200
```
+<<<<<<< HEAD
Depois vá para o seu painel de controle do Netlify e crie um novo site com o repositório.
+=======
+Then go to your Netlify dashboard and create a new site with the repository.
+>>>>>>> 21fdadc17cd2018f65c637e5727de640db5036e3
### Vercel
@@ -89,33 +170,70 @@ Crie o arquivo `vercel.json` na raiz do projeto com o seguinte conteúdo.
}
```
+<<<<<<< HEAD
Depois vá para o seu painel de controle da Vercel e crie um novo site com o repositório.
+=======
+Then go to your Vercel dashboard and create a new site with the repository.
+>>>>>>> 21fdadc17cd2018f65c637e5727de640db5036e3
-## GitHub Pages
+### GitHub Pages
- [GitHub Pages](https://pages.github.com/)
+<<<<<<< HEAD
Crie o arquivo `.github/workflows/deploy.yml` com o seguinte conteúdo para implantar seus slides no Github Pages pelo Github Actions.
+=======
+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 the following content to deploy your slides to GitHub Pages via GitHub Actions.
+>>>>>>> 21fdadc17cd2018f65c637e5727de640db5036e3
```yaml
name: Deploy pages
-on: push
+
+on:
+ workflow_dispatch: {}
+ push:
+ branches:
+ - main
+
jobs:
deploy:
runs-on: ubuntu-latest
+
+ permissions:
+ contents: read
+ pages: write
+ id-token: write
+
+ environment:
+ name: github-pages
+ url: ${{ steps.deployment.outputs.page_url }}
+
steps:
- - uses: actions/checkout@v2
- - uses: actions/setup-node@v2
+ - uses: actions/checkout@v4
+
+ - uses: actions/setup-node@v4
with:
- node-version: '14'
+ node-version: 'lts/*'
+
- name: Install dependencies
run: npm install
+
- name: Build
- run: npm run build
- - name: Deploy pages
- uses: crazy-max/ghaction-github-pages@v2
+ run: npm run build -- --base /${{github.event.repository.name}}/
+
+ - uses: actions/configure-pages@v4
+
+ - uses: actions/upload-pages-artifact@v3
with:
- build_dir: dist
- env:
- GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+ path: dist
+
+ - name: Deploy
+ id: deployment
+ uses: actions/deploy-pages@v4
```
+
+- In your repository, go to Settings>Pages. Under "Build and deployment", select "Github Actions".
+- Finally, after all workflows are executed, a link to the slides should appear under Settings>Pages.
diff --git a/guide/index.md b/guide/index.md
index 7423c3e..fba859f 100644
--- a/guide/index.md
+++ b/guide/index.md
@@ -1,13 +1,24 @@
+<<<<<<< HEAD
# Primeiros Passos
## Introdução
Slidev (slide + dev, `/slʌɪdɪv/`) é uma ferramenta baseada em tecnologias web para criar e apresentar slides. O Slidev foi projetado para desenvolvedores focarem em escrever conteúdo em Markdown e ainda ter o poder do HTML e dos componentes do Vue para fornecer layouts e designs perfeitos com demonstrações interativas de suas apresentações.
+=======
+---
+outline: deep
+---
+
+# Getting Started
+
+Slidev (slide + dev, **/slaɪdɪv/**) is a web-based slides maker and presenter. It's designed for developers to focus on writing content in Markdown while also having the power of HTML and Vue components to deliver pixel-perfect layouts and designs with embedded interactive demos in your presentations.
+>>>>>>> 21fdadc17cd2018f65c637e5727de640db5036e3
É usado um arquivo Markdown cheio de recursos para gerar slides bonitos com uma experiência de *refresh* instantâneo, além de várias integrações embutidas como desenvolvimento de código em tempo real, exportação pra PDF, gravação da apresentação, e assim por diante. Como tem como base tecnologias da web, você pode fazer tudo com o Slidev - as possibilidades são infinitas.
Você pode saber mais sobre a lógica por trás do projeto na seção [Por que Slidev](/guide/why).
+<<<<<<< HEAD
### Funcionalidades
- 📝 [**Baseado em markdown**](/guide/syntax.html) - use seus editores fluxos de trabalho favoritos
@@ -54,11 +65,43 @@ O Slidev é possível pela combinação dessas ferramentes e tecnologias.
#### Crie Localmente
Com NPM:
+=======
+## Features
+
+- 📝 [**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).
+- 🤹 [**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
+
+## Scaffolding Your First Presentation
+
+### Try it Online
+
+Start Slidev right in your browser: [sli.dev/new](https://sli.dev/new)
-```bash
-$ npm init slidev
+[](https://sli.dev/new)
+
+### Create Locally
+
+::: code-group
+>>>>>>> 21fdadc17cd2018f65c637e5727de640db5036e3
+
+```bash [npm]
+npm init slidev@latest
```
+<<<<<<< HEAD
Com Yarn:
```bash
@@ -68,6 +111,21 @@ $ yarn create slidev
Siga as instruções e comece a fazer seus slides agora mesmo! Para mais detalhes sobre a sintaxe do markdown, dê uma olhada no [guia de sintaxe](/guide/syntax).
### Interface de Linha de Comando
+=======
+```bash [yarn]
+yarn create slidev
+```
+
+```bash [pnpm]
+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
+>>>>>>> 21fdadc17cd2018f65c637e5727de640db5036e3
Em um projeto onde o Slidev está instalado, você pode usar o binário `slidev` nos seus scripts do npm.
@@ -81,7 +139,11 @@ Em um projeto onde o Slidev está instalado, você pode usar o binário `slidev`
}
```
+<<<<<<< HEAD
Você também pode usá-lo com o [`npx`](https://www.npmjs.com/package/npx)
+=======
+Otherwise, you can use it with [`npx`](https://github.com/npm/cli/blob/latest/bin/npx)
+>>>>>>> 21fdadc17cd2018f65c637e5727de640db5036e3
```bash
$ npx slidev
@@ -89,11 +151,15 @@ $ npx slidev
Rode `slidev --help` para mais opções disponíveis.
+<<<<<<< HEAD
### Sintaxe do Markdown
+=======
+## Markdown Syntax
+>>>>>>> 21fdadc17cd2018f65c637e5727de640db5036e3
O Slidev lê o seu arquivo `slides.md` na raiz do seu projeto e o converte em slides. A qualquer alteração que você faça nele, o conteúdo dos slides serão atualizados imediatamente. Por exemplo:
-~~~md
+````md
# Slidev
Olá Mundo
@@ -104,6 +170,7 @@ Olá Mundo
Use blocos de código diretamente para o destaque
+<<<<<<< HEAD
//```ts
console.log('Olá, Mundo!')
//```
@@ -114,3 +181,30 @@ console.log('Olá, Mundo!')
~~~
Leia mais sobre a sintaxe Markdown do Slidev no [guia de sintaxe](/guide/syntax).
+=======
+```ts
+console.log('Hello, World!')
+```
+
+---
+
+# Page 3
+````
+
+Read more about the Slidev Markdown syntax in the [syntax guide](/guide/syntax).
+
+## Tech Stack
+
+Slidev is made possible by combining these tools and technologies.
+
+- [Vite](https://vitejs.dev) - An extremely fast frontend tooling
+- [Vue 3](https://v3.vuejs.org/) powered [Markdown](https://daringfireball.net/projects/markdown/syntax) - Focus on the content while having the power of HTML and Vue components whenever needed
+- [UnoCSS](https://github.com/unocss/unocss) - On-demand utility-first CSS framework, style your slides at ease
+- [Shiki](https://github.com/shikijs/shiki), [Monaco Editor](https://github.com/Microsoft/monaco-editor) - First-class code snippets support with live coding capability
+- [RecordRTC](https://recordrtc.org) - Built-in recording and camera view
+- [VueUse](https://vueuse.org) family - [`@vueuse/core`](https://github.com/vueuse/vueuse), [`@vueuse/head`](https://github.com/vueuse/head), [`@vueuse/motion`](https://github.com/vueuse/motion), etc.
+- [Iconify](https://iconify.design/) - Iconsets collection.
+- [Drauu](https://github.com/antfu/drauu) - Drawing and annotations support
+- [KaTeX](https://katex.org/) - LaTeX math rendering.
+- [Mermaid](https://mermaid-js.github.io/mermaid) - Textual Diagrams.
+>>>>>>> 21fdadc17cd2018f65c637e5727de640db5036e3
diff --git a/guide/install.md b/guide/install.md
index f621fa5..c657e61 100644
--- a/guide/install.md
+++ b/guide/install.md
@@ -2,16 +2,25 @@
## Modelo Inicial
+<<<<<<< HEAD
> Slidev requer [**Node.js >=14.0**](https://nodejs.org/)
O melhor jeito de começar é usando nosso modelo oficial.
Com NPM:
+=======
+> Slidev requires [**Node.js >=18.0**](https://nodejs.org/)
-```bash
-$ npm init slidev@latest
+The best way to get started is by using our official starter template:
+
+::: code-group
+>>>>>>> 21fdadc17cd2018f65c637e5727de640db5036e3
+
+```bash [npm]
+npm init slidev@latest
```
+<<<<<<< HEAD
Com Yarn:
```bash
@@ -21,26 +30,49 @@ $ yarn create slidev
Siga as instruções e vai abrir automaticamente pra você uma apresentação de slides em http://localhost:3030/.
A apresentação também contém a configuração básica e uma breve demonstração de como começar com o Slidev.
+=======
+```bash [yarn]
+yarn create slidev
+```
+
+```bash [pnpm]
+pnpm create slidev
+```
+
+:::
+
+Follow the prompts and it will open the slideshow at `http://localhost:3030/` automatically for you.
+
+It also contains a basic setup along with a short demo with instructions on how to get started with Slidev.
+>>>>>>> 21fdadc17cd2018f65c637e5727de640db5036e3
## Instalação Manual
+<<<<<<< HEAD
Se ainda assim preferir instalar o Slidev manualmente ou se quiser integrá-lo em seus projetos existentes, você pode fazer assim:
+=======
+If you prefer to install Slidev manually or would like to integrate it into an existing project, you can do:
+>>>>>>> 21fdadc17cd2018f65c637e5727de640db5036e3
```bash
-$ npm install @slidev/cli @slidev/theme-default
-```
-```bash
-$ touch slides.md
-```
-```bash
-$ npx slidev
+npm install @slidev/cli @slidev/theme-default
```
+<<<<<<< HEAD
> Observe que se você estiver usando o [pnpm](https://pnpm.io), será necessário habilitar a opção [shamefully-hoist](https://pnpm.io/npmrc#shamefully-hoist) para que o Slidev funcione corretamente:
>
> ```bash
> echo 'shamefully-flatten=true' >> .npmrc
> ```
+=======
+```bash
+touch slides.md
+```
+
+```bash
+npx slidev
+```
+>>>>>>> 21fdadc17cd2018f65c637e5727de640db5036e3
## Instalação Global
@@ -49,19 +81,180 @@ $ npx slidev
Você pode instalar o Slidev globalmente com o seguinte comando
```bash
-$ npm i -g @slidev/cli
+npm i -g @slidev/cli
```
E agora você pode usar comando `slidev` em qualquer lugar sem ter que criar um projeto toda hora.
```bash
-$ slidev
+npx slidev
```
Este comando também vai tentar o `@slidev/cli` local se ele for encontrado nos `node_modules`.
## Instalação no Docker
+<<<<<<< HEAD
Se você precisar de uma maneira rápida de rodar uma apresentação com container, você pode usar a imagem do [docker](https://hub.docker.com/r/stig124/slidev) mantida por [stig124](https://github.com/Stig124), ou construir sua própria.
Consulte o [repositório do slidevjs/container](https://github.com/slidevjs/container) para mais detalhes.
+=======
+If you need a rapid way to run a presentation with containers, you can use the prebuilt [docker](https://hub.docker.com/r/tangramor/slidev) image maintained by [tangramor](https://github.com/tangramor), or build your own.
+
+Just run following command in your work folder:
+
+```bash
+docker run --name slidev --rm -it \
+ --user node \
+ -v ${PWD}:/slidev \
+ -p 3030:3030 \
+ -e NPM_MIRROR="https://registry.npmmirror.com" \
+ tangramor/slidev:latest
+```
+
+**_Note_**: You can use `NPM_MIRROR` to specify a npm mirror to speed up the installation process.
+
+If your work folder is empty, it will generate a template `slides.md` and other related files under your work folder, and launch the server on port `3030`.
+
+You can access your slides from `http://localhost:3030/`
+
+### Build deployable images
+
+You can create your own slidev project as a docker image with Dockerfile:
+
+```Dockerfile
+FROM tangramor/slidev:latest
+
+ADD . /slidev
+```
+
+Create the docker image: `docker build -t myppt .`
+
+And run the container: `docker run --name myslides --rm --user node -p 3030:3030 myppt`
+
+You can visit your slides from `http://localhost:3030/`
+
+### Build hostable SPA (Single Page Application)
+
+Run `docker exec -i slidev npx slidev build` on the running container `slidev`. It will generate static HTML files under `dist` folder.
+
+#### Host on Github Pages
+
+You can host `dist` as a static website via services such as [GitHub Pages](https://tangramor.github.io/slidev_docker/) or GitLab Pages.
+
+Since in GitHub Pages the URL may contain subfolders, you may use `--base=//` option during the build process, such as `docker exec -i slidev npx slidev build --base=/slidev_docker/`.
+
+To avoid the Jekyll build process, you'll need to add an empty file `.nojekyll`.
+
+#### Host via docker
+
+You can also host Slidev yourself via docker:
+
+```bash
+docker run --name myslides --rm -p 80:80 -v ${PWD}/dist:/usr/share/nginx/html nginx:alpine
+```
+
+Or create a static image with following Dockerfile:
+
+```Dockerfile
+FROM nginx:alpine
+
+COPY dist /usr/share/nginx/html
+```
+
+Create the docker image: `docker build -t mystaticppt .`
+
+And run the container: `docker run --name myslides --rm -p 80:80 mystaticppt`
+
+You can visit your slides from http://localhost/
+
+Refer to [tangramor/slidev_docker](https://github.com/tangramor/slidev_docker) for more details.
+
+## Command Line Interface (CLI)
+
+`@slidev/cli` exposes a few commands you can use with `npx slidev ...` or by adding scripts in your `package.json`:
+
+```json
+{
+ "script": {
+ "dev": "slidev"
+ }
+}
+```
+
+In that case you will be able to run `npm run dev`.
+
+You can pass options to any commands:
+
+- boolean option are `true` if they are present, false otherwise (example: `slidev --open`)
+- some options can have values you can add just after the option or by using the `=` character (example: `slidev --port 8080` or `slidev --port=8080`)
+
+If you use npm scripts, don't forget to add `--` after the npm command:
+
+```bash
+npm run slidev -- --open
+```
+
+### `slidev [entry]`
+
+Start a local server for Slidev.
+
+- `[entry]` (`string`, default: `slides.md`): path to the markdown file containing your slides.
+
+Options:
+
+- `--port`, `-p` (`number`, default: `3030`): port number.
+- `--open`, `-o` (`boolean`, default: `false`): open in browser.
+- `--remote [password]` (`string`): listen to public host and enable remote control, if a value is passed then the presenter mode is private and only accessible by passing the given password in the URL query `password` parameter.
+- `--bind` (`string`, default: `0.0.0.0`): specify which IP addresses the server should listen on in the remote mode.
+- `--log` (`'error', 'warn', 'info', 'silent'`, default: `'warn'`): Log level.
+- `--force`, `-f` (`boolean`, default: `false`): force the optimizer to ignore the cache and re-bundle.
+- `--theme`, `-t` (`string`): override theme.
+
+### `slidev build [entry]`
+
+Build a hostable SPA.
+
+- `[entry]` (`string`, default: `slides.md`): path to the slides markdown file.
+
+Options:
+
+- `--out`, `-o` (`string`, default: `dist`): output dir.
+- `--base` (`string`, default: `/`): base URL (see https://cli.vuejs.org/config/#publicpath)
+- `--download` (`boolean`, default: `false`): allow the download of the slides as a PDF inside the SPA.
+- `--theme`, `-t` (`string`): override theme.
+
+### `slidev export [entry]`
+
+Export slides to PDF (or other format). See [Exporting](/guide/exporting.html) for more details.
+
+- `[entry]` (`string`, default: `slides.md`): path to the slides markdown entry.
+
+Options:
+
+- `--output` (`string`, default: use `exportFilename` (see https://sli.dev/custom/#frontmatter-configures) or use `[entry]-export`): path to the output.
+- `--format` (`'pdf', 'png', 'pptx', '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.
+
+### `slidev format [entry]`
+
+Format the markdown file.
+
+- `[entry]` (`string`, default: `slides.md`): path to the slides markdown entry.
+
+### `slidev theme [subcommand]`
+
+Theme related operations.
+
+Subcommands:
+
+- `eject [entry]`: Eject current theme into local file system
+ - `[entry]` (`string`, default: `slides.md`): path to the slides markdown entry.
+ - Options:
+ - `--dir` (`string`, default: `theme`): output dir.
+ - `--theme`, `-t` (`string`): override theme.
+>>>>>>> 21fdadc17cd2018f65c637e5727de640db5036e3
diff --git a/guide/navigation.md b/guide/navigation.md
index bce4f7d..a17acb2 100644
--- a/guide/navigation.md
+++ b/guide/navigation.md
@@ -2,6 +2,7 @@
## Barra de Navegação
+<<<<<<< HEAD
Mova seu mouse para o canto inferior esquerdo da página do Slidev, a barra de navegação aparecerá.

@@ -23,11 +24,38 @@ Mova seu mouse para o canto inferior esquerdo da página do Slidev, a barra de n
| - | | mostra informações sobre os slides |
| - | | mostra o menu de configurações |
| g | - | mostra o ir para... |
+=======
+Move your mouse to the bottom left corner of Slidev page to make the navigation bar appear.
+
+
+
+| Shortcuts | Button | Description |
+| ----------------------------------- | ------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------ |
+| f | | toggle fullscreen |
+| right / space | | next animation or slide |
+| left | | previous animation or slide |
+| up | - | previous slide |
+| down | - | next slide |
+| o | | toggle [slides overview](#slides-overview) |
+| d | | toggle dark mode |
+| - | | toggle [camera view](/guide/recording#camera-view) |
+| - | | [recording](/guide/recording#camera-view) |
+| - | | enter [presenter mode](/guide/presenter-mode) |
+| - | | toggle [integrated editor](/guide/editors#integrated-editor) |
+| - | | download slides (only appear in [SPA build](/guide/exporting#single-page-application-spa)) |
+| - | | show information about the slides |
+| - | | show settings menu |
+| g | - | show goto... |
+>>>>>>> 21fdadc17cd2018f65c637e5727de640db5036e3
## Visualização dos Slides
+<<<<<<< HEAD
Ao apertar o ou clicar no botão na barra de navegação, você pode ter uma visão geral dos slides para que você possa alterná-los facilmente.
+=======
+By pressing o or clicking the button in the navigation bar, you can have the overview of your slides so you can jump between them easily.
+>>>>>>> 21fdadc17cd2018f65c637e5727de640db5036e3

diff --git a/guide/presenter-mode.md b/guide/presenter-mode.md
index f7d45b2..51dd1e7 100644
--- a/guide/presenter-mode.md
+++ b/guide/presenter-mode.md
@@ -1,5 +1,41 @@
# Modo Apresentador
+<<<<<<< HEAD
Clique no botão no painel de navegação, ou visite manualmente http://localhost:3030/presenter para entrar no modo apresentador. Sempre que você entrar no modo de apresentador, outras instâncias da página ficarão automaticamente sincronizadas com o apresentador.
+=======
+Click the button in the navigation panel, or visit `http://localhost:3030/presenter` manually, to enter the presenter mode. To present, you'll want to open two browser windows, one for the presenter and one for the audience. Generally maximizing the slideshow window on your projector screen, then controlling it from your laptop's screen is how people present with Slidev.
+
+Whenever you change slides in the presenter mode, all other page instances will automatically change as well, to stay in sync with the presenter.
+>>>>>>> 21fdadc17cd2018f65c637e5727de640db5036e3

+
+## Disabling
+
+Presenter mode is enabled by default.
+
+You can disable this feature with the following config:
+
+```md
+---
+presenter: false
+---
+```
+
+Alternately you can enable it only for `dev` or `build` modes 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`.
+
+If you want to share your slides with other people but you don't want them to access the presenter mode (either because you're ashamed of your presenter notes, or because you don't want them to mess up your presentation), you can provide a password to protect the presenter 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/recording.md b/guide/recording.md
index 32671bb..b0e27ce 100644
--- a/guide/recording.md
+++ b/guide/recording.md
@@ -1,16 +1,24 @@
# Gravando
+<<<<<<< HEAD
O Slidev tem gravação e visão da câmera integrados. Você pode usá-las para gravar sua apresentação facilmente em um lugar.
+=======
+Slidev has a built-in recording feature, as well as a camera view. You can use them to record your presentation easily in one simple tool rather than juggling a bunch of disparate recording options while also giving a talk.
+>>>>>>> 21fdadc17cd2018f65c637e5727de640db5036e3
## Visão da Câmera
Clique no botão no painel de navegação para mostrar sua câmera na apresentação. Você pode arrastar para movê-la, e usar o manipulador no canto inferior direito para redimensioná-la. O tamanho e a posição vai continuar no `localStorage`, por isso vai permanecer mesmo após recarregamentos, então você não precisa se preocupar com isso.
-
+
## Gravando
+<<<<<<< HEAD
Clicar no botão no painel de navegação vai abrir uma caixa de diálogo pra você. Lá você pode escolher entre gravar sua câmera embutida nos slides ou separar as gravações em dois arquivos.
+=======
+Clicking the button in the navigation panel will bring up a dialog for you. Here you can choose to either record your camera output embedded in your slides or to separate them into two video files.
+>>>>>>> 21fdadc17cd2018f65c637e5727de640db5036e3
Esta funcionalidade é possível graças ao [RecordRTC](https://github.com/muaz-khan/RecordRTC) e usa o [WebRTC API](https://webrtc.org/).
diff --git a/guide/syntax.md b/guide/syntax.md
index 6594d8b..c99e571 100644
--- a/guide/syntax.md
+++ b/guide/syntax.md
@@ -1,10 +1,22 @@
+<<<<<<< HEAD
# Sintaxe do Markdown
Os slides são escritos em **um único arquivo markdown** (por padrão `./slides.md`).
Você pode usar [os recursos do Markdown](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet) normalmente, com suporte adicional de HTML *inline* e Componentes do Vue. Estilização usando o [Windi CSS](https://windicss.org) também é suportada. Use `---` seguido de uma nova linha para separar seus slides.
+=======
+---
+outline: deep
+---
+
+# Markdown Syntax
-~~~md
+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 [UnoCSS](/custom/config-unocss) is also supported. Use `---` padded with a new line to separate your slides.
+>>>>>>> 21fdadc17cd2018f65c637e5727de640db5036e3
+
+````md
# Slidev
Olá, Mundo!
@@ -15,9 +27,15 @@ Olá, Mundo!
Use blocos de código diretmente para ter destaque na sintaxe
+<<<<<<< HEAD
//```ts
console.log('Olá, Mundo!')
//```
+=======
+```ts
+console.log('Hello, World!')
+```
+>>>>>>> 21fdadc17cd2018f65c637e5727de640db5036e3
---
@@ -28,13 +46,19 @@ Você pode usar o Windi CSS e componentes Vue diretamente para estilizar e enriq
-~~~
+````
-## Front Matter & Layouts
+## Frontmatter & Layouts
+<<<<<<< HEAD
Especifique layouts e outros metadados para cada slide convertendo os separadores em [blocos front matter](https://jekyllrb.com/docs/front-matter/). Cada frontmatter começa e termina com três traços (`---`). Os textos entre os traços são dados no formato [YAML](https://www.cloudbees.com/blog/yaml-tutorial-everything-you-need-get-started/). Por exemplo:
+=======
+Specify layouts and other metadata for each slide by converting the separators into [frontmatter blocks](https://jekyllrb.com/docs/front-matter/). Each frontmatter starts with a triple-dash and ends with another. Texts between them are data objects in [YAML](https://www.cloudbees.com/blog/yaml-tutorial-everything-you-need-get-started/) format. For example:
+>>>>>>> 21fdadc17cd2018f65c637e5727de640db5036e3
+
+
-~~~md
+```md
---
layout: cover
---
@@ -45,9 +69,9 @@ Esta é a página capa.
---
layout: center
-background: './images/background-1.png'
+background: /background-1.png
class: 'text-white'
----
+---
# Página 2
@@ -57,11 +81,17 @@ Esta é uma página com o layout `center` e uma imagem de fundo.
# Página 3
+<<<<<<< HEAD
Está pe uma página padrão sem nenhum metadado adicional.
~~~
+=======
+This is a default page without any additional metadata.
+```
+>>>>>>> 21fdadc17cd2018f65c637e5727de640db5036e3
Dê uma olhada em [customização](/custom/) para mais detalhes.
+<<<<<<< HEAD
## Blocos de Código
Um grande motivo pelo qual eu estou desenvolvendo o Slidev é a necessidade de fazer meu código aparecer perfeitamente nos slides. Então como você deve estar pensando, você pode usar blocos de código no estilo do Markdown para destacar seu código.
@@ -73,50 +103,295 @@ console.log('Olá, Mundo!')
~~~
Nós suportamos o [Prism](http://prismjs.com) e o [Shiki](https://github.com/shiki/shiki) como destacadores de sintaxe. Consulte [a seção de destacadores](/custom/highlighters) para mais detalhes.
+=======
+### Prettier Support
+
+> Available since v0.44
+
+The custom syntax might not be compactible with some formatters like Prettier.
+You can either install the [Prettier Plugin](/guide/editors#prettier-plugin) or use a direct `yaml` code block to define the frontmatter instead:
+
+````md
+---
+layout: cover
+---
+
+# Slidev
+
+This is the cover page.
+
+---
+
+```yaml
+# The first yaml block will be treated as the frontmatter of that slide
+layout: center
+background: /background-1.png
+class: 'text-white'
+```
+
+# Page 2
+
+This is a page with the layout `center` and a background image.
+````
+
+## Code Blocks
+
+One big reason that led to the creation of Slidev was the need to perfectly display code in slides. Consequently, you can use Markdown-flavored code blocks to highlight your code.
+
+````md
+```ts
+console.log('Hello, World!')
+```
+````
+
+Slidev has [Shiki](https://github.com/shikijs/shiki) built in as the syntax highlighter. Refer to [the highlighters section](/custom/highlighters) for more details.
+>>>>>>> 21fdadc17cd2018f65c637e5727de640db5036e3
### Realce de Linha
+<<<<<<< HEAD
Para realçar linhas específicas, simplesmente adicione o número das linhas em chaves `{}`. A contagem do número das linhas começa a partir do 1.
+=======
+To highlight specific lines, simply add line numbers within brackets `{}`. Line numbers start counting from 1 by default.
+>>>>>>> 21fdadc17cd2018f65c637e5727de640db5036e3
-~~~ts
-//```ts {2,3}
+````md
+```ts {2,3}
function add(
a: Ref | number,
b: Ref | number
) {
return computed(() => unref(a) + unref(b))
}
-//```
-~~~
+```
+````
+<<<<<<< HEAD
Para definir os realces em vários passos, você pode usar `|` para separá-los. Por exemplo:
+=======
+To change what's highlighted with multiple clicks, you can use `|` to separate each stage:
+>>>>>>> 21fdadc17cd2018f65c637e5727de640db5036e3
-~~~ts
-//```ts {2-3|5|all}
+````md
+```ts {2-3|5|all}
function add(
a: Ref | number,
b: Ref | number
) {
return computed(() => unref(a) + unref(b))
}
-//```
-~~~
+```
+````
+<<<<<<< HEAD
Isto vai primeiro realçar `a: Ref | number` e `b: Ref | number`, aí `return computed(() => unref(a) + unref(b))` após um clique, e por último, o bloco inteiro. Aprenda mais no [guia de animações no clique](/guide/animations#animacoes-no-clique).
+=======
+This will first highlight `a: Ref | number` and `b: Ref | number`, and then `return computed(() => unref(a) + unref(b))` after one click, and lastly, the whole block.
+
+You can set the line number to `hide` to hide the code block or `none` to not highlight any line:
+
+````md
+```ts {hide|none}
+function add(
+ a: Ref | number,
+ b: Ref | number
+) {
+ return computed(() => unref(a) + unref(b))
+}
+```
+````
+
+::: tip
+Learn more in the [click animations guide](./animations#positioning).
+:::
+
+### Line Numbers
+
+You can enable line numbering for all slides by setting `lineNumbers: true` in the global config or enable each code block individually by setting `lines: true`. You can also set the starting line for each code block and highlight the lines accordingly; it defaults to 1:
+
+````md
+```ts {6,7}{lines:true,startLine:5}
+function add(
+ a: Ref | number,
+ b: Ref | number
+) {
+ return computed(() => unref(a) + unref(b))
+}
+```
+````
+
+### Max Height
+
+If the code doesn't fit into one slide, you use the `maxHeight` to set fixed height and enable scrolling:
+
+````md
+```ts {2|3|7|12}{maxHeight:'100px'}
+function add(
+ a: Ref | number,
+ b: Ref | number
+) {
+ return computed(() => unref(a) + unref(b))
+}
+/// ...as many lines as you want
+const c = add(1, 2)
+```
+````
+
+### TwoSlash Integration
+
+> Available since v0.46
+
+This feature is only available when you [set `highlighter` to `shiki`](/custom/highlighters)
+
+[TwoSlash](https://twoslash.netlify.app/) is a powerful tool for rendering TypeScript code blocks with type information on hover or inlined. It's quite useful for preparing slides for JavaScript/TypeScript-related topics.
+
+To use it, you can add `twoslash` to the code block's language identifier:
+
+````md
+```ts twoslash
+import { ref } from 'vue'
+
+const count = ref(0)
+// ^?
+```
+````
+
+It will be rendered as:
+
+```ts twoslash
+import { ref } from 'vue'
+
+const count = ref(0)
+// ^?
+```
+
+
+
+
+### Shiki Magic Move
+
+> Available since v0.48
+
+[Shiki Magic Move](https://github.com/shikijs/shiki-magic-move) enables you to have granular transition between code changes, similar to Keynote's Magic Move. You can check [the playground](https://shiki-magic-move.netlify.app/) to see how it works.
+
+
+
+In Slidev, we bind the magic-move to the [clicks system](/guide/animations#click-animations). The syntax is to wrap multiple code blocks representing each step with ````md magic-move (mind it's **4** backticks), this will be transformed into one code block, that morphs to each step as you click.
+
+`````md
+````md magic-move
+```js
+console.log(`Step ${1}`)
+```
+```js
+console.log(`Step ${1 + 1}`)
+```
+```ts
+console.log(`Step ${3}` as string)
+```
+````
+`````
+
+It's also possible to mix Magic Move with [line highlighting](#line-highlighting) and [line numbers](#line-numbers), for example:
+
+`````md
+````md magic-move {at:4, lines: true} // [!code hl]
+```js {*|1|2-5} // [!code hl]
+let count = 1
+function add() {
+ count++
+}
+```
+
+Non-code blocks in between as ignored, you can put some comments.
+
+```js {*}{lines: false} // [!code hl]
+let count = 1
+const add = () => count += 1
+```
+````
+`````
+
+
+>>>>>>> 21fdadc17cd2018f65c637e5727de640db5036e3
### Editor Monaco
Sempre que quiser fazer alguma modificação na apresentação, simplesmente adicione `{monaco}` após o id da linguagem — isto transforma o bloco em um editor Monaco com todos os seus recursos!
+<<<<<<< HEAD
~~~ts
//```ts {monaco}
console.log('OláMundo')
//```
~~~
+=======
+````md
+```ts {monaco}
+console.log('HelloWorld')
+```
+````
+>>>>>>> 21fdadc17cd2018f65c637e5727de640db5036e3
Aprenda mais sobre [configurar Monaco](/custom/config-monaco).
+<<<<<<< HEAD
## Estilos Embutidos
+=======
+#### 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.
+```
+````
+
+It provides the editor with a "Run" button, and shows the result of the code execution right below the code block. You may also modify the code and the result will be re-evaluated on the fly.
+
+By default it will automatically run the code when the slide is loaded; if you want to instead explicitly trigger the run, you can set `{autorun:false}`.
+
+````md
+```ts {monaco-run} {autorun:false}
+console.log('Click the play button to run me')
+```
+````
+
+If you want to only show the output in certain clicks, you can use the `showOutputAt` prop. The value is the same as `v-click`.
+
+````md
+```ts {monaco-run} {showOutputAt:'+1'}
+console.log('Shown after 1 click')
+```
+````
+
+Currently Slidev supports running JavaScript and TypeScript code out-of-box. Refer to [Custom Code Runners](/custom/config-code-runners) for custom languages support.
+
+#### Writable Monaco Editor
+
+> Available since v0.49.5
+
+You can also use the [Import Code Snippets](#import-code-snippets) syntax combining with the `{monaco-write}` directive, to link your Monaco Editor with a file on your filesystem. This will allow you to edit the code directly in the editor and save the changes back to the file.
+
+```md
+<<< ./some-file.ts {monaco-write}
+```
+
+When using this, be sure to back up your files beforehand, as the changes will be saved directly to the file.
+
+## Embedded Styles
+>>>>>>> 21fdadc17cd2018f65c637e5727de640db5036e3
Você pode usar a tag `
@@ -156,7 +437,11 @@ blockquote {
Assim como você faria no markdown, você pode usar imagens apontando para uma URL remota ou local.
+<<<<<<< HEAD
Para recursos estáticos, o [`vite-plugin-remote-assets`](https://github.com/antfu/vite-plugin-remote-assets) embutido vai criar um cache na memória na primeira execução para que você possa ter o carregamento instantâneo depois, até pra imagens maiores.
+=======
+For remote assets, the built-in [`vite-plugin-remote-assets`](https://github.com/antfu/vite-plugin-remote-assets) will cache them onto the disk at first run, ensuring instant loading even for large images later on.
+>>>>>>> 21fdadc17cd2018f65c637e5727de640db5036e3
```md

@@ -168,7 +453,11 @@ Para recursos locais, os coloque na [pasta `public`](/custom/directory-structure

```
+<<<<<<< HEAD
Se quiser aplicar tamanhos ou estilos customizados, você pode converter para uma tag ``
+=======
+For you want to apply custom sizes or styles, you can convert them to the `` tag
+>>>>>>> 21fdadc17cd2018f65c637e5727de640db5036e3
```html
@@ -176,11 +465,15 @@ Se quiser aplicar tamanhos ou estilos customizados, você pode converter para um
## Notas
+<<<<<<< HEAD
Você também pode fazer anotações em cada slide. Elas aparecerão no [Modo Apresentador](/guide/presenter-mode) para que você possa usá-las como referência durante apresentações.
+=======
+You can also create presenter notes for each slide. They will show up in [Presenter Mode](/guide/presenter-mode) for you to reference during presentations.
+>>>>>>> 21fdadc17cd2018f65c637e5727de640db5036e3
Em Markdown, o último bloco de comentário em cada slide será considerado uma nota.
-~~~md
+```md
---
layout: cover
---
@@ -202,10 +495,37 @@ A segunda página
-~~~
+```
+
+Basic Markdown and HTML are also supported in notes when the Presenter renders note content.
+
+### Click Markers
+
+> Available since v0.48
+
+For some slides you might have longer notes that could be hard to find your place. Slidev supports click markers that allow highlighting and auto-scrolling to the section of notes from your corresponding content. Put `[click]` markers at the beginning of any line in your notes for the timing you need to go to another [click](/guide/animations#click-animations). You may skip `n` clicks by using `[click:{n+1}]`. For example:
+
+```md
+
+```
+
+Slidev divides the content between the click markers and highlights it in presenter notes, synchronized with your slide progress.
+
+
## Ícones
+<<<<<<< HEAD
O Slidev te permite acessar quase todos os conjutos de ícones open-source **diretamente** no seu markdown. Graças ao [`vite-plugin-icons`](https://github.com/antfu/vite-plugin-icons) e ao [Iconify](https://iconify.design/).
Os nomes seguem a convenção do [Iconify](https://iconify.design/) `{nome-da-coleção}-{nome-do-icone}`. Por exemplo:
@@ -216,6 +536,18 @@ Os nomes seguem a convenção do [Iconify](https://iconify.design/) `{nome-da-co
- `` - do [Twemoji](https://github.com/twitter/twemoji)
- `` - do [SVG Logos](https://github.com/gilbarbara/logos)
- E muito mais...
+=======
+Slidev allows you to have access to virtually all open-source icon sets **directly** in your markdown after installing the corresponding package. Powered by [`unplugin-icons`](https://github.com/antfu/unplugin-icons) and [Iconify](https://iconify.design/).
+
+The naming follows [Iconify](https://iconify.design/)'s convention of `{collection-name}-{icon-name}`. For example:
+
+- `` - from [Material Design Icons](https://github.com/Templarian/MaterialDesign) - [`@iconify-json/mdi`](https://npmjs.com/package/@iconify-json/mdi)
+- `` - from [Carbon](https://github.com/carbon-design-system/carbon/tree/main/packages/icons) - [`@iconify-json/carbon`](https://npmjs.com/package/@iconify-json/carbon)
+- `` - from [Unicons Monochrome](https://github.com/Iconscout/unicons) - [`@iconify-json/uim`](https://npmjs.com/package/@iconify-json/uim)
+- `` - from [Twemoji](https://github.com/twitter/twemoji) - [`@iconify-json/twemoji`](https://npmjs.com/package/@iconify-json/twemoji)
+- `` - from [SVG Logos](https://github.com/gilbarbara/logos) - [`@iconify-json/logos`](https://npmjs.com/package/@iconify-json/logos)
+- And much more...
+>>>>>>> 21fdadc17cd2018f65c637e5727de640db5036e3
Navegue e pesquise por todos os ícones disponíveis com o [Icônes](https://icones.js.org/).
@@ -273,7 +605,11 @@ Isto é mostrado à direita
+<<<<<<< HEAD
Nós também fornecemos uma sintaxe abreviada `::nome::` para o nome do slot. A seguinte exemplo funciona exatamente como o anterior.
+=======
+We also provide a shorthand syntactical sugar `::name::` for slot name. The following works exactly the same as the previous example.
+>>>>>>> 21fdadc17cd2018f65c637e5727de640db5036e3
```md
---
@@ -291,7 +627,11 @@ Isto é mostrado à esquerda
Isto é mostrado à direita
```
+<<<<<<< HEAD
Você também pode explicitamente especificar o slot padrão para ter uma ordenação customizada:
+=======
+You can also explicitly specify the default slot and provide in the custom order.
+>>>>>>> 21fdadc17cd2018f65c637e5727de640db5036e3
```md
---
@@ -311,9 +651,31 @@ Isto é mostrado à direita
Isto é mostrado à esquerda
```
+<<<<<<< HEAD
## Configurações
Todas as configurações necessárias podem ser definidas no arquivo Markdown. Por exemplo:
+=======
+## Import Code Snippets
+
+> Available since v0.47.0
+
+You can import code snippets from existing files via following syntax:
+
+```md
+<<< @/snippets/snippet.js
+```
+
+::: tip
+The value of `@` corresponds to the source root, the directory where the `slides.md` is located.
+:::
+
+This feature is vendored from VitePress, learn more about it in [VitePress's documentation](https://vitepress.dev/guide/markdown#import-code-snippets).
+
+## Configurations
+
+All configurations can be defined in the Markdown file. For example:
+>>>>>>> 21fdadc17cd2018f65c637e5727de640db5036e3
```md
---
@@ -333,7 +695,7 @@ Aprenda mais sobre as [configurações do frontmatter](/custom/#configuracoes-do
O Slidev vem com suporte a LaTeX incluído, usando o [KaTeX](https://katex.org/) para isso.
-
+
### Em Linha
@@ -347,7 +709,7 @@ $\sqrt{3x-1}+(1+x)^2$
Use dois (`$$`) para renderização em bloco. Este modo mostra símbolos maiores e centraliza o resultado.
-```md
+```latex
$$
\begin{array}{c}
@@ -364,30 +726,68 @@ $$
Aprenda mais: [Demonstração](https://sli.dev/demo/starter/8) | [KaTeX](https://katex.org/) | [`markdown-it-katex`](https://github.com/waylonflinn/markdown-it-katex)
+<<<<<<< HEAD
## Diagramas
+=======
+### LaTex line highlighting
+
+> Available since v0.43.1
+
+To highlight specific lines, simply add line numbers within bracket `{}`. Line numbers start counting from 1 by default.
+
+```latex
+$$ {1|3|all}
+\begin{array}{c}
+\nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} &
+= \frac{4\pi}{c}\vec{\mathbf{j}} \nabla \cdot \vec{\mathbf{E}} & = 4 \pi \rho \\
+\nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} & = \vec{\mathbf{0}} \\
+\nabla \cdot \vec{\mathbf{B}} & = 0
+\end{array}
+$$
+```
+
+The `at` and `finally` options of [code blocks](#line-highlighting) are also available for LaTeX blocks.
+
+## Diagrams
+>>>>>>> 21fdadc17cd2018f65c637e5727de640db5036e3
Você também pode criar diagramas / gráficos a partir de descrições em texto no seu Markdown, renderizado pelo [Mermaid](https://mermaid-js.github.io/mermaid).
Blocos de código marcados como `mermaid` serão convertidos para diagramas, por exemplo:
-~~~md
-//```mermaid
+````md
+```mermaid
sequenceDiagram
+<<<<<<< HEAD
Valentina->Enzo: Olá Enzo, tudo bem?
Note over Valentina,Enzo: Uma interação clássica
//```
~~~
+=======
+ Alice->John: Hello John, how are you?
+ Note over Alice,John: A typical interaction
+```
+````
+>>>>>>> 21fdadc17cd2018f65c637e5727de640db5036e3
Você pode até passar um objeto com opções para especificar o tamanho e o tema. A sintaxe do objeto é de um objeto literal do JavaScript, você vai precisar adicionar aspas (`'`) para textos e usar vírgula (`,`) entre cada chave (`theme`, `scale`, etc).
-~~~md
-//```mermaid {theme: 'neutral', scale: 0.8}
+````md
+```mermaid {theme: 'neutral', scale: 0.8}
graph TD
+<<<<<<< HEAD
B[Texto] --> C{Decisão}
C -->|Um| D[Resultado 1]
C -->|Dois| E[Resultado 2]
//```
~~~
+=======
+B[Text] --> C{Decision}
+C -->|One| D[Result 1]
+C -->|Two| E[Result 2]
+```
+````
+>>>>>>> 21fdadc17cd2018f65c637e5727de640db5036e3
Aprenda mais: [Demonstração](https://sli.dev/demo/starter/9) | [Mermaid](https://mermaid-js.github.io/mermaid)
@@ -395,10 +795,16 @@ Aprenda mais: [Demonstração](https://sli.dev/demo/starter/9) | [Mermaid](https
> Disponível desde a v0.15
+<<<<<<< HEAD
Você pode dividir seu arquivo `slides.md` em múltiplos arquivos e organizá-los como preferir.
+=======
+You can split your `slides.md` into multiple files and organize them however you'd like.
+>>>>>>> 21fdadc17cd2018f65c637e5727de640db5036e3
`slides.md` :
+
+
```md
# Página 1
@@ -422,7 +828,11 @@ Está página é de outro arquivo
### Mesclagem de Frontmatter
+<<<<<<< HEAD
Você pode prover frontmatters tanto para sua entrada principal quanto em páginas markdown externas. Caso elas tenham chaves repetidas, as da **entrada principal têm maior prioridade**. Por exemplo:
+=======
+You can provide frontmatter instructions from both your main entry and external markdown pages. If there are duplicate keys in them, the ones from the **main entry have the higher priority**. For example:
+>>>>>>> 21fdadc17cd2018f65c637e5727de640db5036e3
`slides.md` :
@@ -461,7 +871,11 @@ class: text-center
Página de Capa
```
+<<<<<<< HEAD
### Reutilização de Página
+=======
+### Page Reuse
+>>>>>>> 21fdadc17cd2018f65c637e5727de640db5036e3
Com o suporte a múltiplas entradas, reutilizar páginas pode ser simples. Por exemplo:
@@ -483,3 +897,27 @@ src: ./conteudo.md
src: ./conteudo.md
---
```
+
+## MDC Syntax
+
+> Available since v0.43.0
+
+Slidev supports optional [MDC (Markdown Components) Syntax](https://content.nuxtjs.org/guide/writing/mdc) powered by [`markdown-it-mdc`](https://github.com/antfu/markdown-it-mdc).
+
+You can enable it by adding `mdc: true` to the frontmatter of your markdown file.
+
+```mdc
+---
+mdc: true
+---
+
+This is a [red text]{style="color:red"} :inline-component{prop="value"}
+
+{width=500px lazy}
+
+::block-component{prop="value"}
+The **default** slot
+::
+```
+
+Learn more about [MDC Syntax](https://content.nuxt.com/guide/writing/mdc).
diff --git a/guide/why.md b/guide/why.md
index ce8517c..529033f 100644
--- a/guide/why.md
+++ b/guide/why.md
@@ -2,7 +2,11 @@
Existem inúmeras ferramentas para criar slides cheias de recurso, de uso geral, como [Microsoft PowerPoint](https://www.microsoft.com/en-us/microsoft-365/powerpoint) e [Apple Keynote](https://www.apple.com/keynote/). Elas funcionam muito bem para fazer slides legais com animações, gráficos, e muitas outras coisas, além de serem bem intuitivas e fáceis de aprender. Então por que gastar tempo fazendo o Slidev?
+<<<<<<< HEAD
O Slidev visa fornecer a flexibilidade e a interatividade para desenvolvedores fazerem suas apresentações ainda mais interessantes, expressivas, e atraentes usando ferramentas e tecnologias das quais já estão familiarizados.
+=======
+Slidev aims to provide the flexibility and interactivity for developers to make their presentations even more interesting, expressive, and attractive by using the tools and technologies they are already familiar with.
+>>>>>>> 21fdadc17cd2018f65c637e5727de640db5036e3
Ao trabalhar com editores *WYSIWYG*, é bem fácil se distrair com as opções de estilização. O Slidev corrige isso separando o conteúdo dos recursos visuais. Isto te permite focar em uma coisa de cada vez, além de reutilizar temas da comunidade. O Slidev não pretende substituir completamente outras ferramentas de slides. Em vez disso, se concentra em atender à comunidade de desenvolvedores.
@@ -28,13 +32,21 @@ Dê uma olhada na [galeria de temas](/themes/gallery) ou [aprenda a escrever um
## Feito para Desenvolvedores
+<<<<<<< HEAD
O Slidev fornece suporte de primeira à blocos de código. Suporta tanto o [Prism](https://prismjs.com/) quanto o [Shiki](https://github.com/shikijs/shiki) para conseguir um destaque perfeito da sintaxe, ainda tendo a possibilidade de modificação do código a qualquer hora. Com o [editor Monaco](https://microsoft.github.io/monaco-editor/) embutido, ele também te permite escrever código em tempo real / demonstrá-lo na sua apresentação com *autocomplete*, tipo da variável ao passar o mouse em cima, e até suporte à checagem de tipo do TypeScript.
+=======
+Slidev provides first-class support for code snippets for developers. It supports [Shiki](https://github.com/shikijs/shiki) to get pixel-perfect syntax highlighting, while still being able to modify the code at any time. With [Monaco editor](https://microsoft.github.io/monaco-editor/) built-in, it also empowers you to do live coding / demonstration in your presentation with autocompletion, type hovering, and even TypeScript type check support.
+>>>>>>> 21fdadc17cd2018f65c637e5727de640db5036e3
Aprenda mais sobre [destacadores](/custom/highlighters) e [configurações do Monaco](/custom/config-monaco).
## Rápido
+<<<<<<< HEAD
O Slidev é construído com [Vite](https://vitejs.dev/), [Vue 3](https://v3.vuejs.org/) e [Windi CSS](https://windicss.org/), o que te proporciona uma experiência espetacular de desenvolvimento. Toda mudança que você fizer refletirá **instantaneamente** em seus slides.
+=======
+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**.
+>>>>>>> 21fdadc17cd2018f65c637e5727de640db5036e3
Saiba mais sobre [nossas tecnologias](/guide/#tecnologias).
@@ -50,7 +62,11 @@ Aprenda mais sobre [gravação aqui](/guide/recording).
## Portátil
+<<<<<<< HEAD
Exporte seus slides para PDF, PNGs, ou até mesmo uma aplicação SPA hospedável com um único comando, e os compartilhe em qualquer lugar.
+=======
+Export your slides into PDF, PPTX, PNGs, or even a hostable Single-page Application (SPA) with a single command, and share them anywhere.
+>>>>>>> 21fdadc17cd2018f65c637e5727de640db5036e3
Leia mais sobre isto na [documentação de exportação](/guide/exporting).
@@ -68,6 +84,4 @@ $ npm init slidev
Ou tenha uma breve prévia:
-