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

  • DEV Community Comment
  • DEV Community Link
  • DEV Community Link
  • DEV Community Listing
  • DEV Community Organization
  • DEV Community Podcast Episode
  • DEV Community Tag
  • DEV Community User Profile
  • asciinema
  • CodePen
  • CodeSandbox
  • DotNetFiddle
  • GitHub Gist, Issue or Repository
  • Glitch
  • Instagram
  • JSFiddle
  • JSitor
  • Loom
  • Kotlin
  • Medium
  • Next Tech
  • Reddit
  • Replit
  • Slideshare
  • Speaker Deck
  • SoundCloud
  • Spotify
  • StackBlitz
  • Stackery
  • Stack Exchange or Stack Overflow
  • Twitch
  • Twitter
  • Twitter timeline
  • Wikipedia
  • Vimeo
  • YouTube

Call To Action (CTA)

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

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

Details

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

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