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 1100 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
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 %}
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`` %}`
Twitter
GitHub