MyST Demo Directive - MyST Community Plugins

Updated: 01 Apr 2026

Shows raw MyST content alongside its rendered output. The {myst:demo} directive takes any MyST content and displays two things in a card:

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

Usage¶

Add to your myst.yml:

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

The syntax below is both an example of {myst:demo} and a demonstration of how to use it:

:::{myst:demo} My cool title
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](https://mystmd.org).

This is bold and this is italic.

Here’s a link.

Do not give an argument if you do not wish to have a title.

Here are several examples to demonstrate functionality and as a reference to ensure the rendering looks correct.

#### 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:

Here's some Python code:

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

Here’s some Python code:

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

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

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

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}

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

A random image from Unsplash
```

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.