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

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](https://dev.to)

Inline Images

example image, with sloan ![Alt text of image](https://dev.to/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:

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

Instagram embed

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

{% instagram BXgGcAUjM39 %}

Here's the Markdown cheatsheet again for reference.

Happy posting! 📝