Runnable code examples in Docusaurus, MkDocs, Sphinx, Mintlify and WordPress

How it works

1. Create a widget key on the Widgets page of your dashboard, restricted to your docs domain. Widget keys are public by design; they can't call the REST API.
2. Load the script once for the whole site, with your tool's setting below.
3. Wrap each example in <div class="runcode"> with your key and the language. In Markdown and MDX, keep your normal fenced code block inside it: readers see it highlighted while the page loads, and the widget takes the code from it, indentation and all.

Each example connects only when it scrolls near the screen, and pages that change without a reload are handled for you. The widget docs cover the options: input, height, themes, read-only code and hidden setup code.

Docusaurus

Add the script in docusaurus.config.js:

// docusaurus.config.js
const config = {
  scripts: [{ src: "https://onlinecompiler.io/widget.js", defer: true }],
  // ...the rest of your config
};

Then wrap a code block in any .md or .mdx page. Use className, start the div at the beginning of a line, and leave a blank line on each side of the code block, so MDX treats it as Markdown:

<div className="runcode" data-key="YOUR_WIDGET_KEY" data-lang="python-3.14">

```python
name = input("Your name? ")
print(f"Hello, {name}!")
```

</div>

Don't put code in a JSX template literal such as <pre>{`...`}</pre>: MDX removes two spaces from each line of a multi-line expression, and tabs entirely, which breaks Python.

MkDocs and Material for MkDocs

Load the script with extra_javascript, and turn on md_in_html so a code block inside a div is still Markdown:

# mkdocs.yml
extra_javascript:
  - https://onlinecompiler.io/widget.js
markdown_extensions:
  - md_in_html

Then add the markdown attribute to the div:

<div class="runcode" data-key="YOUR_WIDGET_KEY" data-lang="python-3.14" markdown>

```python
name = input("Your name? ")
print(f"Hello, {name}!")
```

</div>

This works with Material's instant navigation and with line numbers turned on. Markdown expands tabs in code blocks to spaces before the widget sees them.

Sphinx

Add the script in conf.py:

# conf.py
html_js_files = [("https://onlinecompiler.io/widget.js", {"defer": "defer"})]

reStructuredText can't nest a code block inside raw HTML, so use the raw directive with the code in a <script type="text/plain">, which needs no escaping of < and &. The widget removes the shared indentation:

.. raw:: html

   <div class="runcode" data-key="YOUR_WIDGET_KEY" data-lang="g++-15">
     <script type="text/plain">
       #include <iostream>

       int main() {
           std::cout << "Hello from C++\n";
       }
     </script>
   </div>

Mintlify

Mintlify runs every .js file in your docs folder on each page, so load the script from one:

// runcode.js, anywhere in your docs folder. Mintlify runs it on every page.
const script = document.createElement("script");
script.src = "https://onlinecompiler.io/widget.js";
script.defer = true;
document.head.appendChild(script);

Then wrap a code block in any page, as in Docusaurus:

<div className="runcode" data-key="YOUR_WIDGET_KEY" data-lang="python-3.14">

```python
name = input("Your name? ")
print(f"Hello, {name}!")
```

</div>

WordPress

In the block editor, add a Custom HTML block. Escape < as < and & as & inside the <pre>, or use <script type="text/plain"> as in the Sphinx example:

<div class="runcode" data-key="YOUR_WIDGET_KEY" data-lang="php-8.5">
<pre>&lt;?php
echo "Hello from PHP\n";</pre>
</div>

Load the script once for the site, either with a header and footer plugin such as WPCode, or from your theme:

// In your (child) theme's functions.php
add_action('wp_enqueue_scripts', function () {
    wp_enqueue_script('onlinecompiler-widget', 'https://onlinecompiler.io/widget.js', [], null, ['strategy' => 'defer']);
});

WordPress strips scripts, and may strip other markup, from users who can't post unfiltered HTML. On a single site, Administrators and Editors can; on multisite, only Super Admins can.

Other sites

Hugo, Jekyll, Astro, Eleventy and hand-written HTML pages work the same way: add <script src="https://onlinecompiler.io/widget.js"></script> to your layout, and a <div class="runcode"> around a <pre> or a rendered code block wherever you want an example. The widget docs have the plain HTML version. If your platform strips scripts but allows iframes, use the iframe embed, which carries the code in its URL.

Input, exercises and checks

• Standard input: add a <pre data-stdin> inside the div for programs that read input; readers can change it in the Input tab. In MDX, write multi-line input as a one-line string with \n, such as <pre data-stdin>{"3\n10 20 30"}</pre>.
• Hidden setup code: a data-template element holds code the reader doesn't see, such as imports or a test harness, with ##CODE## where their code goes. See templates.
• Checking answers: listen for the runcode:result event to compare the output with the answer you expect. See the JavaScript API.

Frequently asked questions

Does the widget work with client-side navigation?

Yes. Docusaurus, Mintlify and Material for MkDocs with instant navigation swap pages without reloading. The widget starts any example added to the page and closes the connection of any example taken off it, so you need no route hooks.

Do readers need an account?

No. Readers edit and run the code without signing in, and there are no ads. Only you need an account, to create the widget key.

Is it safe to put the widget key in my docs?

Yes. Widget keys are made to be public: they only work over the widget's WebSocket and cannot call the REST API. Restrict the key to your docs domain on the Widgets page so other sites can't use it.

Which languages can the examples use?

Python, C, C++, Java, C#, F#, Go, Rust, PHP, Ruby, Haskell, TypeScript. Set data-lang to the compiler id from the docs, such as python-3.14 or openjdk-25.

How much does it cost?

Runs from the widget count toward your account's monthly allowance: 100,000 runs a month on the free plan, which allows commercial use.