DEV Community

Stella Mwanahamuntu
Stella Mwanahamuntu

Posted on

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 %}
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (9)

Collapse
 
triptych profile image
Andrew Wooldridge • Edited

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

Collapse
 
th0rgall profile image
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 %}
Enter fullscreen mode Exit fullscreen mode

Documentation: dev.to/p/editor_guide

Collapse
 
jcubic profile image
Jakub T. Jankiewicz

Options are not documented it seems, where you can find all of them? I want to find how to require click to run the pen.

Collapse
 
cleveroscar profile image
Oscar Ortiz

I couldn't get this to work for the life of me. Thank you for this small quick post on getting embed code to work on a blog post. I'm a fan of being able to show the live demo while the user is reading the post.

Collapse
 
cassidoo profile image
Cassidy Williams

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

Collapse
 
practicingdev profile image
Practicing Developer

Nice!

Collapse
 
xaverfleer profile image
Xaver Fleer

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

Collapse
 
endymion1818 profile image
Ben Read

Great info, just what I needed to embed my pen. Thank you!