DEV Community

loading...
Cover image for Dev.to Editor Kitchen Sink

Dev.to Editor Kitchen Sink

husniadil profile image Husni Adil Makmur Updated on ・6 min read

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>
Enter fullscreen mode Exit fullscreen mode

Renders:

Table Of Contents

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:

example image, with sloan

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
Enter fullscreen mode Exit fullscreen mode

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:

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

Renders:

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

Renders:

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

Renders:


DEV User Embed

Code: {% user thepracticaldev %}

Renders:

thepracticaldev image

DEV Tag Embed

Code: {% tag git %}

Renders:

#git


DEV Comment Embed

Code: {% comment 18nkn %}

Renders:

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:

play pause Syntax - Tasty Web Development Treats

DEV Listing Embed

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

Renders:

⚡️ Learn TypeScript this weekend - Free video course! ⚡️

I've made a full 16 part TypeScript course, and it's available for free on my YouTube channel!

  • ⏱ 2 hours long
  • 💭 Made for JavaScript developers wanting to learn TypeScript
  • 👍 Covers all the essentials!

I'll be posting more tutorials and guides to that channel, so subscribing helps a bunch. Enjoy!

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

Renders:

⚡️ Learn TypeScript this weekend - Free video course! ⚡️

I've made a full 16 part TypeScript course, and it's available for free on my YouTube channel!

  • ⏱ 2 hours long
  • 💭 Made for JavaScript developers wanting to learn TypeScript
  • 👍 Covers all the essentials!

I'll be posting more tutorials and guides to that channel, so subscribing helps a bunch. Enjoy!


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:


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:

GitHub logo forem / forem

For empowering community 🌱


Forem 🌱

For Empowering Community

ruby version rails version Travis Status for forem/forem Code Climate maintainability Code Climate technical debt CodeTriage badge Dependabot Badge GitPod badge Netlify badge GitHub code size in bytes GitHub commit activity GitHub issues ready for dev Honeybadger badge Knapsack Pro Parallel CI builds for dev.to

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 higher 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…

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

Renders:

GitHub logo 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

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:

What do you say?


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:


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 %}
Enter fullscreen mode Exit fullscreen mode

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 %}
Enter fullscreen mode Exit fullscreen mode

Renders:

c=±a2+b2 c = \pm\sqrt{a^2 + b^2}

Code:

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

Renders:

c=±a2+b2 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: Share Replit sandbox

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 %}
Enter fullscreen mode Exit fullscreen mode

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

3

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

Code: {% stackexchange 169988 diy %}

Renders:

Base for refrigerator wine shelf

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)…

Code: {% stackexchange 170185 diy %}

Renders:

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


Wikipedia Embed

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

Renders:

Wikipedia is a multilingual open-collaborative online encyclopedia created and maintained by a community of volunteer editors using a wiki-based editing system. It is one of the 15 most popular websites as ranked by Alexa, as of August 2020. Featuring no advertisements, it is hosted by the Wikimedia Foundation, an American non-profit organization funded primarily through donations.

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

Renders:

Several studies have shown that most of the 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">[121]</span> Because of this, universities throughout the United States tried to encourage females 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">[122]</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">[123]</span> Data has shown that Africans are underrepresented among Wikipedia editors.<span class="mw-reflink-text">[124]</span>


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

Discussion (0)

pic
Editor guide