Things to Know

• We use a markdown editor that uses Jekyll front matter.
• Most of the time, you can write inline HTML directly into your posts.
• We support native Liquid tags and created some fun custom ones, too! Trying embedding a Tweet or GitHub issue in your post.
• Links to unpublished posts are shareable for feedback/review.
• When you're ready to publish, set the published variable to true.

Front Matter

Custom variables set for each post, located between the triple-dashed lines in your editor. Here are a list of possibilities:

• title: title of your article
• published: boolean that determines whether or not your article is published
• description: description area in Twitter cards and open graph cards
• tags: max of four tags, needs to be comma-separated
• canonical_url: link for canonical version of content
• cover_image: cover image for post, accepts a URL.
  The best size is 1000 x 420.

Markdown Basics

Below are some examples of commonly used markdown syntax. If you want to dive deeper, check out this cheat sheet.

Bold & Italic

Italics: *asterisks* or _underscores_

Bold: **double asterisks** or __double underscores__

Links

I'm an inline link: [I'm an inline link](put-link-here)

Inline Images

![Alt text of image](put-link-to-image-here)

Headers

Add a header to your post with this syntax:

      
#One '#' for a h1 header
##Two '#'s for a h2 header
...
######Six '#'s for a h6 header
    

One '#' for a h1 header

Two '#'s for a h2 header

Six '#'s for a h6 header

Liquid Tags

We support native Liquid tags in our editor, but have created our own custom tags listed below:

dev.to Article/Post Embed

All you need is the full link of the article:

{% link https://dev.to/kazz/boost-your-productivity-using-markdown-1be %}

dev.to Comment Embed

All you need is the ID at the end of a comment URL. To get the comment link, click the top right arrow on a comment and then click "Permalink". Here's an example:

{% devcomment 2d1a %}

dev.to Podcast Episode Embed

All you need is the full link of the podcast episode:

{% podcast https://dev.to/basecspodcast/s2e2--queues-irl %}

Twitter Embed

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

GitHub Issue or Comment Embed

All you need is the GitHub issue or comment URL:

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

GitHub Gist Embed

All you need is the gist link:

{% gist https://gist.github.com/QuincyLarson/4bb1682ce590dc42402b2edddbca7aaa %}

YouTube Embed

All you need is the YouTube id from the URL:

{% youtube 9z-Pdfxxdyo %}

CodePen Embed

All you need is the full CodePen link, ending in the pen ID code, as follows:

{% codepen https://codepen.io/twhite96/pen/XKqrJX %}

RunKit Embed

Put executable code within a runkit liquid block, as follows:

{% runkit %}
console.log("Place javascript here!"); 
{% endrunkit %} 

Instagram Embed

All you need is the Instagram post id from the URL.

{% instagram BXgGcAUjM39 %}

Parsing Liquid Tags as a Code Example

To parse Liquid tags as code, simply wrap it with a single backtick or triple backticks.

`{% mytag %}{{ site.SOMETHING }}{% endmytag %}`

One specific edge case is with using the raw tag. To properly escape it, use this format:

`{% raw %}{{site.SOMETHING }} {% ``endraw`` %}`

Common Gotchas

Lists are written just like any other Markdown editor. If you're adding an image in between numbered list, though, be sure to tab the image, otherwise it'll restart the number of the list. Here's an example of what to do:

Here's the Markdown cheatsheet again for reference.

Happy posting! 📝