In alphabetical order, here are our current liquid tag embed options, with the syntax you'll need to include them in your posts :)
1. Codepen
You'll need the full link of the pen:
{% codepen https://codepen.io/cassidoo/pen/NbOzKg %}
2. DEV
a) Comment
You'll need the id at the end of the comment url/permalink:
{% devcomment 40fh %}
Yeah, curried functions are perfect for this. The arrow syntax lends itself to this.
valueChange = (key) => {
return function (e) {
var obj= {};
state[key] = e.target.value; //<-- this is a bug btw.
this.setState(obj);
}.bind(this);
}
becomes
valueChange = key => e => this.setState(oldState => ({
...oldState,
[key]: e.target.value
}))
</div>
b) Podcast Episode
Only available for podcasts found on https://dev.to/pod, you'll need the full link. Email us (yo@dev.to) if you'd like your podcast included.
{% podcast https://dev.to/basecspodcast/s2e2--queues-irl %}
c) Post
You'll need the full link of the post:
{% link https://dev.to/kazz/boost-your-productivity-using-markdown-1be %}
Article No Longer Available
d) User
You'll only need a username:
{% user ben %}
3. GitHub
a) Gist
You'll need the full link of the gist:
{% gist https://gist.github.com/QuincyLarson/4bb1682ce590dc42402b2edddbca7aaa %}
b) Issue
You'll need the full link of the issue or comment:
{% github https://github.com/thepracticaldev/dev.to/issues/242 %}
Allow Login with Gitlab/Your Site #242
github is not the holy grail nor twitter is, as reaction microsoft bought github i would rather login with gitlab than with github. even better would be, if you handle user login directly on your site.
c) Repository
You'll only need the username / repo name:
{% github thepracticaldev/dev.to %}
Forem 🌱
Welcome to the Forem codebase, the platform that powers dev.to. We are so excited to have you. With your help, we can build out Forem’s usability, scalability, and stability to better serve our communities.
What is Forem?
Forem is open source software for building communities. Communities for your peers, customers, fanbases, families, friends, and any other time and space where people need to come together to be part of a collective See our announcement post for a high-level overview of what Forem is.
dev.to (or just DEV) is hosted by Forem. It is a community of software developers who write articles, take part in discussions, and build their professional profiles. We value supportive and constructive dialogue in the pursuit of great code and career growth for all members. The ecosystem spans from beginner to advanced developers, and all are welcome to find their place…
4. Glitch
You'll only need the project slug:
{% glitch beautiful-cubes %}
5. Instagram
You'll only need the post id:
{% instagram BXgGcAUjM39 %}
6. Twitter
Using the Twitter Liquid tag will allow the tweet to pre-render from the server, providing your reader with a better experience. All you need is the tweet id from the url.
{% twitter 733908215021199360 %}
7. repl.it
All you need is the URL after the domain name:
{% replit @WigWog/PositiveFineOpensource %}
8. Runkit Embed
Put executable code within a runkit liquid block, as follows:
{% runkit %}
console.log("Place javascript here!");
{% endrunkit %}
9. Speaker Deck
This is a little more complicated. You'll want to pull the embed code for the slides on Speaker Deck, and then pull the id from that code:
{% speakerdeck 28cc127475184084ab94fb05a4ed8f4d %}
10. YouTube
You'll only need the video id:
{% youtube 9z-Pdfxxdyo %}
Latest comments (24)
Very Helpful Post ! Thanks....
I just discovered this helpful post. Thanks!
is there a way i can embed my twitter profile?
Having problems embedding gist. Getting an error [Invalid Gist link: gist.github.com/arnold-wafula/192d... Links must follow this format: gist.github.com/username/gist_id]
It looks like linking to a single file form a gist is not supported.
This is great. Can it be added to the help page of supported embeds so I don't have to Google it to find it's been here all along? :D
Any way to embed online charts to dev.to @jess ?
I've asked the question here --
Your favorite online chart and embedding them to dev.to
suntong ・ Jan 4 ・ 1 min read
Thanks
hey guys, exist any way to limit the width/height as a parameter?
This is great, thank you! Bookmarked.
Yes! everything in one place! (Now Ben doesn't have to remind people how to do embed 😛)
And the question I have is, do you have a plan to add a support CodeSandBox/StackBlitz, ... etc?
Simply awesome.
Saving this for the next post.
I didn't that Dev had podcasts, thank you!
so cool
Thanks for the list of embeds. 😁
Hey that's amazing as it allows us to do interactive tutorials!