It's been a minute since I've shared a post in this series, but I'm finally back to school y'all on another lesser-known feature of DEV. 🤜💥🤛

How to Use Embeds

A feature that gets frequently overlooked in our community is embeds.

In their simplest form embeds give you a cool way to embed things from other websites. For instance, GitHub repos, CodePen pens, YouTube videos, Spotify songs, etc.

The basic Markdown for embedding something is written as follows:

{% embed https://... %}

For example, to embed a YouTube video, I would write:

{% embed https://www.youtube.com/watch?v=dQw4w9WgXcQ %}

Which would create:

One Known Exception

We didn't always format our embeds like this! Thanks to an update from @aritdeveloper a while back 🙌, thankfully we have a mostly uniform method to write these. Check out this announcement when the update was made!

Now, I emphasize "mostly uniform" because there is one embed that doesn't follow the format.

Our only exception is CodePen which uses the following syntax:

{% codepen https://... %}

In the future, I think we will probs make this uniform with the others. I've logged this request here on GitHub... hmmm, maybe I should embed it here instead. 😉

CodePen Embeds Do Not Follow Our Embed Formula #20134

michael-tharrington posted on Sep 18, 2023

Describe the bug

CodePen embeds don't follow the formula we've established for embeds here:

{% embed https://... %}

You can get them to work by using the following embed syntaxes:

{% codpen https://... %}

To Reproduce

1. Try to embed this CodePen on DEV {% embed https://codepen.io/cassidoo/pen/MyaWzp %}
2. It fails.
3. Try to embed a CodePen on DEV with the following syntax: {% codepen https://codepen.io/cassidoo/pen/MyaWzp %}
4. It works!

Expected behavior

All embeds should use the following formula: {% embed https://... %}

I do think it'd be ideal if we could still allow folks to use the current formulas too. That way folks who are used to using these formulas don't think something has broken.

Additional context

Shoutout to @dumebii for pointing out this issue to me and for writing up this post to try and help folks with using embeds on DEV - https://dev.to/dumebii/how-to-use-embeds-on-your-dev-community-blogposts-3oe5.

View on GitHub

That's That!

Anywho, if you have any embed questions, comments, requests, or anything else, feel free to hit me up here!