How To Embed CodePen in Your Website.

I tried CodePen belatedly.

GOAL

To embed CodePen viewer in my WordPress web site as below.

CodePen is a web service to build, test, share and discover front-end code such as html, css and JavaScript.

CodePen is a social development environment for front-end designers and developers.
from CodePen

In my case, I’ve signed up at first, but you can just start coding by clicking “Start Coding” button.

Click “Embed” button at the lower bottom of the page after coding.

Select the style of editor and change the size of the window. you can use anything you like. I chose “HTML (recommended)” and copy the code.

Paste the copied code in the Custom HTML block as below.

See the Pen watching by HanakoSonobe (@s-nako) on CodePen.