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

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 Tag Embed
All you need is the tag name:
{% tag git %}
dev.to Comment Embed
All you need is the ID
at the end of a comment URL. To get the comment link, click either the timestamp or the menu button in the top right corner 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 %}
- YouTube:
{% youtube dQw4w9WgXcQ %}
- Vimeo:
{% vimeo 193110695 %}
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 %}
Default view
-
You can change the default view, the options are both, preview, editor. Defaults to both
{% stackblitz ball-demo view=preview %}
initialpath
-
Which url to initially load in address bar.
{% codesandbox ppxnl191zx initialpath=/initial/load/path %}
module
-
Which module to open by default.
{% codesandbox ppxnl191zx module=/path/to/module %}
Custom tabs
-
You can add a custom tab order to you JSFiddle embed tag. Defaults to js,html,css,result
{% jsfiddle https://jsfiddle.net/webdevem/Q8KVC result,html,css %}
GitHub Repo Embed
All you need is the GitHub username and repo:
{% github thepracticaldev/dev.to %}
GitHub Issue, Pull request or Comment Embed
All you need is the GitHub issue, PR 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.
SlideShare Embed
All you need is the SlideShare key
{% slideshare rdOzN9kr1yK5eE %}
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
// 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 %}
Of CodeSandbox's many optional attributes, the following are supported by using them in your tag, just add them after the id, separated by spaces.
JSFiddle Embed
All you need is the full JSFiddle link
, ending in the fiddle ID code, as follows:
{% jsfiddle https://jsfiddle.net/link2twenty/v2kx9jcd %}
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 %}
Spotify Embed
Enter the Spotify URI of the Spotify track / playlist / album / artist / podcast episode you are trying to embed.
{% spotify spotify:episode:5V4XZWqZQJvbddd31n56mf %}
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: