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.
Discussion (6)
Thanks for explaining! If you also want to configure the CodePen options, there is at least the officially supported
default-tab
option. Example:Documentation: dev.to/p/editor_guide
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
I just googled how to embed Pens and was startled seeing my own Pen on this, hahaha! Thank you for the post!!
Great!! Thank you for that
Nice!
Is it possible to set a fixed height of the frame? I'd like to set it to 500px