DEV Community

Jess Lee for The DEV Team

Posted on

Ways to enhance your DEV posts! Useful embeds.

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 %}

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] =; //<-- this is a bug btw.
Enter fullscreen mode Exit fullscreen mode


valueChange = key => e => this.setState(oldState => ({
Enter fullscreen mode Exit fullscreen mode

b) Podcast Episode

Only available for podcasts found on, you'll need the full link. Email us ( if you'd like your podcast included.
{% podcast %}

play pause Base.cs Podcast

c) Post

You'll need the full link of the post:
{% link %}

d) User

You'll only need a username:
{% user ben %}

3. GitHub

a) Gist

You'll need the full link of the gist:
{% gist %}

b) Issue

You'll need the full link of the issue or comment:
{% github %}

Allow Login with Gitlab/Your Site #242

c33s avatar
c33s posted on

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/ %}

GitHub logo forem / forem

For empowering community 🌱

Forem 🌱

For Empowering Community

Build Status GitHub commit activity GitHub issues ready for dev GitPod badge

Welcome to the Forem codebase, the platform that powers 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. (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 %}


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 %} 
Enter fullscreen mode Exit fullscreen mode
console.log("Place javascript here!");

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 %}

Top comments (20)

cjbrooks12 profile image
Casey Brooks

There are lots of posts that come in a series, and they usually include their own kind of "Table of Contents" to easily navigate among the other posts in that series. Examples include this one with a full Table of Contents, or my own tutorial series with forward/backward links in each post.

Is there any way to automatically generate this kind of ToC or easily provide forward/backward navigation through a series without needing to manually update the links in each post. I feel like I've seen something like this here on, but can't find that post again to save my life. Or maybe I'm just going crazy...

I'm imagining something like adding a Front Matter property with the name of a series, and then a custom tag to generate the full ToC for all a user's posts in that series, ordered by date, and another tag that looks up the next and previous posts in that series and generates the appropriate links.

peter profile image
Peter Kim Frank

You're not going crazy, this does exist on some articles you've probably seen around (example). Right now it's a manual process for admins to add articles to a series, which is why you haven't seen more of them across the site.

Your UI suggestion to use the Front Matter is pretty interesting. Part of the delay (aside from general busy-ness) is that we've wanted to give more thought to the user-facing side of the feature.

I'm sure @ben would have some additional thoughts.

ben profile image
Ben Halpern

Yeah. As Peter mentioned, at the data level this feature exists. It's the UI we never got to settling on. We want this to be settable in your dashboard but it's been sitting around in the icebox.

But the timing is good for us to surface this again soon and make it happen. Thanks for the push.

georgeoffley profile image
George Offley

That would be a sick feature.

arnoldwafula profile image
Arnold Wafula

Having problems embedding gist. Getting an error [Invalid Gist link: Links must follow this format:]

georgeoffley profile image
George Offley

Saving this for the next post.

sudiukil profile image
Quentin Sonrel

Simply awesome.

dance2die profile image
Sung M. Kim

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?

mrpiero profile image
Piero Bardelli

I didn't that Dev had podcasts, thank you!

rhymes profile image

Wow, so many!

Does link work for external websites as well?

ben profile image
Ben Halpern

Not at the moment. It's meant to in the future though, we haven't gotten around to it.

I'll write up a new issue in case you want to give it a go 🙃

rhymes profile image

Well, let's talk about it after August 8th :D

jdnichollsc profile image
J.D Nicholls

hey guys, exist any way to limit the width/height as a parameter?

belhassen07 profile image
Belhassen Chelbi

so cool

suntong profile image
creativ_bracket profile image

Thanks Jess. I'm always wondering how to enhance things. Perhaps at some point we could figure out how to incorporate DartPad 😄

rafalpienkowski profile image
Rafal Pienkowski

Thanks for the list of embeds. 😁

varcharr profile image

This is great, thank you! Bookmarked.

theodesp profile image
Theofanis Despoudis • Edited

Hey that's amazing as it allows us to do interactive tutorials!

drazisil profile image
Drazi Crendraven

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