0.4.0

Major changes: custom actions and external styles.

Custom actions

You can add buttons to the toolbar:

<codapi-snippet sandbox="python" actions="Test:test Benchmark:bench">
</codapi-snippet>

Here we add two buttons:

• "Test" executes the test command in the python sandbox.
• "Benchmark" executes the bench command in the python sandbox.

┌───────────────────────────────┐
│ msg = "Hello, World!"         │
│ print(msg)                    │
│                               │
│                               │
└───────────────────────────────┘
┌─────┐
│ Run │  Test  Benchmark
└─────┘

To make a button trigger an event instead of executing a command, add @ before the action name:

<codapi-snippet sandbox="python" actions="Share:@share"> </codapi-snippet>

Here we add a "Share" button, which, when clicked, triggers the share event on the codapi-snippet element. We can then listen to this event and do something with the code:

const snip = document.querySelector("codapi-snippet");
snip.addEventListener("share", (e) => {
    const code = e.target.code;
    // do something with the code
});

If you want the button title to contain spaces, replace them with underscores:

<codapi-snippet sandbox="python" actions="Run_Tests:test Share_Code:@share">
</codapi-snippet>

External styles

The widget is unstyled by default (no more inline styles!). Use snippet.css for some basic styling or add your own instead.

Here is the widget structure:

<codapi-snippet sandbox="python" editor="basic">
    <codapi-toolbar>
        <button>Run</button>
        <a href="#edit">Edit</a>
        <codapi-status> ✓ Took 1248 ms </codapi-status>
    </codapi-toolbar>
    <codapi-output>
        <pre><code>Hello, World!</code></pre>
    </codapi-output>
</codapi-snippet>

codapi-snippet is the top-level element. It contains the the toolbar (codapi-toolbar) and the code execution output (codapi-output). The toolbar contains a Run button, one or more action buttons (a) and a status bar (codapi-status).