code-pen Web Component

There’s a lot of pre-production going on here on the upcoming CSS course and part of that is answering “how do we make demos easier to maintain in the long term.?”

I think David might have the answer for us. Take a look at this code sample:

Code languagehtml

<script type="module" src="code-pen.js"></script>

<code-pen>
  <pre>
    <code>&lt;p&gt;Hello world&lt;/p&gt;</code>
  </pre>
  <pre>
    <code>:root { color: hotpink; }</code>
  </pre>
  <pre>
    <code>document.querySelector(&quot;p&quot;).style.backgroundColor = &quot;orange&quot;;</code>
  </pre>
</code-pen>

Now, this site is built with Astro so we’ll probably wrap this sorta thing in an Astro component for our existing MDX system, but still, it’s a really handy approach. Cheers, Dave!

Check it out

Newsletter