What’s your favourite way to add working examples of code in your blog posts that isn’t CodePen? Both for CSS and JS example code.
Thinking a basic web component with declarative shadow DOM might do it nicely since it will fully encapsulate the code? Maybe wrap it in @zachleat browser-window or resize-asaurus component.
I think my solution will need to be a web component and some custom code for Eleventy. What I’d like to do is have code sections that I can wrap in a custom element which then renders the raw code text AND the demo of said code. But I want to do it progressively, so the code also shows and when JS kicks off, the demo is shown. But HTML in code blocks is encoded and styled with PrismJS which means lots of extra markup. Not sure how to handle this yet. 🤔
Also, it doesn’t actually need to be progressively enhanced if it’s an HTML/CSS demo. So maybe the iframe route is the right idea? Or Eleventy’s WebC might be the winner here?
Add comment