How to Embed Preview Links in Markdown on a Hashnode Blog

Yes, you can show live previews of internet links right on your Hashnode blog.

An embedded link has its content appear as part of a post and supplies a visual element that encourages increased click-through and engagement.

Method 1 ─ Generic Hashnode Embeds (not recommended on hashnode)

First thing first: in general, Markdown supports HTML tags. Which means that it also supports <iframe>.

So if you need to, say, embed a YouTube video, you can just copy and paste the embed code from them, drop it into a Markdown document, and you should be good to go. You don’t need to do anything special to embed third-party media in Markdown.

Here is what aYouTube embeds look like using this method:

You do need to do whatever is necessary for that particular service though, and some services give you <script> based series of tags that not all Markdown implementations support.

In the example above, the code I got from YouTube clicking "Share", then "embed" is:

<iframe width="560" height="315" src="https://www.youtube.com/embed/oavMtUWDBTM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Method 2 ─ The Hashnode Way

Hashnode uses Embed.ly to support all sorts of embed on the platform. Which means that your Hashnode-powered blog also supports them by default. No need to paste on the platform any specific embed code. Just follow the following syntax and the magic will happen.

Here is what I mean:

To embed the same YouTube video above, you can simply type:

%[https://www.youtube.com/watch?v=oavMtUWDBTM]

Here is what you get:

Cool isn't it?

And you can do that also with github repositories, tweets and articles, as well as with a host of other online objects...

All you have to do is to follow this simple syntax:

%[Paste-link-to-embed]

Here are the examples Hashnode provides you with in its guide:

//Embed Tweets
%[https://twitter.com/hashnode/status/1080795453115920384?s=20]

//Embed YouTube Videos
%[https://www.youtube.com/watch?v=vAKtNV8KcWg]

//Embed Github Repo
%[https://github.com/hashnode/hashnode-cli]

//Embed Codepen
%[https://codepen.io/zephyo/pen/MZbLwV]

//Embed Glitch
%[https://glitch.com/edit/#!/lithium-battery-recycling]

//Embed Soundcloud
%[https://soundcloud.com/androidauthority/024-prime-day-shmimeday]

//Embed Expo
%[https://snack.expo.io/@iamshadmirza/tinder-cards]

//Embed Loom
%[https://www.loom.com/share/1436e60ced174f37b729be61081e069d]

//Embed Vimeo
%[https://vimeo.com/258358902], additional valid parameters can be 
passed to customize the player. 
Ex. %[https://vimeo.com/258358902?width=820&color=ED5565]
Visit this link https://developer.vimeo.com/api/oembed/videos for more
details on how to customize the player, supported URL types and parameters.

//Embed Canva
%[https://www.canva.com/design/your-design-id/view]

//Embed any article on web or website
%[https://hashnode.com]

Conclusion

So there you have it.

If you want to embed stuff on your Hashnode blog, all you have to do is.... type :)

I'm loving it so far. Want to try it out? Give it a go