@slidev/docs 51.6.2

package/features/monaco-run.md

@@ -0,0 +1,44 @@
+---
+depends:
+  - features/monaco-editor
+  - guide/animations
+relates:
+  - Custom Code Runners: /custom/config-code-runners
+since: v0.48.0
+tags: [codeblock, editor]
+description: |
+  Run code directly in the editor and see the result.
+---
+
+# Monaco Runner
+
+Slidev also provides the Monaco Runner Editor, which allows you to run the code directly in the editor and see the result. Use `{monaco-run}` to turn the block into a Monaco Runner Editor.
+
+````md
+```ts {monaco-run}
+function distance(x: number, y: number) {
+  return Math.sqrt(x ** 2 + y ** 2)
+}
+console.log(distance(3, 4))
+```
+````
+
+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 language support.

package/features/monaco-write.md

@@ -0,0 +1,22 @@
+---
+depends:
+  - features/monaco-editor
+  - features/import-snippet
+relates:
+  - features/import-snippet
+  - Custom Code Runners: /custom/config-code-runners
+since: v0.49.5
+tags: [codeblock, editor]
+description: |
+  A monaco editor that allows you to write code directly in the slides and save the changes back to the file.
+---
+
+# Writable Monaco Editor
+
+You can also use the [Import Code Snippets](#import-code-snippets) syntax combined 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.

package/features/plantuml.md

@@ -0,0 +1,26 @@
+---
+relates:
+  - Plant UML: https://plantuml.com/
+  - Plant UML Live Editor: https://plantuml.com/plantuml
+  - Example side: https://sli.dev/demo/starter/12
+  - features/mermaid
+tags: [diagram]
+description: |
+  Create diagrams from textual descriptions, powered by PlantUML.
+---
+
+# PlantUML Diagrams
+
+You can create PlantUML diagrams easily in your slides, for example:
+
+````md
+```plantuml
+@startuml
+Alice -> Bob : Hello!
+@enduml
+```
+````
+
+The source code will be sent to https://www.plantuml.com/plantuml to render the diagram by default. You can also set up your own server by setting the `plantUmlServer` in the [Slidev configuration](../custom/index#headmatter).
+
+Visit the [PlantUML Website](https://plantuml.com/) for more information.

package/features/prettier-plugin.md

@@ -0,0 +1,55 @@
+---
+relates:
+  - features/block-frontmatter
+  - GitHub Repo: https://github.com/slidevjs/prettier-plugin
+  - Prettier: https://prettier.io/
+tags: [editor]
+description: |
+  Use the Prettier plugin to format your slides.
+---
+
+# Prettier Plugin
+
+The Slidev's syntax may be incompatible with the default Markdown parser of [Prettier](https://prettier.io/). To solve this, Slidev provides a Prettier plugin to format your slides. You can use it with your favorite editor that supports Prettier.
+
+## 1. Install
+
+::: code-group
+
+```bash [npm]
+npm i -D prettier prettier-plugin-slidev
+```
+
+```bash [pnpm]
+pnpm i -D prettier prettier-plugin-slidev
+```
+
+```bash [yarn]
+yarn add -D prettier prettier-plugin-slidev
+```
+
+```bash [bun]
+bun add -D prettier prettier-plugin-slidev
+```
+
+:::
+
+## 2. Activate the plugin
+
+Create or modify your [prettier configuration file](https://prettier.io/docs/en/configuration) to activate the plugin:
+
+```json
+{
+  "overrides": [
+    {
+      "files": ["slides.md", "pages/*.md"],
+      "options": {
+        "parser": "slidev",
+        "plugins": ["prettier-plugin-slidev"]
+      }
+    }
+  ]
+}
+```
+
+Note that only specifying `plugins` is not enough, because Slidev and common Markdown files share the same file extension `.md`.

package/features/recording.md

@@ -0,0 +1,28 @@
+---
+depends:
+  - guide/ui#navigation-bar
+relates:
+  - RecordRTC: https://github.com/muaz-khan/RecordRTC
+  - WebRTC API: https://webrtc.org/
+tags: [presenter, tool]
+description: |
+  Record your presentation with the built-in camera view and recording feature.
+---
+
+# Recording
+
+Slidev comes with a built-in camera view and recording feature. They make it simple for you to record your presentation without having to switch between other recording tools while delivering a presentation.
+
+## Camera View {#camera-view}
+
+Click the <carbon-user-avatar class="inline-icon-btn"/> button in the [navigation bar](../guide/ui#navigation-bar) to show your camera view in the presentation. You can drag it to move it, and use the handler on the right bottom corner to resize it. The size and position will persist across reloads.
+
+<TheTweet id="1395006771027120133" />
+
+## Start Recording {#start-recording}
+
+Clicking the <carbon-video class="inline-icon-btn"/> button in the [navigation bar](../guide/ui#navigation-bar) 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.
+
+This feature is powered by [RecordRTC](https://github.com/muaz-khan/RecordRTC) and uses the [WebRTC API](https://webrtc.org/).
+
+![](/screenshots/recording.png)

package/features/remote-access.md

@@ -0,0 +1,69 @@
+---
+relates:
+  - guide/ui
+  - CLI: builtin/cli
+  - Cloudflare Quick Tunnels: https://developers.cloudflare.com/cloudflare-one/connections/connect-networks/do-more-with-tunnels/trycloudflare/
+tags: [remote, tool]
+description: |
+  Access your presentation remotely with Slidev's remote access feature.
+---
+
+# Remote Access
+
+You can run your presentation with remote access by using the `--remote` flag:
+
+::: code-group
+
+```bash [pnpm]
+pnpm dev --remote
+# i.e. slidev --remote
+```
+
+```bash [npm]
+npm run dev -- --remote
+# i.e. slidev --remote
+```
+
+```bash [yarn]
+yarn dev --remote
+# i.e. slidev --remote
+```
+
+```bash [bun]
+bun dev --remote
+# i.e. slidev --remote
+```
+
+:::
+
+## Password Protection
+
+If you want to share your slides but don't want other people to access the presenter mode, you can pass a password to the option, i.e. `--remote=your_password`. Then the password is required when accessing the presenter mode.
+
+## Remote Tunnel
+
+You can open a [Cloudflare Quick Tunnels](https://developers.cloudflare.com/cloudflare-one/connections/connect-networks/do-more-with-tunnels/trycloudflare/) to expose your local server to the internet. This way, you can share your slides with others without setting up a server.
+
+::: code-group
+
+```bash [pnpm]
+pnpm dev -- --remote --tunnel
+# i.e. slidev --remote --tunnel
+```
+
+```bash [npm]
+npm run dev -- --remote --tunnel
+# i.e. slidev --remote --tunnel
+```
+
+```bash [yarn]
+yarn dev --remote --tunnel
+# i.e. slidev --remote --tunnel
+```
+
+```bash [bun]
+bun dev --remote --tunnel
+# i.e. slidev --remote --tunnel
+```
+
+:::

package/features/rough-marker.md

@@ -0,0 +1,46 @@
+---
+depends:
+  - guide/animations
+relates:
+  - Rough Notation: https://github.com/linkstrifer/react-rough-notation
+since: v0.48.0
+tags: [drawing, animation]
+description: |
+  Integrate Rough Notation to allow marking or highlighting elements in your slides.
+---
+
+# Rough Markers
+
+Slidev integrates [Rough Notation](https://github.com/linkstrifer/react-rough-notation) to allow marking or highlighting elements in your slides.
+
+---
+
+### `v-mark` directive
+
+Rough Notation integrates comes with the `v-mark` directive.
+
+#### Type
+
+`v-mark.underline` for the underline mark, `v-mark.circle` for the circle mark, etc. Default to `underline`
+
+#### Color
+
+`v-mark.red` makes the notation `red`. Supported built-in 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
+<span v-mark="{ at: 5, color: '#234', type: 'circle' }">
+Important text
+</span>
+```
+
+#### Preview
+
+<video src="https://github.com/slidevjs/slidev/assets/11247099/c840340c-0aa1-4cde-b228-e6c67e5f6879" rounded-lg shadow controls></video>

package/features/shiki-magic-move.md

@@ -0,0 +1,53 @@
+---
+depends:
+  - guide/syntax#code-block
+  - guide/animations
+relates:
+  - Shiki Magic Move: https://github.com/shikijs/shiki-magic-move
+since: v0.48.0
+tags: [codeblock, animation]
+description: |
+  Enable granular transition between code changes, similar to Keynote's Magic Move.
+---
+
+# Shiki Magic Move
+
+[Shiki Magic Move](https://github.com/shikijs/shiki-magic-move) enables you to have a 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.
+
+<video src="https://github.com/slidevjs/slidev/assets/11247099/79927794-27ba-4342-9911-9996cec889d6" controls rounded shadow w-full></video>
+
+In Slidev, we bind the magic-move to the [clicks system](/guide/animations#click-animation). The syntax is to wrap multiple code blocks representing each step with <code>````md magic-move</code> (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 <LinkInline link="features/line-highlighting" /> and <LinkInline link="features/code-block-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
+```
+````
+`````

package/features/side-editor.md

@@ -0,0 +1,17 @@
+---
+depends:
+  - guide/ui#navigation-actions
+relates:
+  - features/vscode-extension
+tags: [editor]
+description: |
+  Edit your slides source file alongside the presentation.
+---
+
+# Integrated Editor
+
+Slidev comes with an integrated editor that will instantly reload and save the changes to your file.
+
+Click the <carbon-edit class="inline-icon-btn"/> button on the navigation panel to open it.
+
+![](/screenshots/integrated-editor.png)

package/features/slide-hook.md

@@ -0,0 +1,33 @@
+---
+depends:
+  - guide/global-context
+tags: [client-api]
+description: |
+  Hooks to manage the slide lifecycle.
+---
+
+# Slide Hooks
+
+Slidev provides a set of hooks to help you manage the slide lifecycle:
+
+```ts twoslash
+import { onSlideEnter, onSlideLeave, useIsSlideActive } from '@slidev/client'
+
+const isActive = useIsSlideActive()
+
+onSlideEnter(() => {
+  /* Called whenever the slide becomes active */
+})
+
+onSlideLeave(() => {
+  /* Called whenever the slide becomes inactive */
+})
+```
+
+You can also use <LinkInline link="guide/global-context" /> to access other useful context information.
+
+::: warning
+
+In the slide component, `onMounted` and `onUnmounted` hooks are not available, because the component instance is preserved even when the slide is not active. Use `onSlideEnter` and `onSlideLeave` instead.
+
+:::

package/features/slide-scope-style.md

@@ -0,0 +1,44 @@
+---
+relates:
+  - Vue's Scoped CSS: https://vuejs.org/api/sfc-css-features.html#scoped-css
+  - UnoCSS directives: https://unocss.dev/transformers/directives
+tags: [styling, syntax]
+description: |
+  Define styles for only the current slide.
+---
+
+# Slide Scope Styles
+
+You can use the `<style>` tag in your Markdown to define styles for **only the current slide**.
+
+```md
+# This is Red
+
+<style>
+h1 {
+  color: red;
+}
+</style>
+
+---
+
+# Other slides are not affected
+```
+
+The `<style>` tag in Markdown is always [scoped](https://vuejs.org/api/sfc-css-features.html#scoped-css). As a result, a selector with a child combinator (`.a > .b`) is unusable as such; see the previous link. To have global styles, check out the [customization section](/custom/directory-structure#style).
+
+Powered by [UnoCSS](/custom/config-unocss), you can directly use nested css and [directives](https://unocss.dev/transformers/directives):
+
+```md
+# Slidev
+
+> Hello **world**
+
+<style>
+blockquote {
+  strong {
+    --uno: 'text-teal-500 dark:text-teal-400';
+  }
+}
+</style>
+```

package/features/slot-sugar.md

@@ -0,0 +1,83 @@
+---
+relates:
+  - Vue's Named Slots: https://v3.vuejs.org/guide/component-slots.html
+tags: [layout, syntax]
+description: |
+  A syntax sugar for named slots in layouts.
+---
+
+# Slot Sugar for Layouts
+
+Some layouts can provide multiple contributing points using [Vue's named slots](https://vuejs.org/guide/components/slots.html).
+
+For example, in [`two-cols` layout](https://github.com/slidevjs/slidev/blob/main/packages/client/layouts/two-cols.vue), you can have two columns left (`default` slot) and right (`right` slot) side by side.
+
+```md
+---
+layout: two-cols
+---
+
+<template v-slot:default>
+
+# Left
+
+This is shown on the left
+
+</template>
+<template v-slot:right>
+
+# Right
+
+This is shown on the right
+
+</template>
+```
+
+<div class="grid grid-cols-2 rounded border border-gray-400 border-opacity-50 px-10 pb-4">
+<div>
+<h3>Left</h3>
+<p>This shows on the left</p>
+</div>
+<div>
+<h3>Right</h3>
+<p>This shows on the right</p>
+</div>
+</div>
+
+We also provide a shorthand syntactical sugar `::name::` for slot name. The following works exactly the same as the previous example.
+
+```md
+---
+layout: two-cols
+---
+
+# Left
+
+This is shown on the left
+
+::right::
+
+# Right
+
+This is shown on the right
+```
+
+You can also explicitly specify the default slot and provide it in the custom order.
+
+```md
+---
+layout: two-cols
+---
+
+::right::
+
+# Right
+
+This shows on the right
+
+::default::
+
+# Left
+
+This is shown on the left
+```

package/features/transform-component.md

@@ -0,0 +1,29 @@
+---
+relates:
+  - guide/faq#adjust-size
+  - features/canvas-size
+  - features/zoom-slide
+tags: [layout]
+description: |
+  A component for scaling some elements.
+---
+
+# The `Transform` Component
+
+The `Transform` component allows you to scale the size of the elements on your slides:
+
+```md
+<Transform :scale="0.5">
+  <YourElements />
+</Transform>
+```
+
+This is useful when you want to adjust the size of some elements on your slides without affecting the layout of the entire slide.
+
+To scale all the slides in your presentation, you can set the slide canvas size:
+
+<LinkCard link="features/canvas-size" />
+
+To scale several slides in your presentation, you can use the `zoom` option:
+
+<LinkCard link="features/zoom-slide" />

package/features/twoslash.md

@@ -0,0 +1,37 @@
+---
+depends:
+  - guide/syntax#code-block
+relates:
+  - TwoSlash: https://twoslash.netlify.app/
+since: v0.46.0
+tags: [codeblock]
+description: |
+  A powerful tool for rendering TypeScript code blocks with type information on hover or inlined.
+---
+
+# TwoSlash Integration
+
+[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)
+//            ^?
+```
+
+<!-- For the popup to not overlap the content below -->
+<div class="py-20" />

package/features/vscode-extension.md

@@ -0,0 +1,80 @@
+---
+relates:
+  - VS Code: https://code.visualstudio.com/
+  - View in Marketplace: https://marketplace.visualstudio.com/items?itemName=antfu.slidev
+  - View in OVSX: https://open-vsx.org/extension/antfu/slidev
+tags: [editor]
+description: |
+  Help you better organize your slides and have a quick overview of them.
+---
+
+# VS Code Extension
+
+<p align="center">
+    <a href="https://github.com/slidevjs/slidev" target="_blank">
+        <img src="https://cdn.jsdelivr.net/gh/slidevjs/slidev/assets/logo-for-vscode.png" alt="Slidev" width="300" />
+    </a>
+</p>
+
+<a href="https://marketplace.visualstudio.com/items?itemName=antfu.slidev" target="__blank">
+  <img inline src="https://img.shields.io/visual-studio-marketplace/v/antfu.slidev.svg?color=4EC5D4&amp;label=VS%20Code%20Marketplace&logo=visual-studio-code" alt="Visual Studio Marketplace Version" />
+</a> &nbsp;
+<a href="https://marketplace.visualstudio.com/items?itemName=antfu.slidev" target="__blank">
+  <img inline src="https://img.shields.io/visual-studio-marketplace/d/antfu.slidev.svg?color=2B90B6" alt="Visual Studio Marketplace Downloads" />
+</a>
+
+The VS Code extension provides some features to help you better organize your slides and have a quick overview of them.
+
+### Features
+
+- 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
+
+![](https://github.com/slidevjs/slidev/assets/63178754/2c9ba01a-d21f-4b33-b6b6-4e249873f865)
+
+<TheTweet id="1395333405345148930" />
+
+<TheTweet id="1789684139152810151" />
+
+### Installation
+
+You can install the extension from the [VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=antfu.slidev) or the [Open VSX Registry](https://open-vsx.org/extension/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 click the item to open the corresponding file, and click the <codicon-eye /> icon over it to switch the active project. The <codicon-add /> 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 your cursor to the slide in the editor, and drag and drop to reorder the slides.
+
+In the **preview webview**, you can click the <codicon-run-all /> icon to start the dev server and click the <codicon-globe /> icon to open the slides in the browser. Toggle <codicon-lock /> 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"]
+}
+```
+
+#### Dev Command {#dev-command}
+
+You can customize the command to start dev server by setting the `slidev.dev-command` configuration. The default value is `npm exec -c 'slidev ${args}'`.
+
+The configured command can contain placeholders:
+
+- `${args}`: All CLI arguments. e.g. `slides.md --port 3000 --remote`
+- `${port}`: The port number. e.g. `3000`
+
+Examples:
+
+- Global installation: `slidev ${args}`
+- For PNPM users, you can set it to `pnpm slidev ${args}`.
+- For [code-server](https://coder.com/docs/code-server/) users, you can set it to `pnpm slidev ${args} --base /proxy/${port}/`. This will make the dev server accessible at `http://localhost:8080/proxy/3000/`.