A Beginners guide to the DEV editor
Tags: beginners, dev
Published: 2019-12-14 18:35:16

---
title: A Beginners guide to the DEV editor
published: true
description: A beginner in depth guide to the Dev.to editor  
tags: beginners, dev
---

> _As of 04<sup>th</sup> June 2020, this post is a <b>living document</b> and will be updated as the DEV UI changes_.

##__Introduction__

Welcome, __this post is a quick rundown__ of the [dev.to editor](https://dev.to/new) 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](https://daringfireball.net/projects/markdown/) in the section &ndash; [What is markdown](#what-is-markdown) and the example video embedded under the section [youtube videos](#youtube-videos) is a crash course on markdown by [Traversy Media](https://www.youtube.com/channel/UC29ju8bIPH5as8OGnQzwJyA).

This post is __by no means a comprehensive guide__ compared to the [official guide](https://dev.to/p/editor_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.

<hr>

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

###__Table of Contents__ <a name="toc"></a>

* [Editor versions](#editor-versions)
* [What is markdown](#what-is-markdown)
* [Common editor features in "rich + markdown" version](#richmarkdown)
    - [Inserting image in "rich + markdown" editor](#richmarkdown-insertimage)
    - [Inserting canonical url in "rich + markdown" editor](#richmarkdown-insercanonicalurl)
    - [Inserting series name in "rich + markdown" editor](#richmarkdown-insertseriesname)
* [Common editor features in "basic markdown" version](#basicmarkdown)
* [What you can insert in your post](#what-you-can-insert)
    - [Images](#insert-images)
    - [Links](#inserting-links)
    - [Bold text](#bold-text)
    - [Italicized text](#italicized-text)
    - [Tables](#tables)
    - [Code snippets](#code-snippets)
    - [Code embeds](#code-embeds)
    - [YouTube videos](#youtube-videos)
    - [Vimeo videos](#vimeo-videos)
    - [GitHub repository](#github-repo)
    - [DEV user embed](#dev-user-embed)
    - [DEV post embed](#dev-post-embed)
    - [Raw HTML](#raw-html)

[Back to table of contents](#toc)

<hr>

###__EDITOR VERSIONS <a name="editor-versions"></a>__
The editor is available in two versions which are:

* _basic markdown_ version
* _rich + markdown_ version 

Both serve the same purpose &mdash; _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](https://dev-to-uploads.s3.amazonaws.com/i/3gmwjajb67utwj0e9ex7.png)<figcaption>basic markdown version</figcaption>

![Dev.to rich + markdown version](https://dev-to-uploads.s3.amazonaws.com/i/aq7zoyqrbykh86zktfv8.png)<figcaption>rich + markdown version</figcaption>

You can switch between both editors from the [UX section](https://dev.to/settings/ux).

![Switching editors in dev.to](https://dev-to-uploads.s3.amazonaws.com/i/jlox5z7oee0l7fvhendi.png)

Both editor allow you to write your post in _Markdown_ but, _rich + markdown_ has some <abbr title="Graphical User Interface">GUI</abbr> 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](#toc)]

###__WHAT IS MARKDOWN <a name="what-is-markdown"></a>__

From the [Markdown specification](https://daringfireball.net/projects/markdown/):

> 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 <abbr title="Uniform Resource Locator">URL</abbr>
* 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" <a name="richmarkdown"></a>__

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](https://dev-to-uploads.s3.amazonaws.com/i/uc1pbd3h8mqqr8r1rnb3.png)

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](https://dev-to-uploads.s3.amazonaws.com/i/cvo9nhbuc3kjhssvpiju.png)

####__Inserting images in rich + markdown editor <a name="richmarkdown-insertimage"></a>__

Images can be uploaded on DEV for two purposes:

* Cover image
* Body images

<dl>
  <dt><b>Cover image</b></dt>
  <dd>Cover image will appear at the top of your post before the post title</dd>
  
  <dt><b>Body images</b></dt>
  <dd>Body images will be used in your post</dd>
</dl>

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](https://dev-to-uploads.s3.amazonaws.com/i/fjvjs26ly1tggr1d7seh.png)

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](https://dev-to-uploads.s3.amazonaws.com/i/ib3bo1ph9onzf2mfslg8.png)

__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](#inserting-images).

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

![Add cover image](https://dev-to-uploads.s3.amazonaws.com/i/2mj1ac9lwkjpow8gwml6.png)

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](https://dev-to-uploads.s3.amazonaws.com/i/m5j29kw0eode83fw59n9.png)

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 <a name="richmarkdown-insercanonicalurl"></a>__

The __canonical url__ is the <abbr title="Uniform Resource Locator">URL</abbr> 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](https://dev-to-uploads.s3.amazonaws.com/i/wog2s77u9n8bk81fti0h.JPG)

Type the _url_ and _click_ done.

####__Inserting a series name in "rich + markdown" editor <a name="richmarkdown-insertseriesname"></a>__

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](https://dev-to-uploads.s3.amazonaws.com/i/pp5vn83zctcurtfl71p8.JPG)

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](https://thepracticaldev.s3.amazonaws.com/i/wxccp596rujzyf91154l.PNG)

[[Back to table of contents](#toc)]

<hr>

###__HOW TO USE COMMON EDITOR FEATURES IN BASIC MARKDOWN VERSION <a name="basicmarkdown"></a>__

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](https://dev-to-uploads.s3.amazonaws.com/i/xeoz36tpdc958agh2dqf.png)

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](#richmarkdown).

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](https://dev-to-uploads.s3.amazonaws.com/i/g7u81j0r1ai4r9o3aqn8.JPG)

[[Back to table of contents](#toc)]

<hr>

###__WHAT YOU CAN INSERT IN YOUR POST <a name="what-you-can-insert"></a>__ 

###__Inserting images <a name="insert-images"></a>__

We've talked about how to insert images before in the section [inserting images](#richmarkdown-insertimage) under [common editor features for _rich + markdown_](#richmarkdown). This is a continuation of that discussion.

When you upload an image the image will be uploaded via <abbr title="Asynchronous JavaScript and XML">Ajax</abbr> 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](https://thepracticaldev.s3.amazonaws.com/i/kd1a9i5nnkt4nf325wqu.PNG)

[[Back to table of contents](#toc)]

<hr>

###__Inserting links <a name="inserting-links"></a>__

When you want a link in your post you will use a _pair of square brackets_ &ndash; `[]` and a _pair of round brackets_ &ndash; `()`.

The _square brackets_ will contain the _link text_ and the _round brackets_ will contain the <abbr title="Uniform Resource Locator">URL</abbr>

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](https://dev.to)

[[Back to table of contents](#toc)]

<hr>

###__Bold text <a name ="bold-text"></a>__
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:

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

[[Back to table of contents](#toc)]

<hr>

###__Italicized text <a name ="italicized-text"></a>__
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>i want this to be in italic format</i>

[[Back to table of contents](#toc)]

<hr>

###__Tables <a name ="tables"></a>__

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](#toc)]

<hr>

###__Code snippets <a name ="code-snippets"></a>__

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:

{% gist https://gist.github.com/achasveachas/dfffd2cef6c5c61f887a3b7e3cc94c3d file=gistfile1.md %}

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:

{% gist https://gist.github.com/achasveachas/dfffd2cef6c5c61f887a3b7e3cc94c3d file=gistfile2.md %}


The previous code snippet would be rendered as:

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

_Remember to replace JavaScript with your language of choice e.g <abbr title="Cascading Style Sheets">CSS</abbr>,  <abbr title="Hypertext Markup Language">HTML</abbr> , Python e.t.c_ 

[[Back to table of contents](#toc)]

<hr>

###__Code embeds <a name ="code-embeds"></a>__

Code from online code editors like [codepen](https://codepen.io), [codesandbox](https://codesandbox.io) or [jsfiddle](https://jsfiddle.net) 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:

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

For codesandbox, you'll write

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

_<b>Note</b>: The "staggered-animated-cards-with-vue-and-tailwindcss-okwst" above is the codesandbox id_.

And it would be rendered as:

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

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

[[Back to table of contents](#toc)]

<hr>

###__YouTube Videos <a name ="youtube-videos"></a>__

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:

{% youtube HUBNt18RFbo %}

[[Back to table of contents](#toc)]

<hr>

###__Vimeo videos <a name ="vimeo-videos"></a>__

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:

{% vimeo 33678526 %}

[[Back to table of contents](#toc)]

<hr>

###__GitHub repository <a name ="github-repo"></a>__

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 getify/You-Dont-Know-JS %}

[[Back to table of contents](#toc)]

<hr>

###__DEV User embed <a name ="dev-user-embed"></a>__

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:

{% user xtrp %}

[[Back to table of contents](#toc)]

<hr>

###__DEV post embed <a name ="dev-post-embed"></a>__

To embed a post, you will need the <abbr title="Uniform Resource Locator">URL</abbr> 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:

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

[[Back to table of contents](#toc)]

<hr>

###__Raw HTML <a name ="raw-html"></a>__

If you know enough HTML you can embed them in your post from [subscripts](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sub), [superscript](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sup) to [horizontal lines](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hr).

The following HTML is a [definition list](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl):

```html
<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](https://thepracticaldev.s3.amazonaws.com/i/4lolywlbyqg54k6am89e.PNG)

This would be rendered as:

<dl>
  <dt><b>Definition term</b></dt>
  <dd>Definition Description</dd>
  
  <dt><b>Definition term</b></dt>
  <dd>Definition Description</dd>
</dl>
 
[[Back to table of contents](#toc)]

<hr>

Credit to __Yechiel Kalmenson__ for the Github gist.

You can visit his profile below:

{% user yechielk %}