Arunas Liuiza

gingersoulrecords

<a href="http://codepen.io/" rel="nofollow ugc">CodePen</a> is a ‘playground for the front end web’ where you can write public-facing HTML/CSS/JS demos, called pens. It’s a fountain of inspiration for web designers and a useful resource for those learning to write, organize, and share front end code.
WordPen by <a href="https://gingersoulrecords.com/" rel="nofollow ugc">Ginger Soul Records</a> is an effort to bring the best of CodePen to WordPress, with minimal code work. Simply paste a CodePen URL, save your WordPen, and embed a shortcode in your layout.
HTML, CSS, and JS code will be editable, and all connected resources linked to the pen will be included with the shortcode.
Not all pens were designed to be featured with WordPen, so you may wish to start with background- and foreground-friendly pens, which are collected <a href="http://codepen.io/gingersoulrecords/collections/public/" rel="nofollow ugc">here</a>.

WordPen

Embed pens from CodePen without the 'edit' frame

Andrew Taylor

<a href="https://codepen.io" rel="nofollow ugc">CodePen</a> is an online code editor for front-end development. You build things (we call them Pens) with HTML, CSS, and JavaScript, and the languages and libraries that go along with those. Any Pen can be embedded on another site, making them useful for blog posts, documentation, forums, etc.
This block makes it easy to embed them. While oEmbed (just paste in a Pen URL!) also works for CodePen embeds in the block editor, this plugin allows for much more control, like setting the the height, theme, and default tabs.

CodePen Embed Block

I write web development tutorials in my blog and have tried many syntax highlighter options for code snippets in the past.

I recently decided to give Codepen a try and this plugin is surely the best way to embed and configure those!

WordPen vs CodePen Embed Block