A Markdown-based Code Playground

Here's a very simple Markdown-based code playground.

It has HTML, CSS, and JavaScript code snippets like CodePen and jsbin, except instead of appearing in different panes, they appear as Markdown code blocks.

If you change the code in the HTML, CSS, or JavaScript blocks, it will update the sandbox view below it. It also highlights each type of code in the editor (after the first keypress - we're investigating how to make it highlight on load). This is similar to what CodePen provides in that the CSS and JavaScript are in separate blocks rather than being wrapped inside of HTML tags, but also a bit more like a code notebook such as Jupyter and Observable.

The building blocks for this are from CodeMirror 6 and the Unified.js projects.

markdown-based-code-playground

We are working on code sandboxes and code notebooks as tools to work with data and APIs. Our work is on GitHub and GitLab. Follow us at @ResourcesCo on Twitter for updates!