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
![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
🌊 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
- 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
- JSFiddle
- JSitor
- Loom
- Kotlin
- Medium
- Next Tech
- Replit
- Slideshare
- Speaker Deck
- SoundCloud
- Spotify
- StackBlitz
- Stackery
- Stack Exchange or Stack Overflow
- Twitch
- Twitter timeline
- Wikipedia
- Vimeo
- YouTube
Supported Non-URL Embeds
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`` %}`