Raku on WordPress

Raku Snippets is a WordPress plugin. Give a code block the class raku, and your readers can edit the program and run it, right in the post.

This is what a reader sees — change the code and press ▶ Run:

sub postfix:<!>($n) { [*] 1..$n }

say 5!;
say 30!;

Download raku-snippets.zip version 1.0.0 · 1 KB · WordPress 5.0+, PHP 7.0+

Install #

In WordPress, go to Plugins → Add New → Upload Plugin and choose raku-snippets.zip.
Press Install Now, then Activate.

There are no settings. With shell access to your server, you can unpack the zip into wp-content/plugins/ instead.

Mark a block #

In the block editor, add a Code or Preformatted block with your program. In the block's settings, open Advanced and type raku into Additional CSS class(es). That's the switch: blocks with the class run, blocks without it stay as they were.

In the HTML editor, or in the Classic editor, the same thing is:

<pre class="raku">say "Hello from my blog!";</pre>

Only raku counts, and language-raku — the form Markdown plugins and syntax highlighters write. A block labelled perl6 stays plain text.

More control #

In HTML you can also use the data-raku attribute with any of raku.js's options — run on load, preset input, hide parts of the editor:

<pre data-raku data-run data-hide="playground">say 0.1 + 0.2 == 0.3;</pre>

What the plugin does #

It loads one script, and only where it is needed. On a single post or page whose content has a raku block or a data-raku attribute, it adds https://raku.online/raku.js at the end of the page. Your front page, archives and every other post stay exactly as they were.
Nothing runs on your server. Programs run in your readers' browsers, in Raku++ compiled to WebAssembly. There is no account, no API key and nothing to pay for.
It cannot break your theme. Each editor lives in its own Shadow DOM, so your styles cannot reach in and ours cannot leak out.
It is one small PHP file. No settings page, no database tables. Deactivating the plugin removes it completely.

Match your colours #

The ▶ Run button is magenta because raku.online is. To use your theme's colour, go to Appearance → Customize → Additional CSS and add:

:root { --rk-embed-accent: #0969da; }

For theme and plugin developers #

The raku_snippets_needed filter overrides the decision to load the script — for example, to load it on every page of a custom post type:

add_filter( 'raku_snippets_needed', function ( $needed ) {
    return $needed || is_singular( 'lesson' );
} );

See it running #

Andrew Shitov's blog uses the plugin for its Raku posts — for example, Raku in a Browser. The source is in the Raku++ repository, in editors/wordpress.

Next #

Embed Raku — the same editor on any site, with one script tag.
The embed builder — set the options, see a live preview, copy the snippet.
Raku++ in use — what people have built with it.