Embedding the raku.online playground

Add one script tag, then mark any element with data-raku. This page itself does exactly that — the editors below are live.

<script src="https://raku.online/raku.js"></script>

<pre data-raku>say "Hello from an embedded editor!";</pre>

1. A runnable code block

A <pre data-raku> shows its code and turns it into an editor with a Run button:

my @squares = (1..10).map(* ** 2);
say @squares.join(", ");
say "sum = ", @squares.sum;

2. Reads input — the input box appears on its own

When the code reads standard input, the input box shows up automatically:

say "Hello, $_!" for lines();

3. An empty editor

An empty <div data-raku> is a blank editor to type into:

4. Auto-running block

data-run runs it as soon as the interpreter loads:

say "π ≈ ", pi;
say (2¹²⁷ - 1).is-prime ?? "that Mersenne number is prime" !! "not prime";

5. Force a theme

data-theme="dark" (or light) overrides the OS setting; the default follows it:

say "always dark, whatever the OS says";

6. Auto-enhanced code blocks

With <script … data-auto>, an ordinary highlighter block — <pre><code class="language-raku">, what markdown and Prism emit — becomes runnable with no data-raku:

say "I'm a plain markdown code block, now runnable.";
say <ant bee cat>.sort.join(" ");

7. WordPress core Code block

Gutenberg's Code block emits <pre class="wp-block-code">; add raku in its Additional CSS class(es) field and data-auto makes it runnable — no Custom HTML, no data-raku:

say "runnable from a WordPress Code block";
say (1..5).reverse.join("-");

No hand-written HTML?

Use the embed builder — paste code, tick options, copy the snippet.