loading...

A Beginners guide to the DEV editor

ziizium profile image Habdul Hazeez Updated on ・11 min read

As of 04th June 2020, this post is a living document and will be updated as the DEV UI changes.

Introduction

Welcome, this post is a quick rundown of the dev.to editor and how to make the most of it.

The target audience of this post are beginners on DEV who would like to write a post but need help finding their way around the editor.

This post also serve as an introduction to Markdown in the section – What is markdown and the example video embedded under the section youtube videos is a crash course on markdown by Traversy Media.

This post is by no means a comprehensive guide compared to the official guide , but it covers stuff you'll use/need most often.

And if you take note you will realize there are some features used in this post but not discussed. Examples include Table of contents and in page navigation.

Let's begin.


This guide could serve as a reference therefore a table of contents is necessary.

Table of Contents

Back to table of contents


EDITOR VERSIONS

The editor is available in two versions which are:

  • basic markdown version
  • rich + markdown version

Both serve the same purpose — publishing a post but, they have one major difference which is:

  • The User Interface (UI)

The user interface determines how you use and interact with the editor and of course how you publish your posts.

Take a look at the following images:

Dev.to basic markdown version
basic markdown version

Dev.to rich + markdown version
rich + markdown version

You can switch between both editors from the UX section.

Switching editors in dev.to

Both editor allow you to write your post in Markdown but, rich + markdown has some GUI components.

After reading that last paragraph the question that might come to your mind is: What is Markdown? Let's talk about that.

[Back to table of contents]

WHAT IS MARKDOWN

From the Markdown specification:

Markdown is a text-to-HTML conversion tool for web writers. Markdown allows you to write using an easy-to-read, easy-to-write plain text format, then convert it to structurally valid XHTML (or HTML).

Markdown allow you to wrap specific characters around text and the parser will render it in standard HTML. We'll discuss this in depth in this post, but for now let's talk about the features that's common in both editors.

The following features are available in the editors but, how to use them differs:

  • Post title
  • Tags
  • Inserting images
  • Cover image
  • Canonical URL
  • Series name

To make things simple and easier to follow let's discuss how to use these features in the rich + markdown verson then we'll proceed to the basic markdown version.

HOW TO USE COMMON EDITOR FEATURES IN "RICH + MARKDOWN"

The post title is the title of your post and you'll write it in the big input at the top of the editor.

Post Title in rich + markdown version of the editor

The tags are keywords associated with your post. Inserting tags is quiet easy as depicted in the following image.

Post tags rich + markdown version of the editor

Inserting images in rich + markdown editor

Images can be uploaded on DEV for two purposes:

  • Cover image
  • Body images
Cover image
Cover image will appear at the top of your post before the post title
Body images
Body images will be used in your post

Inserting an image is quiet straight forward, all you have to do is click the Upload image icon at the top left corner of the editor.

Inserting images in rich + markdown version of the editor

Wait for the upload to complete and a Mardown image format will appear beside the Upload image icon.

Marckdown image url in dev.to editor

Copy the Markdown Images and insert in your post.

We will talk more in depth about Markdown Images and Direct URLS in the section inserting images.

If you would like to upload a cover image click on the Add cover image button.

Add cover image

When the upload is complete image will appear before the title input in the editor.

A cover image inserted in rich + markdown version of the editor

You can remove the cover image by clicking the image icon and clicking the Remove button besid the Change button.

Inserting a canonical URL in "rich + markdown" editor

The canonical url is the URL of the post if the post has been published elsewhere on the internet.

To insert a canonical url click the icon beside the Save Draft button. The following image will appear and the first form input is an option to insert a canonical url.

Inserting a canonical url in "rich + markdown" version of the editor

Type the url and click done.

Inserting a series name in "rich + markdown" editor

The series name is the name given to related articles.

The series name should be included in the first article in the series then subsequent articles can be added to the series.

The series name is the second form option in the previous image. Here is it again.

Adding series name

When the post is published a box similar to the one below will appear before the first and last paragraph of each post in the series.

Series in dev.to

[Back to table of contents]


HOW TO USE COMMON EDITOR FEATURES IN BASIC MARKDOWN VERSION

The common features mentioned (with the exception of inserting images) are attached to a post in a format called Front Matter . This is depicted in the image below:

Common features in basic markdown version

To insert an image in the basic markdown version of the editor follow the same step as outlined under Common editor features in "rich + markdown" version.

To upload a cover image copy the Direct URL from the Markdown format of the image. An example of direct url is given below:

https://dev-to-uploads.s3.amazonaws.com/i/xeoz36tpdc958agh2dqf.png

After the image upload and add it to the Front Matter as depicted in the image below.

Cover image added to the front matter

[Back to table of contents]


WHAT YOU CAN INSERT IN YOUR POST

Inserting images

We've talked about how to insert images before in the section inserting images under common editor features for rich + markdown. This is a continuation of that discussion.

When you upload an image the image will be uploaded via Ajax request and if the size of the file is large this might take a while.

Upon completion of the upload a Markdown link will appear in the following format:

![Alt text](https://thepracticaldev.s3.amazonaws.com/i/0q8ewwsa7psjma2sqw18.png)

You can turn the Markdown link into a direct link by deleting the sorrounding charcaters around the link until you are left with something in the following format:

https://thepracticaldev.s3.amazonaws.com/i/0q8ewwsa7psjma2sqw18.png

The direct links is mostly used for inserting cover images while Markdown links will be inserted into your post.

Please ensure you provide an alt text for the image for accessibility reasons.

![This is an alt text](https://thepracticaldev.s3.amazonaws.com/i/0q8ewwsa7psjma2sqw18.png)

If you want to get nerdy you can check the Network Request tab in the Developer Tools during the file upload.

File upload via XHR request shown in Firefox Developer Tools

[Back to table of contents]


Inserting links

When you want a link in your post you will use a pair of square brackets[] and a pair of round brackets().

The square brackets will contain the link text and the round brackets will contain the URL

The format is:
[Dev.to](https://dev.to)

The parser will render it as:
<a href="https://dev.to">Dev.to</a>

The output in the browser will be:

Dev.to

[Back to table of contents]


Bold text

Bold text can be used to draw a readers attention to a particular section of text.

In markdown you add double underscores as a prefix and suffix and the text will be rendered in bold.

The format is:
__i want to bold this__

The parser will render it as:

<strong>i want to bold this</strong>

The output in the browser will be:

i want to bold this

[Back to table of contents]


Italicized text

Text in italic format can also be used to draw a users attention to a particular text.

In markdown you add a single underscore as a prefix and suffix and the text will be rendered in italic format.

The format is:
_i want this to be in italic format_

The parser will render it as:
<em>i want this to be in italic format</em>

The output in the browser will be:

i want this to be in italic format

[Back to table of contents]


Tables

HTML tables are quiet tricky to insert in your post and words can not do justice in explaining how to go about them. Its best if we see a code example.

| column 1 | column 2 | column 3 |
| --------- |:---------:| -------:|
| some data | some data | some data |
| some data | some data | some data |
| some data | some data | some data |

This would be rendered as:

column 1 column 2 column 3
some data some data some data
some data some data some data
some data some data some data

[Back to table of contents]


Code snippets

Code snippets can be included in your post if a particular technical explanation requires it.

Code snippets on DEV are displayed in a dedicated division on the page on a black background and if you specify the language of the code, it will be displayed with the appropriate syntax highlighting.

A minimum of three requirement is required if you want your code snippet rendered in a dedicated division of the page. They are:

  • Three back-ticks ( ```) as prefix
  • The code snippet(s)
  • Three back-ticks (``` ) as suffix

In markdown this would be:

An example code would be rendered as:

function helloWorld() {
  console.log("hello world ");
}

But, if you want syntax highlighting for the code you'll have to include the language before the code snippet(s).

In markdown:

The previous code snippet would be rendered as:

function helloWorld() {
  console.log("hello world ");
}

Remember to replace JavaScript with your language of choice e.g CSS, HTML , Python e.t.c

[Back to table of contents]


Code embeds

Code from online code editors like codepen, codesandbox or jsfiddle can be embedded in you post.

To embed a post you'll need something called a Liquid tag.

The Liquid tag format is:

{% <online code editor> <url|embed_id> %}

For example to insert a code embed from codepen, you'll have to write this:

{% codepen https://codepen.io/alvaromontoro/pen/JxMPqa %}

And it would be rendered as:

For codesandbox, you'll write

{% codesandbox staggered-animated-cards-with-vue-and-tailwindcss-okwst %}

Note: The "staggered-animated-cards-with-vue-and-tailwindcss-okwst" above is the codesandbox id.

And it would be rendered as:

For other online editors, remember to replace codepen, or jsfiddle with the editor name and embed id respectively.

[Back to table of contents]


YouTube Videos

Its an open secret that youtube is the most used video platform.

Youtube videos can be included in your post by using the video id along with liquid tags.

The format is:
{% youtube <video id> %}

The full liquid tag would be:

{% youtube HUBNt18RFbo %}

This is would be rendered as:

[Back to table of contents]


Vimeo videos

The procedure is similiar to youtube videos, all you need is the video id.

The format is:

{% vimeo <video id> %}

The full liquid tag would be:

{% vimeo 33678526 %}

This would be rendered as:

[Back to table of contents]


GitHub repository

To insert a github repository all you need is the username of the repo author and the repository name with liquid tags.

The format:
{% github <repo name> %}

The full liquid tag would be:

{% github getify/You-Dont-Know-JS %}

This would be rendered as:

GitHub logo getify / You-Dont-Know-JS

A book series on JavaScript. @YDKJS on twitter.

You Don't Know JS Yet (book series) - 2nd Edition

This is a series of books diving deep into the core mechanisms of the JavaScript language. This is the second edition of the book series:

     ...

To read more about the motivations and perspective behind this book series, check out the Preface.

If you're looking for the previous first edition books, they can be found here.

Premier Sponsor

This edition of the YDKJS book series is exclusively sponsored by Frontend Masters.

Frontend Masters is the gold standard for top-of-the-line expert training material in frontend-oriented software development. With over 150 courses on all things frontend, this should be your first and only stop for quality video training on HTML, CSS, JS, and related technologies.


I teach all my workshops exclusively through Frontend Masters. If you like this book content, please check out my video training courses.

I want…

[Back to table of contents]


DEV User embed

To embed a user profile, all you need is the username.

The format:

{% user <username> %}

The full liquid tag would be:

{% user xtrp %}

This would be rendered as:

xtrp image

[Back to table of contents]


DEV post embed

To embed a post, you will need the URL of the post and a liquid tag.

The format is:

{% link <url here> %}

The full liquid tag would be:

{% link https://dev.to/lydiahallie/javascript-visualized-the-javascript-engine-4cdf %}

This would be rendered as:

[Back to table of contents]


Raw HTML

If you know enough HTML you can embed them in your post from subscripts, superscript to horizontal lines.

The following HTML is a definition list:

<dl>
  <dt><b>Definition term</b></dt>
  <dd>Definition Description</dd>

  <dt><b>Definition term</b></dt>
  <dd>Definition Description</dd>
</dl>

This code can be included directly in the body of the editor as depicted in the image below.

Raw HTML embed in dev.to.editor

This would be rendered as:

Definition term
Definition Description
Definition term
Definition Description

[Back to table of contents]


Credit to Yechiel Kalmenson for the Github gist.

You can visit his profile below:

Posted on by:

ziizium profile

Habdul Hazeez

@ziizium

I teach and write code with interests in Web Development, Computer Security, and Artificial Intelligence.

Discussion

pic
Editor guide
 

Great post, learned quite a few DEV editor features I had not heard of before! Thanks so much for featuring me in your explanation of DEV user embed within the editor :).

One editor feature I'm personally really looking forward to trying out (when it is properly released) is DEV polls.

Thanks again for featuring me, and great post!

— Gabriel

 

Thanks again for featuring me, and great post!

Thanks, and you are welcome.

 

Polls would be an awesome addition

 

Very easy to follow guide on how to customize dev post. When I first started posting I just wanted to get my post out there and I was not aware of all the cool things that can be done with this editor until I saw other people post but I was not sure what they did to get that result. Now I understand and will use the editor to the fullest. Thanks again!!

 

You are welcome.

 

nice article for newbies on dev.thanks for the content.

 

How to add a video (present on your computer) in your post on Dev.to ?
Please reply as soon as possible.

 

I have not tried that before, I'll advise that upload to a video platform that DEV supports like Youtube or Vimeo then you can embed it in your post.

DEV allow you to upload video, like I said earlier I have not used or tried this feature before. Here is the process:

  • Navigate to your dashboard and click Upload Video button:
    DEV upload video button

  • This will bring up another interface that will allow you to select and upload a video from your computer
    DEV upload video interface

Then how can you embed it in your post? I don't know, but I'll find out.

 

Thanks, I have uploaded the video according to the aforementioned steps. Waiting for the further steps on adding the video to a post. Thank you!

 

Why do feel like this is better than the dev documentation. Thanks a million! 💯

 

You are welcome.

 
 

😄 , Nice. How to embed GIF images ?

 

Based on the official editor guide, you embed a GIF image it just like a regular image:

![Alt text of image](put-link-to-image-here)

Mind the following from the docs about GIF images:

When adding GIFs to posts and comments, please note that there is a limit of 200 megapixels per frame/page.