MyST Demo Directive - myst-plugins

Shows raw MyST content alongside its rendered output - perfect for documentation and tutorials.

Usage¶

Add to your myst.yml:

project:
  plugins:
    - https://raw.githubusercontent.com/jupyter-book/myst-plugins/main/plugins/demo/src/index.mjs

MyST Demo

This is **bold** and this is *italic*.

Here's a [link](https://mystmd.org).

This is bold and this is italic.

Here’s a link.

MyST Demo

### A Heading

Here's an unordered list:

- First item
- Second item
- Third item

And a numbered list:

1. Step one
2. Step two
3. Step three

Here’s an unordered list:

And a numbered list:

MyST Demo

Here's some Python code:

```python
def hello_world():
    print("Hello, MyST!")
```

Here’s some Python code:

def hello_world():
    print("Hello, MyST!")

MyST Demo

:::{note}
This is a note admonition with important information!
:::

:::{warning}
This is a warning - be careful!
:::

MyST Demo

Inline math: $E = mc^2$

Display math:

$$
\int_0^\infty e^{-x^2} dx = \frac{\sqrt{\pi}}{2}
$$

Inline math: $E = mc^2$

Display math:

\int_0^\infty e^{-x^2} dx = \frac{\sqrt{\pi}}{2}

MyST Demo

```{figure} https://picsum.photos/seed/myst-demo/400/300.jpg
:name: random-figure

A random image from Unsplash
```

MyST Demo

You can reference the figure above: see {ref}`random-figure` for an example.

You can reference the figure above: see Figure 1 for an example.

The myst:demo directive takes any MyST content and displays it in a single card:

You can also use myst-demo as an alias if needed.

This makes it perfect for:

This directive is used extensively throughout the myst-plugins documentation to show examples of each plugin in action!