Dev.to Editor Kitchen Sink
Tags: sandbox, kitchensink, devto, markdown
Published: 2020-12-10 08:02:35

Learn More: [https://dev.to/p/editor_guide](https://dev.to/p/editor_guide)

## **Markdown**

### **Bold & Italic**

| Code | Renders |
|---|---|
| `**double asterisks** or __double underscores__` | **double asterisks** or __double underscores__ |
| `*asterisks* or _underscores_` | *asterisks* or _underscores_ |

---

### **Links**

| Code | Renders |
|---|---|
| `[I'm an inline link](https://dev.to)` | [I'm an inline link](https://dev.to) |
| `<a name="anchored">Anchored links</a>` | <a name="anchored">Anchored links</a> |

Code:

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

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

Renders:

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

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

---

### **Inline Images**

Code:

`![example image, with sloan](https://res.cloudinary.com/practicaldev/image/fetch/s--OsLaFSo9--/c_fill,f_auto,fl_progressive,h_220,q_auto,w_220/https://thepracticaldev.s3.amazonaws.com/uploads/user/profile_image/31047/af153cd6-9994-4a68-83f4-8ddf3e13f0bf.jpg)`

Renders:

![example image, with sloan](https://res.cloudinary.com/practicaldev/image/fetch/s--OsLaFSo9--/c_fill,f_auto,fl_progressive,h_220,q_auto,w_220/https://thepracticaldev.s3.amazonaws.com/uploads/user/profile_image/31047/af153cd6-9994-4a68-83f4-8ddf3e13f0bf.jpg)

Code:

`<figcaption> You can even add a caption using the HTML <code>figcaption</code> tag!</figcaption>`

Renders:

<figcaption> You can even add a caption using the HTML <code>figcaption</code> tag!</figcaption>

---

### **Headers**

Code:

```
# One '#' for a h1 header
## Two '#'s for a h2 header
### Three '#'s for a h3 header
#### Four '#'s for a h4 header
##### Five '#'s for a h5 header
###### Six '#'s for a h6 header
```

Renders:

# One '#' for a h1 header
## Two '#'s for a h2 header
### Three '#'s for a h3 header
#### Four '#'s for a h4 header
##### Five '#'s for a h5 header
###### Six '#'s for a h6 header

---

### **Author Notes/Comments**

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

Renders:

---

## **🌊 Liquid Tags**

### **DEV Article/Post Embed**

Code: `{% https://dev.to/thepracticaldev/welcome-thread-v103-4dap %}`

Renders: {% link https://dev.to/thepracticaldev/welcome-thread-v103-4dap %}

Code: `{% link thepracticaldev/welcome-thread-v103-4dap %}`

Renders: {% link thepracticaldev/welcome-thread-v103-4dap %}

Code: `{% post https://dev.to/thepracticaldev/welcome-thread-v103-4dap %}`

Renders: {% post https://dev.to/thepracticaldev/welcome-thread-v103-4dap %}

Code: `{% post thepracticaldev/welcome-thread-v103-4dap %}`

Renders: {% post thepracticaldev/welcome-thread-v103-4dap %}

---

### **DEV User Embed**

Code: `{% user thepracticaldev %}`

Renders: {% user thepracticaldev %}

---

### **DEV Tag Embed**

Code: `{% tag git %}`

Renders: {% tag git %}

---

### **DEV Comment Embed**

Code: `{% comment 18nkn %}`

Renders: {% comment 18nkn %}

---

### **DEV Podcast Episode Embed**

Code: `{% podcast https://dev.to/syntax/react-hooks %}`

Renders: {% podcast https://dev.to/syntax/react-hooks %}

---

### **DEV Listing Embed**

Code: `{% listing https://dev.to/listings/education/learn-typescript-this-weekend-free-video-course-258o %}`

Renders: {% listing https://dev.to/listings/education/learn-typescript-this-weekend-free-video-course-258o %}

Code: `{% listing education/learn-typescript-this-weekend-free-video-course-258o %}`

Renders: {% listing education/learn-typescript-this-weekend-free-video-course-258o %}

---

### **Details Embed**

Code: `{% details summary %} content {% enddetails %}`

Renders: {% details summary %} content {% enddetails %}

Code: `{% spoiler summary %} content {% endspoiler %}`

Renders: {% spoiler summary %} content {% endspoiler %}

Code: `{% collapsible summary %} content {% endcollapsible %}`

Renders: {% collapsible summary %} content {% endcollapsible %}

---

### **Twitter Embed**

Code: `{% twitter 834439977220112384 %}`

Renders: {% twitter 834439977220112384 %}

---

### **Twitter Timeline**

Code: `{% twitter_timeline https://twitter.com/NYTNow/timelines/576828964162965504 %}`

Renders: {% twitter_timeline https://twitter.com/NYTNow/timelines/576828964162965504 %}

---

### **Glitch embed**

Code: `{% glitch earthy-course %}`

Renders: {% glitch earthy-course %}

---

### **GitHub Repo Embed**

Code: `{% github forem/forem %}`

Renders: {% github forem/forem %}

Code: `{% github forem/forem no-readme %}`

Renders: {% github forem/forem no-readme %}

---

### **GitHub Issue, Pull request or Comment Embed**

Code: `{% github https://github.com/forem/forem/issues/9 %}`

Renders: {% github https://github.com/forem/forem/issues/9 %}

---

### **GitHub Gist Embed**

Code: `{% gist https://gist.github.com/CristinaSolana/1885435 %}`

Renders: {% gist https://gist.github.com/CristinaSolana/1885435 %}

Code: `{% gist https://gist.github.com/CristinaSolana/1885435 file=gistfile1.md %}`

Renders: {% gist https://gist.github.com/CristinaSolana/1885435 file=gistfile1.md %}

Code: `{% gist https://gist.github.com/suntong/3a31faf8129d3d7a380122d5a6d48ff6/f77d01e82defbf736ebf4879a812cf9c916a9252 %}`

Renders: {% gist https://gist.github.com/suntong/3a31faf8129d3d7a380122d5a6d48ff6/f77d01e82defbf736ebf4879a812cf9c916a9252 %}

Code: `{% gist https://gist.github.com/suntong/3a31faf8129d3d7a380122d5a6d48ff6/f77d01e82defbf736ebf4879a812cf9c916a9252 file=Images.tmpl %}`

Renders: {% gist https://gist.github.com/suntong/3a31faf8129d3d7a380122d5a6d48ff6/f77d01e82defbf736ebf4879a812cf9c916a9252 file=Images.tmpl %}

---

### **GitPitch Embed**

Code: `{% gitpitch https://gitpitch.com/gitpitch/in-60-seconds %}`

Renders: {% gitpitch https://gitpitch.com/gitpitch/in-60-seconds %}

---

### **Video Embed**

Code: `{% youtube dQw4w9WgXcQ %}`

Renders: {% youtube dQw4w9WgXcQ %}

Code: `{% vimeo 193110695 %}`

Renders: {% vimeo 193110695 %}

Code: `{% twitch ClumsyPrettiestOilLitFam %}`

Renders: {% twitch ClumsyPrettiestOilLitFam %}

---

### **Medium Embed**

Code: `{% 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 %}`

Renders: {% 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**

Code: `{% slideshare d5rGkEgXFDRN17 %}`

Renders: {% slideshare d5rGkEgXFDRN17 %}

---

### **CodePen Embed**

Code: `{% codepen https://codepen.io/twhite96/pen/XKqrJX %}`
`default-tab`

Renders {% codepen https://codepen.io/twhite96/pen/XKqrJX %}`
`default-tab

Code: `{% codepen https://codepen.io/twhite96/pen/XKqrJX default-tab=js,result %}`

Renders: {% codepen https://codepen.io/twhite96/pen/XKqrJX default-tab=js,result %}

---

### **Kotlin Playground**

Code: `{% kotlin https://pl.kotl.in/owreUFFUG?theme=darcula&from=3&to=6&readOnly=true %}`

Renders: {% kotlin https://pl.kotl.in/owreUFFUG?theme=darcula&from=3&to=6&readOnly=true %}

---

### **RunKit Embed**

Code:

```
{% runkit
// hidden setup JavaScript code goes in this preamble area
const hiddenVar = 42
%}
// visible, reader-editable JavaScript code goes here
console.log(hiddenVar)
{% endrunkit %}
```

Renders:

{% runkit
// hidden setup JavaScript code goes in this preamble area
const hiddenVar = 42
%}
// visible, reader-editable JavaScript code goes here
console.log(hiddenVar)
{% endrunkit %}

---

### **KaTeX Embed**

Code:

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

Renders:

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

Code:

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

Renders:

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

---

### **Stackblitz Embed**

Code: `{% stackblitz ball-demo %}`

Renders: {% stackblitz ball-demo %}

Code: `{% stackblitz ball-demo view=preview %}`

Renders: {% stackblitz ball-demo view=preview %}

Code: `{% stackblitz ball-demo file=style.css %}`

Renders: {% stackblitz ball-demo file=style.css %}

---

### **CodeSandbox Embed**

Code: `{% codesandbox ppxnl191zx %}`

Renders: {% codesandbox ppxnl191zx %}

Code: `{% codesandbox ppxnl191zx initialpath=/initial/load/path %}`

Renders: {% codesandbox ppxnl191zx initialpath=/initial/load/path %}

Code: `{% codesandbox ppxnl191zx module=/path/to/module %}`

Renders: {% codesandbox ppxnl191zx module=/path/to/module %}

Code: `{% codesandbox ppxnl191zx runonclick=1 %}`

Renders: {% codesandbox ppxnl191zx runonclick=1 %}

---

### **JSFiddle Embed**

Code: `{% jsfiddle https://jsfiddle.net/link2twenty/v2kx9jcd %}`

Renders: {% jsfiddle https://jsfiddle.net/link2twenty/v2kx9jcd %}

Code: `{% jsfiddle https://jsfiddle.net/webdevem/Q8KVC result,html,css %}`

Renders: {% jsfiddle https://jsfiddle.net/webdevem/Q8KVC result,html,css %}

---

### **JSitor Liquid Tag**

Code: `{% jsitor https://jsitor.com/embed/B7FQ5tHbY %}`

Renders: {% jsitor https://jsitor.com/embed/B7FQ5tHbY %}

Code: `{% jsitor https://jsitor.com/embed/B7FQ5tHbY?html&js&css&result&light %}`

Renders: {% jsitor https://jsitor.com/embed/B7FQ5tHbY?html&js&css&result&light %}

Code: `{% jsitor B7FQ5tHbY %}`

Renders: {% jsitor B7FQ5tHbY %} 

Code: `{% jsitor B7FQ5tHbY?html&js&css&result&light %}`

Renders: {% jsitor B7FQ5tHbY?html&js&css&result&light %}

---

### **repl.it Embed**

Code: `{% replit @WigWog/PositiveFineOpensource %}`

Renders: {% replit @WigWog/PositiveFineOpensource %}

---

### **Stackery Embed**

Code: `{% stackery deeheber lambda-layer-example master %}`

Renders: {% stackery deeheber lambda-layer-example master %}

---

### **Next Tech Embed**

Renders: ![Share Replit sandbox](https://thepracticaldev.s3.amazonaws.com/i/r449xp8cay3383i139qv.png)

Code: `{% nexttech https://nt.dev/s/6ba1fffbd09e %}`

Renders: {% nexttech https://nt.dev/s/6ba1fffbd09e %}

### **Instagram Embed**

Code: `{% instagram BXgGcAUjM39 %}`

Renders: {% instagram BXgGcAUjM39 %}

---

### **Speakerdeck Tag**

Code:

```
# Given this embed link:
<script async class="speakerdeck-embed"
    data-id="7e9f8c0fa0c949bd8025457181913fd0"
    data-ratio="1.77777777777778" src="//speakerdeck.com/assets/embed.js"></script>
{% speakerdeck 7e9f8c0fa0c949bd8025457181913fd0 %}
```

Renders:

<script async class="speakerdeck-embed"
    data-id="7e9f8c0fa0c949bd8025457181913fd0"
    data-ratio="1.77777777777778" src="//speakerdeck.com/assets/embed.js"></script>
{% speakerdeck 7e9f8c0fa0c949bd8025457181913fd0 %}

---

### **Soundcloud Embed**

Code: `{% soundcloud https://soundcloud.com/jabs-badut/iwan-fals-kesaksian %}`

Renders: {% soundcloud https://soundcloud.com/jabs-badut/iwan-fals-kesaksian %}

---

### **Spotify Embed**

Code: `{% spotify spotify:album:4RuzGKLG99XctuBMBkFFOC %}`

Renders: {% spotify spotify:album:4RuzGKLG99XctuBMBkFFOC %}

---

### **Blogcast Tag**

Code: `{% blogcast 1234 %}`

Renders: {% blogcast 1234 %}

---

### **Parler Tag**

Code: `{% parler https://www.parler.io/audio/73240183203/ab59b90c45cd1f2144291f1a1cfd69894f87aabf.e466ec75-50e8-47c9-b376-55122f2e3a08.mp3 %}`

Renders: {% parler https://www.parler.io/audio/73240183203/ab59b90c45cd1f2144291f1a1cfd69894f87aabf.e466ec75-50e8-47c9-b376-55122f2e3a08.mp3 %}

---

### **Stack Exchange / Stack Overflow Tag**

Code: `{% stackoverflow 24789130 %}`

Renders: {% stackoverflow 24789130 %}

Code: `{% stackexchange 169988 diy %}`

Renders: {% stackexchange 169988 diy %}

Code: `{% stackexchange 170185 diy %}`

Renders: {% stackexchange 170185 diy %}

---

### **Wikipedia Embed**

Code: `{% wikipedia https://en.wikipedia.org/wiki/Wikipedia %}`

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

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

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

---

### **Asciinema Embed**

Code: `{% asciinema 239367 %}`

Renders: {% asciinema 239367 %}

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

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

---

### **Reddit Tag**

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

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

Learn More: [https://dev.to/p/editor_guide](https://dev.to/p/editor_guide)