Editor Guide 🤓

• This editor uses Jekyll front matter and includes the same Markdown formatting toolbar as the rich editor.
• Most of the time, you can write inline HTML directly into your posts.
• We support native Liquid tags and custom ones too! Try embedding a Tweet, YouTube video, or GitHub issue using the complete URL: {% embed https://... %}.
• Add up to four comma-separated tags per post, and use a clear, descriptive post title with relevant keywords.
• Links to unpublished posts (drafts or scheduled posts) are shareable for feedback/review.
• When you're ready to publish, set the published variable to true or click Publish.

Custom variables set for each post, located between the triple-dashed lines (---) at the top of your editor:

• 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 (best size is 1000 x 420)
• series: post series name
• ai_disclosure_level: AI usage disclosure (not_disclosed, no_ai, some_ai, fully_autonomous)

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)

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>

Inline Images

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

![Image description](put-link-to-image-here)

Headings

Add a heading to your post with this syntax:

# One '#' for a h1 heading
## Two '#'s for a h2 heading
...
###### Six '#'s for a h6 heading

Author Notes/Comments

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

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

People access online content in all kinds of different ways, and there are a few things you can do to make your posts more easily understood by a broad range of users. You can find out more about web accessibility at W3C's Introduction to Web Accessibility, but there are two main ways you can make your posts more accessible: providing alternative descriptions of any images you use, and adding appropriate headings.

Providing alternative descriptions for images

Some users might not be able to see or easily process images that you use in your posts. Providing an alternative description for an image helps make sure that everyone can understand your post, whether they can see the image or not.

When you upload an image in the editor, you will see the following text to copy and paste into your post:

![Image description](/file-path/my-image.png)

Replace the "Image description" in square brackets with a description of your image - for example:

![A pie chart showing 40% responded "Yes", 50% responded "No" and 10% responded "Not sure"](/file-path/my-image.png)

By doing this, if someone reads your post using an assistive device like a screen reader (which turns written content into spoken audio) they will hear the description you entered.

Providing headings

Headings provide an outline of your post to readers, including people who can't see the screen well. Many assistive technologies (like screen readers) allow users to skip directly to a particular heading, helping them find and understand the content of your post with ease.

Headings can be added in levels 1 - 6. Avoid using a level one heading (i.e., '# Heading text'). When you create a post, your post title automatically becomes a level one heading and serves a special role on the page, much like the headline of a newspaper article. Similar to how a newspaper article only has one headline, it can be confusing if multiple level one headings exist on a page.

In your post content, start with level two headings for each section (e.g. '## Section heading text'), and increase the heading level by one when you'd like to add a sub-section, for example:

## Fun facts about sloths

### Speed

Sloths move at a maximum speed of 0.27 km/h!

🌊 Liquid Tags

We support native Liquid tags in our editor, but have created our own custom tags as well. A list of supported custom embeds appears below. To create a custom embed, use the complete URL:
{% embed https://... %}

Supported URL Embeds

Universal URL Embeds

For most supported platforms, you can simply use the {% embed URL %} syntax. The platforms natively supported are:

• Asciinema
• Bandcamp
• Blogcast
• Bluesky
• Bolt.new
• Cloud Run
• CodePen
• CodeSandbox
• DotNetFiddle
• GitHub (Gist, Issue, Repo)
• Glitch
• Hugging Face Space
• Instagram
• JSFiddle
• JSitor
• Kotlin
• LiveCodes
• Loom
• Lovable
• Medium
• Mux
• Next Tech
• Reddit
• Replit
• Slideshare
• SoundCloud
• Speaker Deck
• Spotify
• StackBlitz
• Stackery
• Stack Exchange / Stack Overflow
• Twitch
• Twitter (Tweet or Timeline)
• Vimeo
• Warp Terminal
• Wikipedia
• YouTube

Example: {% embed https://www.youtube.com/watch?v=12345 %}

DEV Community Specific Embeds

You can also use explicit tags to embed internal content across the platform:

• Article Link: {% link URL %} (Renders a card for the article)
• User Profile: {% user username %}
• Tag Profile: {% tag tagname %}
• Comment: {% comment comment_id_code %} (or use a comment URL)
• Podcast Episode: {% podcast URL %}
• Organization: {% organization orgname %}

Supported Non-URL Embeds

{% agent_session ID %}

{% agent_session ID planning %}

{% agent_session ID 0..10 %}

{% card %}
This is some **important** content inside a card!
{% endcard %}

{% cta link %}
 description 
{% endcta %}

  {% details summary %} content {% enddetails %}
  {% spoiler summary %} content {% endspoiler %}
  {% collapsible summary %} content {% endcollapsible %}

{% katex %}
 c = \pm\sqrt{a^2 + b^2}
{% endkatex %}

{% katex inline %} c = \pm\sqrt{a^2 + b^2} {% endkatex %}

{% feed org=org-slug %}
{% feed tag=ruby %}
{% feed tags=ruby,javascript limit=10 sort=reactions %}

{% row %}
  {% col background=default %}Column 1{% endcol %}
  {% col span=2 background=subtle %}Wide column{% endcol %}
{% endrow %}

{% features %}
  {% feature title="Fast" icon="lightning" %}Optimized for speed.{% endfeature %}
  {% feature title="Secure" icon="🔒" %}Built with security in mind.{% endfeature %}
  {% feature title="Simple" %}No icon needed.{% endfeature %}
{% endfeatures %}

{% quote author="Jane Doe" role="CTO" rating=5 %}Great product!{% endquote %}

{% quotes %}
  {% quote author="Jane Doe" rating=5 %}Great product!{% endquote %}
  {% quote author="John Smith" %}Easy to recommend.{% endquote %}
{% endquotes %}

{% offer link="https://example.com" button="Sign Up" %}Join us today!{% endoffer %}

{% slides mode="carousel" %}
  {% slide image="https://example.com/photo.jpg" alt="Description" %}
  {% slide video="https://youtube.com/watch?v=abc123" %}
{% endslides %}

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

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:

Here's the Markdown cheatsheet again for reference.

Happy posting! 📝