Better Ways to Talk About Code: Announcing Rich Embeddable Blocks
Tags: meta, announcements, liquid, markdown
Published: 2017-04-05 15:42:47

---
title: "Better Ways to Talk About Code: Announcing Rich Embeddable Blocks"
published: true
description: Twitter, GitHub, Codepen, Youtube, etc.
cover_image: 
tags: meta, announcements, liquid, markdown
---

Before we get to the meat of this announcement, let me qualify all of this with the following tweet:

{% twitter 848615522870669312 %}

We at [dev.to](/) have tried hard to gather good feedback and build the features our users are looking for (while ignoring the bad ideas ðŸ˜¬). We have gotten a lot of feedback on the type of things that would help people tell better stories about their code and their solo or team choices.

We've also had developers who manage open source projects or run services reach out to us about potential integrations. Here's an issue created a while back: 

{% github https://github.com/thepracticaldev/dev.to/issues/9 %}

Within that discussion, another member of our community chimed in about their service and how we might integrate as well:

{% github https://github.com/thepracticaldev/dev.to/issues/9#issuecomment-271402429 %}

At the time, we agreed that these were wonderful ideas but we weren't sure how we were going to go about integrating them into our markdown renderer to be natural and compatible. Another member of our community pointed to the way [Octopress](https://github.com/imathis/octopress) uses syntax from the [Liquid template language](https://shopify.github.io/liquid/) in order to accomplish this. So we copied them.

In case you haven't noticed, this post has some GitHub issue comments embedded into it, as well as a tweet. Here is the syntax for those embeds.

```
{% twitter 848615522870669312 %}


{% github https://github.com/thepracticaldev/dev.to/issues/9 %}


{% github https://github.com/thepracticaldev/dev.to/issues/9#issuecomment-271402429 %}
```

And that's what we're here to talk about. This is our native syntax for creating all sorts of interesting embeddable content. What's more, though, is that this approach gives us a lot of control over the way these embeds are rendered. For example, the above blocks are cached and rendered from our server. If you know anything about my [obsession with browser performance](https://dev.to/ben/making-devto-insanely-fast), you know this makes me happy. I _hate_ the embed libraries that weigh down pages and massively degrade user experience.

I also mentioned that [repl.it](https://repl.it) comment for a reason. Along with the tweets and GitHub issues, we have also implemented embeds from their very useful service.

{% replit GwRA %}

To put a repl.it embed in your post, here is the syntax:

```
{% replit GwRA %}
```

We also included YouTube:

```
{% youtube 9z-Pdfxxdyo %}
```

We will be working to create more embeds and open sourcing the whole process so that the dev.to community can chip in with new ideas for this part of our platform. The next integrations will be **GitHub Gists**, **Codepen**, **chart services**, and anything else that would be most useful for developers.

There are still some slight kinks to work out under the hood but they will be immediately useful if you want to tell the kinds of stories that richer content can facilitate. We're also fully backward compatible with the Jekyll markdown system, so your blog crossposts are still 100% valid.

Happy coding from the [dev.to](https://dev.to) team. We will be releasing some posts about how we implemented the server-side GitHub and Twitter embeds. We're also looking for an 'official' name for these blocks. We use liquid syntax but we aren't exactly using _liquid_ fully. Octopress calls these 'plugins', but we don't think that's our best description. If you have any feedback on anything discussed here, please feel free to leave a comment. â¤ï¸

I'll leave you with a demonstration of the YouTube embed ðŸ˜Š

{% youtube 9z-Pdfxxdyo %}