Editor Guide 🤓

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__


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

Inline Images

example image, with sloan ![Alt text of image](put-link-to-image-here)


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:

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 CodePen link, ending in the pen ID code, as follows:

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

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: example image of writing lists with images in Markdown

Here's the Markdown cheatsheet again for reference.

Happy posting! 📝