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

mwanahamuntu_

Stella Mwanahamuntu

Posted on January 31, 2020

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.

💖 💪 🙅 🚩
mwanahamuntu_
Stella Mwanahamuntu

Posted on January 31, 2020

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related