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.
Top comments (8)
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
There's another article about even more embeds plus a link to the editor's guide dev.to/awwsmm/a-mild-complaint-3jl5
Thanks for explaining! If you also want to configure the CodePen options, there is at least the officially supported
default-taboption. Example:Documentation: dev.to/p/editor_guide
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.
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.
I just googled how to embed Pens and was startled seeing my own Pen on this, hahaha! Thank you for the post!!
Nice!
Is it possible to set a fixed height of the frame? I'd like to set it to 500px
Great info, just what I needed to embed my pen. Thank you!