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

Markdown

Bold & Italic

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>

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:

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:

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

Renders:

Details Embed

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

Renders:

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

Renders:

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

Renders:

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:

Glitch embed

Code: {% glitch earthy-course %}

Renders:

GitHub Repo Embed

Code: {% github forem/forem %}

Renders:

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

Renders:

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:

KaTeX Embed

Code:

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

Renders:

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:

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