Showcase front-end code snippets directly from CodePen inside the Ghost editor using sensible embeds
CodePen is a reliable development environment to host your code snippets, share your work or find inspiration and every single CodePen entry can be embedded directly into Ghost.
Create a new Pen
CodePen is a free community tool - once you’re signed up you can create a new pen and start building your code snippet:
All public content on CodePen is free to browse, fork and share - so you can also browse for relevant content using the explore feature.
Grab the embed code
Once your code snippet is good to go, locate the embed button at the bottom left and copy the iFrame embed code.
This is the quickest way to embed a CodePen preview on a Ghost site without any additional styling. Feel free to use the HTML embed code too, but note that you will probably need to layer on some custom styling depending on your theme.
Paste it into a HTML card in the editor
Create a new HTML block in the Ghost editor on the post you would like to embed your code snippet and paste in the embed code.
Publish your post
That’s all there is to it! Ghost allows you to paste embed code directly into the HTML block to share CodePen content with your readers.
Here’s an example of the end result: