<link href="https://unpkg.com/prism-themes@1.4.0/themes/prism-synthwave84.css" rel="stylesheet" />
<script src="https://unpkg.com/prismjs@1.20.0/prism.js" async></script>

<!-- Need to add a small wrapper with any important setup -->
<div data-preview="true" data-theme-id="light" data-prefill='{"title":"","tags":[],"scripts":[],"stylesheets":[]}'>

  <pre><code class="language-html" data-lang="html">&lt;h1&gt;Hello World&lt;/h1&gt;</code></pre>

  <pre><code class="language-css" data-lang="css">html {
  background: hsl(290, 50%, 10%);
  color: white;
  font-family: monospace;
}</code></pre>

  <!-- You can also have hidden support code! -->
  <pre hidden><code data-lang="js">console.log('hello world');</code></pre>

</div>
html {
  // background: hsl(290, 50%, 10%);
  // color: white;
  padding: 1em;
}

.prefill-click-to-run {
  border-radius: 2em;
  appearance: none;
  background: none;
  padding: 0.25em 1em;
  border: solid 1px;
  font: inherit;
  color: inherit;
  margin: 1em auto;
  display: inline-block;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

[data-make-prefill] {
  opacity: 0;
}
View Compiled
/* Inject the CodePen script once when needed. */
const injectCodePenEmbedScript = (function () {
  let scriptLoaded;
  return function (callback) {
    if (scriptLoaded) {
      callback && callback();
    }
    let script = document.createElement("script");
    script.onload = function () {
      scriptLoaded = true;
      callback && callback();
    };
    script.src = "https://static.codepen.io/assets/embed/ei.js";
    document.body.appendChild(script);
  };
})();

/* ---------------------------------- */

function replaceWithPrefillEmbed(el) {
  /* We can't directly pass an element into the __CPEmbed() function yet, it has to be a selector. Instead, we add a temporary attribute to target. */
  el.setAttribute("data-make-prefill", true);
  injectCodePenEmbedScript(() => {
    /* This is part of our embed scripts UI to turn elements matching a selector into embeds after the script has already run */
    window.__CPEmbed("[data-make-prefill]");
  });
}

/* ---------------------------------- */

/* Clone the whole example to leave the original code snippets visible above the embed */
function appendPrefillEmbed(el, button) {
  let clone = el.cloneNode(true);
  el.appendChild(clone);
  replaceWithPrefillEmbed(clone);
}

/* ---------------------------------- */

/* Add a button to each .example element to activate the Prefill Embed */
Array.from(
  document.querySelectorAll("[data-prefill][data-preview='true']"),
  (el) => {
    const button = document.createElement("button");
    button.innerHTML = "Click to Run";
    button.setAttribute("class", "prefill-click-to-run");

    button.addEventListener("click", () => {
      button.remove();

      appendPrefillEmbed(el);
      /* OR */
      //replaceWithPrefillEmbed(el);
    });

    el.appendChild(button);
  }
);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/prism.min.js