Editable code blocks with preview. How? Ideas?


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?

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

Here’s a guide:


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:

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.