skip to content

# Writing inline demos

There are some issues with
CodePen embedding, like them not working offline. They also come with CodePen branding, which will clash with the pattern you’re trying to illustrate.

Infusion offers another option: a special `demo` shortcode that allows you to write HTML, CSS, and JavaScript directly into the markdown file. The outputted demo is encapsulated using Shadow DOM, so you don’t have to worry about broken styles and global JS.

Here’s the example code for an inline demo of a toggle button:

    {{<demo>}}
    <button aria-pressed="false">Toggle Me</button>
    <style>
    button {
        background: DarkCyan;
        color: white;
        border: 0;
        font-size: 1.5rem;
        padding: 0.5em 1em;
        border-right: 5px solid #000;
        border-bottom: 5px solid #000;
    }

    [aria-pressed="true"] {
      border: 0;
      border-top: 5px solid #000;
      border-left: 5px solid #000;
    }
    </style>
    <script>
    var toggle = demo.querySelector('[aria-pressed]');

    toggle.addEventListener('click', (e) => {
      let pressed = e.target.getAttribute('aria-pressed') === 'true';
      e.target.setAttribute('aria-pressed', !pressed);
    });
    </script>
    {{</demo>}}

Note the `demo.querySelector` on line `21`. Infusion automatically provides `demo`, representing the root node of the demo. It’s like the `document` keyword but for a demo’s subtree.

Here’s a live demo of… the demo:

## Captioned demos

It’s possible to give your demo a caption using an accessible `<figure>` and `<figcaption>` structure. All you need to do is supply a `caption` attribute. For example:

    {{<demo caption="A basic button element">}}
    <!-- demo code here -->
    {{</demo>}}

Along with the standard `figure` shortcodes (described in
Including images), demo figures are numbered automatically according to their order in the page. You can use markdown syntax in the caption text value.