Dev.to Editor Kitchen Sink

Learn More: 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
<a name="anchored">Anchored links</a>	Anchored links

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 2

Chapter 1

---

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:

Code:

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

Renders:

You can even add a caption using the HTML figcaption tag!

---

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:

Welcome Thread - v103

dev.to staff ・ Dec 9 '20 ・ 1 min read

#welcome

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

Renders:

Welcome Thread - v103

dev.to staff ・ Dec 9 '20 ・ 1 min read

#welcome

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

Renders:

Welcome Thread - v103

dev.to staff ・ Dec 9 '20 ・ 1 min read

#welcome

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

Renders:

Welcome Thread - v103

dev.to staff ・ Dec 9 '20 ・ 1 min read

#welcome

---

DEV User Embed

Code: {% user thepracticaldev %}

Renders:

dev.to staffFollow

The hardworking team behind dev.to ❤️

---

DEV Tag Embed

Code: {% tag git %}

Renders:

#git Follow

Software for tracking changes in any set of files, usually used for coordinating work among programmers collaboratively developing source code during software development.

---

DEV Comment Embed

Code: {% comment 18nkn %}

Renders:

Husni Adil Makmur • Dec 6 '20

I didn't know that this is a community powered site until I saw the Sign Up button and registered.

---

DEV Podcast Episode Embed

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

Renders:

React Hooks

Syntax - Tasty Web Development Treats

1x initializing... ×

---

DEV Listing Embed

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

Renders:

This listing has expired.

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

Renders:

This listing has expired.

---

Details Embed

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

Renders:

summary

content

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

Renders:

summary

content

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

Renders:

summary

content

---

Twitter Embed

Code: {% twitter 834439977220112384 %}

Renders:

The Practical Dev

@thepracticaldev

‌‌ 
As promised— FREE STICKERS FOR ALL

dev.to/freestickers
‌‌

16:29 PM - 22 Feb 2017

---

Twitter Timeline

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

Renders:

View on Twitter

---

Glitch embed

Code: {% glitch earthy-course %}

Renders:

---

GitHub Repo Embed

Code: {% github forem/forem %}

Renders:

forem / forem

For empowering community 🌱

Forem 🌱

For Empowering Community

Welcome to the Forem codebase, the platform that powers dev.to. We are so excited to have you. With your help, we can build out Forem’s usability, scalability, and stability to better serve our communities.

What is Forem?

Forem is open source software for building communities. Communities for your peers, customers, fanbases, families, friends, and any other time and space where people need to come together to be part of a collective See our announcement post for a high-level overview of what Forem is.

dev.to (or just DEV) is hosted by Forem. It is a community of software developers who write articles, take part in discussions, and build their professional profiles. We value supportive and constructive dialogue in the pursuit of great code and career growth for all members. The ecosystem spans from beginner to advanced developers, and all are welcome to find their place…

View on GitHub

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

Renders:

forem / forem

For empowering community 🌱

---

GitHub Issue, Pull request or Comment Embed

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

Renders:

Interactive code snippets #9

viebel posted on Dec 15, 2016

Dev.to looks awesome. Congrats!

I was thinking of an integration of the klipse plugin into dev.to to allow blog writers to have interactive code snippets in javascript, ruby, python, scheme or ocaml.

And write cool blog posts like:

• http://blog.jrheard.com/procedural-dungeon-generation-drunkards-walk-in-clojurescript
• http://exupero.org/hazard/post/islands/
• http://untangled.io/immutable-js-an-introduction-with-examples-written-for-humans/

What do you say?

View on GitHub

---

GitHub Gist Embed

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

Renders:

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

Renders:

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

Renders:

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

Renders:

---

GitPitch Embed

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

Renders:

---

Video Embed

Code: {% youtube dQw4w9WgXcQ %}

Renders:

Code: {% vimeo 193110695 %}

Renders:

Code: {% twitch ClumsyPrettiestOilLitFam %}

Renders:

---

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:

How Can I Drink Bubble Tea Without Finishing the Tea Before the Bobas? | by Krist Wongsuphasawat | Medium

Krist Wongsuphasawat ・ Oct 16, 2018 ・

Medium

---

SlideShare Embed

Code: {% slideshare d5rGkEgXFDRN17 %}

Renders:

---

CodePen Embed

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

Renders
default-tab

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

Renders:

---

Kotlin Playground

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

Renders:

---

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:

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

---

KaTeX Embed

Code:

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

Renders:

$$c = \pm\sqrt{a^2 + b^2}$$

Code:

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

Renders:

$c = \pm\sqrt{a^2 + b^2}$

---

Stackblitz Embed

Code: {% stackblitz ball-demo %}

Renders:

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

Renders:

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

Renders:

---

CodeSandbox Embed

Code: {% codesandbox ppxnl191zx %}

Renders:

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

Renders:

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

Renders:

Code: {% codesandbox ppxnl191zx runonclick=1 %}

Renders:

---

JSFiddle Embed

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

Renders:

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

Renders:

---

JSitor Liquid Tag

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

Renders:

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

Renders:

Code: {% jsitor B7FQ5tHbY %}

Renders:

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

Renders:

---

repl.it Embed

Code: {% replit @WigWog/PositiveFineOpensource %}

Renders:

---

Stackery Embed

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

Renders:

---

Next Tech Embed

Renders:

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

Renders:

Instagram Embed

Code: {% instagram BXgGcAUjM39 %}

Renders:

---

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:

---

Soundcloud Embed

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

Renders:

---

Spotify Embed

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

Renders:

---

Blogcast Tag

Code: {% blogcast 1234 %}

Renders:

---

Parler Tag

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

Renders:

---

Stack Exchange / Stack Overflow Tag

Code: {% stackoverflow 24789130 %}

Renders:

Colors in irb / rails console

Jul 16 '14 Comments: 1 Answers: 1

4

I'm testing a gem that outputs color in the terminal:

module Color
    def self.colorize(text, color_code)
        "#{color_code}#{text}e[0m"
    end

    def self.red(text)
        self.colorize(text, "\033[1;31;12m")
    end
end

I have a testing file in the same directory, called color_test.rb:

require_relative 'color.rb'

puts Color.red('I should be red')

This results in the following:

$ ruby color_test.rb
I

…

Open Full Question

Code: {% stackexchange 169988 diy %}

Renders:

Base for refrigerator wine shelf

Jul 27 '19 Comments: 2 Answers: 3

1

I have a wine refrigerator that has shelves for wine bottles - image on this question.

I want to use this refrigerator and its shelves as a regular refrigerator. So I need to put something on the shelf to make it flat so it can hold anything. The inner (usable)…

Open Full Question

Code: {% stackexchange 170185 diy %}

Renders:

answer re: Base for refrigerator wine shelf

Jul 30 '19

1

What about an aluminum baking sheet pan? They come in sizes VERY close to what you want and are easily cleaned.

Example of a close size: https://www.amazon.com/Winware-ALXP-1622-16-Inch-22-Inch-Aluminum/dp/B001CIEJQU

Open Full Answer

---

Wikipedia Embed

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

Renders:

Wikipedia

Wikipedia is a multilingual free online encyclopedia written and maintained by a community of volunteers through open collaboration and a wiki-based editing system. Individual contributors, also called editors, are known as Wikipedians. Wikipedia is the largest and most-read reference work in history. It is consistently one of the 15 most popular websites ranked by Alexa; as of 2022, Wikipedia was ranked the 10th most popular site. It is hosted by the Wikimedia Foundation, an American non-profit organization funded mainly through donations.

View on Wikipedia

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

Renders:

Wikipedia - Diversity

Several studies have shown that most Wikipedia contributors are male. Notably, the results of a Wikimedia Foundation survey in 2008 showed that only 13 percent of Wikipedia editors were female.<span class="mw-reflink-text">[134]</span> Because of this, universities throughout the United States tried to encourage women to become Wikipedia contributors. Similarly, many of these universities, including Yale and Brown, gave college credit to students who create or edit an article relating to women in science or technology.<span class="mw-reflink-text">[135]</span> Andrew Lih, a professor and scientist, wrote in The New York Times that the reason he thought the number of male contributors outnumbered the number of females so greatly was because identifying as a woman may expose oneself to "ugly, intimidating behavior".<span class="mw-reflink-text">[136]</span> Data has shown that Africans are underrepresented among Wikipedia editors.<span class="mw-reflink-text">[137]</span>

View on Wikipedia

---

Asciinema Embed

Code: {% asciinema 239367 %}

Renders:

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

Renders:

---

Reddit Tag

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

Renders:

I've waited 28 years to finally havr my first pet. Everyone, meet Mycroft.

Jan 15 '19 Author: Miaogua007

See Full Post

Learn More: https://dev.to/p/editor_guide