How to Embed CodePens into your dev.to posts - It's easy.

Hey Devs,

So I recently started writing blog series to share and help me keep track of some courses I have been taking. The only challenge I had was trying to figure out how to display and demonstrate the way code works on the dev.to platform itself. I literally tweeted asking someone to do a tutorial.

Turns out it is really as simple as typing

{% codepen https://codepen.io/cassidoo/pen/MyaWzp %}

just make sure to avoid putting the back ticks that cause the black background.

So if it is done correctly,

this should happen.
Ps. I used one of Cassidy's codepens.

Yep so IT IS really simple.
I am happy to answer any questions or demonstrate in any other way possible.

Thank you for reading.

Comments

[Andrew Wooldridge]

Yes! You can embed a lot of different kinds of content - see this article dev.to/devteam/ways-to-enhance-you... ( there are even more like codesandbox

{% codesandbox 23948skjfksjdf %}

There's another article about even more embeds plus a link to the editor's guide dev.to/awwsmm/a-mild-complaint-3jl5

[Thor Galle]

Thanks for explaining! If you also want to configure the CodePen options, there is at least the officially supported default-tab option. Example:

{% codepen https://codepen.io/th0rgall/pen/OJXYxdm default-tab=js,result %}

Documentation: dev.to/p/editor_guide

[Justin Stout]

Great!! Thank you for that

[Cassidy Williams]

I just googled how to embed Pens and was startled seeing my own Pen on this, hahaha! Thank you for the post!!

[Practicing Developer]

Nice!

[Xaver Fleer]

Is it possible to set a fixed height of the frame? I'd like to set it to 500px