Slidev Addon: Window Mockup

A Slidev addon that provides a window mockup component to display content in a styled window frame.

👉 Check out the demo and docs.

Installation

npm install slidev-addon-window-mockup

Slidev configuration

---
addons:
  - window-mockup
---

Usage

Basic Usage

Wrap any content in a <WindowMockup> component:

<WindowMockup>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor
  incididunt ut labore et dolore magna aliqua.
</WindowMockup>

Color Themes

Choose between light and dark themes:

<!-- Using color prop -->
<WindowMockup color="light"> Content here </WindowMockup>

<WindowMockup color="dark"> Content here </WindowMockup>

<!-- Using shorthand attributes -->
<WindowMockup light> Content here </WindowMockup>

<WindowMockup dark> Content here </WindowMockup>

Code Block Integration

Component Syntax

Use the codeblock prop to wrap code blocks:

<WindowMockup codeblock>
  ```shell $ echo "Hello, World!" Hello, World! ```
</WindowMockup>

Markdown Syntax

This addon enables special syntax for code blocks. Use the window keyword after the language in code fences:

```shell window
$ echo "Hello, World!"
Hello, World!
```

More usage

👉 Check out the demo and docs.