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 is a list of possibilities:

  • title: the 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 the canonical version of the content
  • cover_image: cover image for post, accepts a URL.
    The best size is 1000 x 420.
  • series: post series name.

✍ 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

example image, with sloan 

        ![Alt text of image](put-link-to-image-here)
You can even add a caption using the HTML figcaption tag!

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

You can also use the slug like this:

{% link kazz/boost-your-productivity-using-markdown-1be %}

dev.to User Embed

All you need is the DEV username:

{% user jess %}

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

Glitch embed

All you need is the Glitch project slug

{% glitch earthy-course %}

There are several optional attributes you can use in your tag, just add them after the id, separated by spaces.

app
Shows the app preview without the code.
{% glitch earthy-course app %}
code
Shows the code without the app preview.
{% glitch earthy-course code %}
preview-first
Hides the file browser.
{% glitch earthy-course preview-first %}
no-attribution
Hides the file browser.
{% glitch earthy-course no-attribution %}
no-files
Hides the file browser.
{% glitch earthy-course no-files %}
file
Lets you choose which file to display in the code panel. Defaults to index.html.
{% glitch earthy-course file=script.js %}

GitHub Repo Embed

All you need is the GitHub username and repo:

{% github thepracticaldev/dev.to %}

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

Video Embed

All you need is the id from the URL.

  • YouTube: {% youtube dQw4w9WgXcQ %}
  • Vimeo: {% vimeo 193110695 %}

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 %}
default-tab
Add default-tab parameter to your CodePen embed tag. Default to result
{% codepen https://codepen.io/twhite96/pen/XKqrJX default-tab=js,result %}

RunKit Embed

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

{% runkit
// hidden setup JavaScript code goes in this preamble area
const hiddenVar = 42
%}
// visible, reader-editable JavaScript code goes here
console.log(hiddenVar)
{% endrunkit %}

Stackblitz Embed

All you need is the ID of the Stackblitz:

{% stackblitz ball-demo %}

CodeSandbox Embed

All you need is the ID of the Sandbox:

{% codesandbox ppxnl191zx %}

repl.it Embed

All you need is the URL after the domain name:

{% replit @WigWog/PositiveFineOpensource %}

Instagram Embed

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

{% instagram BXgGcAUjM39 %}

Speakerdeck Tag

All you need is the data-id code from the embed link:

      # Given this embed link:
      < script async class="speakerdeck-embed"
      data-id="7e9f8c0fa0c949bd8025457181913fd0"
      data-ratio="1.77777777777778" src="//speakerdeck.com/assets/embed.js">< /script >
    
      {% speakerdeck 7e9f8c0fa0c949bd8025457181913fd0 %}

Soundcloud Embed

Just enter the full URL of the Soundcloud track you are trying to embed.

{% soundcloud https://soundcloud.com/user-261265215/dev-to-review-episode-1 %}

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! 📝