open-index/open-npm huggingface dataset:
npm package: @slideskit/code
Description: Code block extension for SlidesKit using Shiki
Author: Jonatan Vahlberg
Latest version: 1.0.0

# @slideskit/code

Code block extension for [SlidesKit](https://github.com/Jonatan-Vahlberg/slideskit). Adds a `code` block type powered by [Shiki](https://shiki.style) for syntax highlighting.

## Installation

```bash
npm install @slideskit/core @slideskit/code
```

## Quick Start

```jsx
import { Presentation } from "@slideskit/core";
import { codeBlockRegistry } from "@slideskit/code";
import "@slideskit/core/styles.css";
import "@slideskit/code/styles.css";

const presentation = {
  meta: { title: "My Deck" },
  defaults: { theme: "default" },
  options: {},
  themes: [
    {
      name: "default",
      colors: { primary: "#0ea5e9", background: "#0f172a", text: "#f8fafc" },
      fonts: { body: "system-ui", headline: "system-ui" },
    },
  ],
  slides: [
    {
      layout: "full",
      title: "Example Code",
      content: [
        {
          type: "code",
          content: {
            code: `function greet(name) {
  return \`Hello, \${name}!\`;
}`,
            lang: "javascript",
            theme: "github-dark",
          },
        },
      ],
    },
  ],
};

function App() {
  return (
    <Presentation
      presentation={presentation}
      blockRegistry={codeBlockRegistry}
    />
  );
}
```

## Code Block Schema

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `code` | `string` | *required* | The code string to highlight |
| `lang` | `string` | `"text"` | Language (e.g. `"javascript"`, `"typescript"`, `"python"`, `"jsx"`) |
| `theme` | `string` | `"github-dark"` | Shiki theme (e.g. `"github-dark"`, `"vitesse-dark"`, `"nord"`, `"dracula"`) |

## Supported Languages

Shiki supports 200+ languages. Common ones: `javascript`, `typescript`, `jsx`, `tsx`, `python`, `go`, `rust`, `css`, `html`, `json`, `markdown`, `bash`, `sql`.

## Merging with Other Block Registries

```jsx
import { withCodeBlock } from "@slideskit/code";
import { videoBlockRegistry } from "@slideskit/video";

const blockRegistry = withCodeBlock(videoBlockRegistry);

<Presentation presentation={presentation} blockRegistry={blockRegistry} />
```

## License

MIT
npm package: @slideskit/video
Description: Video block extension for SlidesKit using react-player
Author: Jonatan Vahlberg
Latest version: 1.0.0

# @slideskit/video

Video block extension for [SlidesKit](https://github.com/Jonatan-Vahlberg/slideskit). Adds a `video` block type powered by [react-player](https://github.com/cookpete/react-player), supporting YouTube, Vimeo, file paths, and more.

## Installation

```bash
npm install @slideskit/core @slideskit/video react-player
```

## Quick Start

```jsx
import { Presentation } from "@slideskit/core";
import { videoBlockRegistry } from "@slideskit/video";
import "@slideskit/core/styles.css";
import "@slideskit/video/styles.css";

const presentation = {
  meta: { title: "My Deck" },
  defaults: { theme: "default" },
  options: {},
  themes: [
    {
      name: "default",
      colors: { primary: "#0ea5e9", background: "#0f172a", text: "#f8fafc" },
      fonts: { body: "system-ui", headline: "system-ui" },
    },
  ],
  slides: [
    {
      layout: "full",
      title: "Demo Video",
      content: [
        {
          type: "video",
          content: {
            src: "https://www.youtube.com/watch?v=dQw4w9WgXcQ",
            controls: true,
            muted: true,
            aspect: "video",
          },
        },
      ],
    },
  ],
};

function App() {
  return (
    <Presentation
      presentation={presentation}
      blockRegistry={videoBlockRegistry}
    />
  );
}
```

## Video Block Schema

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `src` | `string` | *required* | Video URL (YouTube, Vimeo, file path, HLS, DASH, etc.) |
| `poster` | `string` | — | Poster image URL (preview before playback) |
| `playing` | `boolean` | `false` | Autoplay when slide is visible |
| `controls` | `boolean` | `true` | Show player controls |
| `loop` | `boolean` | `false` | Loop the video |
| `muted` | `boolean` | `true` | Mute (required for autoplay in most browsers) |
| `aspect` | `"video"` \| `"square"` \| `"portrait"` | `"video"` | Aspect ratio (16:9, 1:1, 3:4) |

## Merging with Other Block Registries

If you have custom block types, merge the video registry:

```jsx
import { withVideoBlock } from "@slideskit/video";

const blockRegistry = withVideoBlock({
  myCustomBlock: myCustomRenderer,
});

<Presentation presentation={presentation} blockRegistry={blockRegistry} />
```

## Supported Sources

react-player supports YouTube, Vimeo, Facebook, Twitch, SoundCloud, Streamable, Wistia, DailyMotion, and direct file paths (MP4, WebM, etc.).

## License

MIT
npm package: @slidev-react/cli
Description: CLI entrypoint for slidev-react authoring and build workflows
Latest version: 0.4.14

# `@slidev-react/cli`

`@slidev-react/cli` 提供 `slidev-react` 命令行入口。

当前定位已经收口成一层更低的执行接口：

- 推荐用户入口已经切到 `create-slidev-react`
- `@slidev-react/cli` 主要作为模板项目 scripts 背后的内部执行层
- 命令实现继续收口到 `@slidev-react/node`

也就是说，普通使用者更推荐这样开始：

```bash
npm create slidev-react@latest
cd my-deck
pnpm install
pnpm dev
```

而不是直接记忆裸 CLI 命令。

当前命令：

- `slidev-react dev [file]`
- `slidev-react build [file]`
- `slidev-react export [file]`
- `slidev-react lint [file]`

其中：

- `dev` / `build` 走程序化 Vite API
- `export` 会按需拉起临时 dev server 后再走 Playwright 导出
- `lint` 直接调用 slides parsing + authoring validation

如果你在当前 monorepo 内做 dogfood、调试模板脚本背后的执行层，可以这样用：

```bash
pnpm slidev-react -- dev
pnpm slidev-react -- build slides-ar-3-4.mdx
pnpm slidev-react -- export slides-ar-3-4.mdx --format png
pnpm slidev-react -- lint slides.mdx --strict
```
npm package: @slidev-react/client
Description: Browser-side React app and presentation UI for slidev-react
Latest version: 0.4.14

# `@slidev-react/client`

`@slidev-react/client` 承接浏览器端能力：

- React app 入口
- providers
- presentation UI / stage
- theme 和 MDX runtime 组合

当前这部分源码已经主要收进：

- `packages/client/src/app`
- `packages/client/src/features/presentation`
- `packages/client/src/theme`
- `packages/client/src/ui`
- `packages/client/src/addons`
npm package: @slidev-react/core
Description: Pure presentation models, flow, and shared contracts for slidev-react
Latest version: 0.4.14

# `@slidev-react/core`

`@slidev-react/core` 承接尽量纯的领域能力：

- presentation flow
- export file naming
- session protocol / shared contracts

这里尽量不放 React 组件、Provider、浏览器视图装配，也不依赖 Vite 编译入口。
npm package: @slidev-react/node
Description: Node-side command APIs for slidev-react authoring and build workflows
Latest version: 0.4.14

# `@slidev-react/node`

`@slidev-react/node` 提供 `slidev-react` 的 Node 侧命令 API。

当前导出分两层：

高层命令 API：

- `runSlidesDev`
- `runSlidesBuild`
- `runSlidesExport`
- `runSlidesLint`

更底层的 programmatic API：

- `startSlidesDevServer`
- `buildSlidesApp`
- `exportSlidesArtifacts`
- `lintSlides`

这一层的目标是把 CLI 和根仓库脚本解耦，同时把 slides authoring/build 生命周期沉到可复用的 Node 侧能力。
npm package: @slidev/client
Description: Presentation slides for developers
Author: Anthony Fu
Latest version: 52.14.2

# @slidev/client

[![NPM version](https://img.shields.io/npm/v/@slidev/client?color=3AB9D4&label=)](https://www.npmjs.com/package/@slidev/client)

Client code for [Slidev](https://sli.dev). Shipped with [`@slidev/cli`](https://www.npmjs.com/package/@slidev/cli).

## License

MIT License © 2021 [Anthony Fu](https://github.com/antfu)
npm package: @slidev/docs
Description: Documentation for [Slidev](https://github.com/slidevjs/slidev)
Latest version: 52.14.2

# [sli.dev](https://sli.dev)

Documentation for [Slidev](https://github.com/slidevjs/slidev)

## Translations

> [!WARNING]
>
> Translations with strikethroughs are no longer maintained. The content is outdated and not encouraged to refer.

|                           | Repo                                           |                             Site | Maintainers                                                           |
| ------------------------- | ---------------------------------------------- | -------------------------------: | --------------------------------------------------------------------- |
| English                   | [docs](https://github.com/slidevjs/docs)       |       [sli.dev](https://sli.dev) | [@antfu](https://github.com/antfu)                                    |
| 简体中文                  | [docs-cn](https://github.com/slidevjs/docs-cn) | [cn.sli.dev](https://cn.sli.dev) | [@QC-L](https://github.com/QC-L) [@Ivocin](https://github.com/Ivocin) |
| <del>Français</del>       | [docs-fr](https://github.com/slidevjs/docs-fr) | [fr.sli.dev](https://fr.sli.dev) | [@ArthurDanjou](https://github.com/ArthurDanjou)                      |
| <del>Español</del>        | [docs-es](https://github.com/slidevjs/docs-es) | [es.sli.dev](https://es.sli.dev) | [@owlnai](https://github.com/owlnai)                                  |
| <del>Русский</del>        | [docs-ru](https://github.com/slidevjs/docs-ru) | [ru.sli.dev](https://ru.sli.dev) | [@xesjkeee](https://github.com/xesjkeee)                              |
| <del>Việt Nam</del>       | [docs-vn](https://github.com/slidevjs/docs-vn) | [vn.sli.dev](https://vn.sli.dev) | [@bongudth](https://github.com/bongudth)                              |
| <del>Deutsch</del>        | [docs-de](https://github.com/slidevjs/docs-de) | [de.sli.dev](https://de.sli.dev) | [@fabiankachlock](https://github.com/fabiankachlock)                  |
| <del>Português (BR)</del> | [docs-br](https://github.com/slidevjs/docs-br) | [br.sli.dev](https://br.sli.dev) | [@luisfelipesdn12](https://github.com/luisfelipesdn12)                |
| <del>Ελληνικά</del>       | [docs-el](https://github.com/slidevjs/docs-el) | [el.sli.dev](https://el.sli.dev) | [@GeopJr](https://github.com/GeopJr)                                  |
| <del>日本語</del>         | [docs-ja](https://github.com/slidevjs/docs-ja) | [ja.sli.dev](https://ja.sli.dev) | [@IkumaTadokoro](https://github.com/IkumaTadokoro)                    |

## Start Server Locally

```
npm i -g pnpm

pnpm i
pnpm run dev
```

And then visit `http://localhost:3000`

Or install the [Vite extension for VS Code](https://marketplace.visualstudio.com/items?itemName=antfu.vite) to edit side-by-side.

## Help on Translating

Please join our [Discord Server](https://chat.sli.dev) and contact the maintainers.
npm package: @slidev/parser
Description: Markdown parser for Slidev
Author: Anthony Fu
Latest version: 52.14.2

# @slidev/parser

[![NPM version](https://img.shields.io/npm/v/@slidev/parser?color=3AB9D4&label=)](https://www.npmjs.com/package/@slidev/parser)

Slides markdown parser for [Slidev](https://sli.dev).

Learn more about the [Syntax](https://sli.dev/guide/syntax.html)

Refer to the TypeScript definitions for API.

## License

MIT License © 2021 [Anthony Fu](https://github.com/antfu)
npm package: @slidev/rough-notation
Description: Create and animate hand-drawn annotations on a web page
Author: Preet Shihn
Latest version: 0.1.0

# @slidev/rough-notation

Fork of [rough-notation](https://github.com/rough-stuff/rough-notation)

Changes in this fork:

- Expose types
- Support custom `class` option
- Support custom `opacity` option for strokes
- Support passing through all options to RoughJS for full customization
- Support `getConfig` and `setConfig` methods
- Improved build assets with `.cjs` and `.mjs`
- `annotation.show()` returns a promise that resolves when the animation is done
npm package: @slidev/theme-apple-basic
Description: Apple like theme for Slidev
Author: Jeremy Meissner
Latest version: 0.25.1

# @slidev/theme-apple-basic

[![NPM version](https://img.shields.io/npm/v/@slidev/theme-apple-basic?color=3AB9D4&label=)](https://www.npmjs.com/package/@slidev/theme-apple-basic)

An Apple like theme for [Slidev](https://github.com/slidevjs/slidev).

This theme is inspired by the Basic Black/White theme on the Apple Keynote application.

## Install

Add the following frontmatter to your `slides.md`. Start Slidev then it will prompt you to install the theme automatically.

<pre><code>---
theme: <b>apple-basic</b>
---</code></pre>

Learn more about [how to use a theme](https://sli.dev/themes/use).

## Layouts

This theme provides the following layouts:

### Title
Usage:
```
---
layout: intro
---

# Presentation title

Presentation subtitle

<div class="absolute bottom-10">
  <span class="font-700">
    Author and Date
  </span>
</div>

```
![intro](https://i.imgur.com/gnB4oa8.png)

---

### Title & Photo
Usage:
```
---
layout: intro-image
image: 'image-url'
---

<div class="absolute top-10">
  <span class="font-700">
    Author and Date
  </span>
</div>

<div class="absolute bottom-10">
  <h1>Presentation title</h1>
  <p>Presentation subtitle</p>
</div>

```
![intro-image](https://i.imgur.com/976e8Hu.png)

---

### Title & Photo right
Usage:
```
---
layout: intro-image-right
image: 'image-url'
---

# Slide Title
## Slide Subtitle

```
![intro-image-right](https://i.imgur.com/dE1r2bg.png)

---

### Title, Bullets & Image
Usage:
```
---
layout: image-right
image: 'image-url'
---

# Slide Title
## Slide Subtitle

* Slide bullet text

```
![image-right](https://i.imgur.com/llEB75J.png)

---

### Title & Bullets
#### Layout used by default
![default](https://i.imgur.com/Glu7KWK.png)

---

### Bullets
Usage:
```
---
layout: bullets
---

* Slide bullet text

```
![bullets](https://i.imgur.com/rvQJMMc.png)

---

### Section
Usage:
```
---
layout: section
---

# Section Title

```
![section](https://i.imgur.com/vnL8XOB.png)

---

### Statement
Usage:
```
---
layout: statement
---

# Statement

```
![satement](https://i.imgur.com/Em3e8g3.png)

---

### Big fact
Usage:
```
---
layout: fact
---

# 100%
Fact information

```
![fact](https://i.imgur.com/hPL7qOj.png)

---

### Quote
Usage:
```
---
layout: quote
---

# "Notable quote"
Attribution

```
![quote](https://i.imgur.com/DMpzz0g.png)

---

### Photo - 3
Usage:
```
---
layout: 3-images
imageLeft: 'image-url'
imageTopRight: 'image-url'
imageBottomRight: 'image-url'
---
```
![3-images](https://i.imgur.com/Lun6FnS.png)

---

### Photo
Usage:
```
---
layout: image
image: 'image-url'
---
```
![image](https://i.imgur.com/S9TQ2AZ.png)
npm package: @slidev/theme-bricks
Description: Bricks theme for Slidev
Author: Inès
Latest version: 0.25.0

# @slidev/theme-bricks

[![NPM version](https://img.shields.io/npm/v/@slidev/theme-bricks?color=3AB9D4&label=)](https://www.npmjs.com/package/@slidev/theme-bricks)

Bricks theme for [Slidev](https://github.com/slidevjs/slidev).

## Install

Add the following frontmatter to your `slides.md`. Start Slidev then it will prompt you to install the theme automatically.

<pre><code>---
theme: <b>bricks</b>
---</code></pre>

Learn more about [how to use a theme](https://sli.dev/themes/use).

## Layouts

### `cover`

![](https://cdn.jsdelivr.net/gh/slidevjs/themes@main/screenshots/theme-bricks/01.png)

### `intro`

![](https://cdn.jsdelivr.net/gh/slidevjs/themes@main/screenshots/theme-bricks/02.png)

### `default`

![](https://cdn.jsdelivr.net/gh/slidevjs/themes@main/screenshots/theme-bricks/03.png)

### `section`

![](https://cdn.jsdelivr.net/gh/slidevjs/themes@main/screenshots/theme-bricks/04.png)

### `items`

![](https://cdn.jsdelivr.net/gh/slidevjs/themes@main/screenshots/theme-bricks/05.png)

### `quote`

![](https://cdn.jsdelivr.net/gh/slidevjs/themes@main/screenshots/theme-bricks/06.png)

### `fact`

![](https://cdn.jsdelivr.net/gh/slidevjs/themes@main/screenshots/theme-bricks/07.png)

### `statement`

![](https://cdn.jsdelivr.net/gh/slidevjs/themes@main/screenshots/theme-bricks/08.png)

## Components

This theme provided a few components for each polygon used in the theme.

`<Polygon1/>` to `<Polygon11/>`

![](https://cdn.jsdelivr.net/gh/slidevjs/themes@main/screenshots/theme-bricks/05.png)

## Example

See [example.md](./example.md)

## License

MIT License © 2021 [iiiiiiinès](https://github.com/iiiiiiines)
npm package: @slidev/theme-default
Description: Default theme for Slidev
Author: antfu
Latest version: 0.25.0

# @slidev/theme-default

[![NPM version](https://img.shields.io/npm/v/@slidev/theme-default?color=3AB9D4&label=)](https://www.npmjs.com/package/@slidev/theme-default)

The default theme for [Slidev](https://github.com/slidevjs/slidev).

## Install

Add the following frontmatter to your `slides.md`. Start Slidev then it will prompt you to install the theme automatically.

<pre><code>---
theme: <b>default</b>
---</code></pre>

Learn more about [how to use a theme](https://sli.dev/themes/use).

## License

MIT License © 2021 [Anthony Fu](https://github.com/antfu)
npm package: @slidev/theme-seriph
Description: Seriph theme for Slidev
Author: antfu
Latest version: 0.25.0

# @slidev/theme-seriph

[![NPM version](https://img.shields.io/npm/v/@slidev/theme-seriph?color=3AB9D4&label=)](https://www.npmjs.com/package/@slidev/theme-seriph)

An official theme for [Slidev](https://github.com/slidevjs/slidev) using serif fonts.

## Install

Add the following frontmatter to your `slides.md`. Start Slidev then it will prompt you to install the theme automatically.

<pre><code>---
theme: <b>seriph</b>
---</code></pre>

Learn more about [how to use a theme](https://sli.dev/themes/use).

## Customization

```yaml
---
theme: serif
themeConfig:
  primary: '#5d8392'
---
```

## License

MIT License © 2021 [Anthony Fu](https://github.com/antfu)
npm package: @slidev/theme-shibainu
Description: Shibainu theme for Slidev
Author: Inès
Latest version: 0.25.0

# @slidev/theme-shibainu

[![NPM version](https://img.shields.io/npm/v/@slidev/theme-shibainu?color=3AB9D4&label=)](https://www.npmjs.com/package/@slidev/theme-shibainu)

Shibainu theme for [Slidev](https://github.com/slidevjs/slidev).

## Install

Add the following frontmatter to your `slides.md`. Start Slidev then it will prompt you to install the theme automatically.

<pre><code>---
theme: <b>shibainu</b>
---</code></pre>

Learn more about [how to use a theme](https://sli.dev/themes/use).

## Layouts

### `cover`

![](https://cdn.jsdelivr.net/gh/slidevjs/themes@main/screenshots/theme-shibainu/01.png)

### `default`

![](https://cdn.jsdelivr.net/gh/slidevjs/themes@main/screenshots/theme-shibainu/02.png)

### `center`

![](https://cdn.jsdelivr.net/gh/slidevjs/themes@main/screenshots/theme-shibainu/03.png)

### `section`

![](https://cdn.jsdelivr.net/gh/slidevjs/themes@main/screenshots/theme-shibainu/04.png)

### `default-2`

![](https://cdn.jsdelivr.net/gh/slidevjs/themes@main/screenshots/theme-shibainu/05.png)

### `default-3`

![](https://cdn.jsdelivr.net/gh/slidevjs/themes@main/screenshots/theme-shibainu/06.png)

### `right`

![](https://cdn.jsdelivr.net/gh/slidevjs/themes@main/screenshots/theme-shibainu/07.png)

### `section-2`

![](https://cdn.jsdelivr.net/gh/slidevjs/themes@main/screenshots/theme-shibainu/08.png)

### `default-4`

![](https://cdn.jsdelivr.net/gh/slidevjs/themes@main/screenshots/theme-shibainu/09.png)

### `default-5`

![](https://cdn.jsdelivr.net/gh/slidevjs/themes@main/screenshots/theme-shibainu/10.png)

### `default-6`

![](https://cdn.jsdelivr.net/gh/slidevjs/themes@main/screenshots/theme-shibainu/11.png)

### `default-7`

![](https://cdn.jsdelivr.net/gh/slidevjs/themes@main/screenshots/theme-shibainu/12.png)

### `section-3`

![](https://cdn.jsdelivr.net/gh/slidevjs/themes@main/screenshots/theme-shibainu/13.png)

### `quote`

![](https://cdn.jsdelivr.net/gh/slidevjs/themes@main/screenshots/theme-shibainu/14.png)

## Example

See [example.md](./example.md)

## License

MIT License © 2021 [iiiiiiinès](https://github.com/iiiiiiines)
npm package: @slidev/types
Description: Shared types declarations for Slidev
Author: Anthony Fu
Latest version: 52.14.2

# @slidev/types

[![NPM version](https://img.shields.io/npm/v/@slidev/types?color=3AB9D4&label=)](https://www.npmjs.com/package/@slidev/types)

Shared types for [Slidev](https://sli.dev).

## License

MIT License © 2021 [Anthony Fu](https://github.com/antfu)