DEV Community

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 ![Image description](put-link-to-image-here)

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

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://... %}

Universal URL Embeds

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

  • Asciinema
  • Bandcamp
  • Blogcast
  • Bluesky
  • Cloud Run
  • CodePen
  • CodeSandbox
  • DotNetFiddle
  • GitHub (Gist, Issue, Repo)
  • Glitch
  • Instagram
  • JSFiddle
  • JSitor
  • Kotlin
  • Loom
  • Medium
  • Mux
  • Next Tech
  • Reddit
  • Replit
  • Slideshare
  • SoundCloud
  • Speaker Deck
  • Spotify
  • StackBlitz
  • Stackery
  • Stack Exchange / Stack Overflow
  • Twitch
  • Twitter (Tweet or Timeline)
  • Vimeo
  • 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 post_slug %}
  • Podcast Episode: {% podcast URL %}
  • Organization: {% organization orgname %}
  • DEV Community Dev Post: {% forem URL %}

Card

You can create a standalone highlight card to emphasize important content. The content inside the card can use Markdown.

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

Call To Action (CTA)

Provide a link that a user will be redirected to when clicked. The description will contain the label/description for the call to action button.

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

Details / Spoiler / Collapsible

You can embed an interactive HTML element to hide content behind a summary. This is great for hiding text (i.e. answers to questions) behind a click.

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

KaTex

Place your mathematical expression within a KaTeX liquid block, as follows:

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

To render KaTeX inline add the "inline" option:

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

RunKit

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

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

Here's the Markdown cheatsheet again for reference.

Happy posting! 📝