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.

We have two editor versions. If you'd prefer to edit title and tags etc. as separate fields, switch to the "rich + markdown" option in /settings/ux. Otherwise, continue:

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. 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)

Anchored links (For things like a Table of Contents)

      ## Table Of Contents
        * [Chapter 1](#chapter-1)
        * [Chapter 2](#chapter-2)

      ### Chapter 1 <a name="chapter-1"></a>

Embedding Images

When adding GIFs to posts and comments, please note that there is a limit of 200 megapixels per frame/page. example image

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


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

Author Notes/Comments

Add some hidden notes/comments to your article with this syntax:

<!-- This won't show up in the content! -->

🌊 Liquid Tags

We support native Liquid tags in our editor, but have created our own custom tags listed below:

This MMA Life Article/Post Embed

All you need is the full link of the article:

{% link https://www.thismmalife.com/kazz/boost-your-productivity-using-markdown-1be %}

You can also use the slug like this:

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

You can also use the alias post instead of link like this:

{% post https://www.thismmalife.com/kazz/boost-your-productivity-using-markdown-1be %}

or this:

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

This MMA Life User Embed

All you need is the This MMA Life username:

{% user leewynne %}

This MMA Life Tag Embed

All you need is the tag name:

{% tag git %}

This MMA Life 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:

{% comment 2d1a %}

This MMA Life Podcast Episode Embed

All you need is the full link of the podcast episode:

{% podcast https://www.thismmalife.com/ariel-helwani-mma-show/tony-ferguson-robert-whittaker-roy-jones-jr %}

This MMA Life Listing Embed

All you need is the full link of the listing:

{% listing https://www.thismmalife.com/listings/miscellanous/how-to-create-a-listing-3685 %}

You can also use the category and slug like this:

{% listing /miscellanous/how-to-create-a-listing-3685 %}

Note: Expired listings will raise an error. Make sure the listing is published or recently bumped.

Details Embed

You can embed a details HTML element by using details, spoiler, or collapsible. The summary will be what the dropdown title displays. The content will be the text hidden behind the dropdown. This is great for when you want to hide text (i.e. answers to questions) behind a user action/intent (i.e. a click).

{% details summary %} content {% enddetails %}

{% spoiler summary %} content {% endspoiler %}

{% collapsible summary %} content {% endcollapsible %}

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

Video Embed

All you need is the id from the URL.

  • YouTube: {% youtube dQw4w9WgXcQ %}
  • Vimeo: {% vimeo 193110695 %}
  • Twitch: {% twitch ClumsyPrettiestOilLitFam %}

Wiki Embed

Enter the full URL of the Wikipedia article you want to embed, with or without the anchor #.

{% wikipedia https://en.wikipedia.org/wiki/Wikipedia %} {% wikipedia https://en.wikipedia.org/wiki/Wikipedia#Diversity %}

Medium Embed

Just enter the full URL of the Medium article you are trying to embed.

{% medium https://medium.com/s/story/boba-science-how-can-i-drink-a-bubble-tea-to-ensure-that-i-dont-finish-the-tea-before-the-bobas-7fc5fd0e442d %}

SlideShare Embed

All you need is the SlideShare key:

{% slideshare rdOzN9kr1yK5eE %}

Instagram Embed

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

{% instagram BXgGcAUjM39 %}

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

Blogcast Tag

All you need is the article id code from the embed code:

{% blogcast 1234 %}

Wikipedia Embed

Enter the full URL of the Wikipedia article you want to embed, with or without the anchor.

{% wikipedia https://en.wikipedia.org/wiki/Wikipedia %}
{% wikipedia https://en.wikipedia.org/wiki/Wikipedia#Diversity %}

Asciinema Embed

All you need is an Asciinema id or URL:

{% asciinema 239367 %} {% asciinema https://asciinema.org/a/239367 %}

Reddit Tag

Enter the full URL of the post you want to embed

{% reddit https://www.reddit.com/r/aww/comments/ag3s4b/ive_waited_28_years_to_finally_havr_my_first_pet %}

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