Editable code blocks with preview. How? Ideas?

Developer help
1

Hello

I am making a blog about programming and I want to embed code blocks on my blog, but I also want these blocks to be editable and to have a preview. Something like CodePen.

It doesn’t have to be complicated. Just two columns divided vertically (left) some HTML/JavaScript code and (right) the preview.

Here is an example

Any idea how I can accomplish that?

2

Easiest way would be to directly use Codepen! That’s what Chris Coyier does on CSSTricks.com for example.

Here’s a guide:

https://docs.ghost.org/integrations/codepen/

3

Yes, but I’d have to pay $8/month for the embeds to be editable and to have a preview, and I do not want to do this cause I am cheap :joy::joy::joy: