\
> Assumption is the mother of all mistakes

*-Eugene Lewis Fordsworthe*

\
Hello folks 👋

I wanted to write an article about markdown to help educate our users that may have read about our new editor option we will be deploying very soon, but didn’t know what all the markdown fuss was about.  When I originally teased that we were working on a new editor that supported markdown, I just assumed everyone had heard of it by now!  Silly me, I should know better than to assume 😊.  So read on and familiarize yourself with the features of markdown, perhaps you will be an early adopters of the new editor!

\
 ![Users will now be presented with a choice of text editor when they create a New Draft.](https://cdn.hackernoon.com/images/6sWrtbrOmsOIbrWzrG88lYfV4ch1-1qcb3537.png)

\
# What is Markdown?

Markdown is a way to create formatted content using plain text.  It is a syntax, a set of rules which will interpret some special characters in text to format it as HTML.  You probably have seen it when people put asterisks around word to give them \*emphasis\**.*  Well, with markdown, the words surrounded in asterisks will actually get italicized. Similarly, a word with double asterisks like \*\*\*\*bold\*\*, for example, will become **bold.**

\
Another example that even more clear example of markdown syntax is the numbered list:


1. First item
2. Second item
3. Third item
4. Fourth item

   \

Very self explanatory, no?  You can just write “1.” and hit space and you’ll have made a numbered list.


---

An unordered list is pretty much what you expect too, just type “\*” or a “-” and hit space and how you’ll be editing

* a bullet item
* or two
* press enter twice now to escape from the list

\
Or maybe

* do this:
  * hit tab
    * and create a nested bulleted list
  * and shift+tab to go back up a level
* all the way back to the top

\
This is nice because it makes it very easy to write markdown.  You can use the most basic of text editors to write up something that can later be turned into a beautiful document.


---

If you type “>” and hit space, you will start a block quote:

\
> Don’t quote me on this, but this markdown stuff is very convenient!

\

---

You can use “#” hashmarks to create headings too.  Add more hash marks will create smaller heading types.  So a single # will make:

# This h1 header

and “##” will make

## A h2 header with smaller font

and ### will make

### an h3 header

and you guessed it, #### creates

#### an h4 header

And I know what you are thinking, how far can we push this?  Where does it stop?  Well, this is it.  End of the line, at least as far as headers go!  Don’t worry though, we’ve got some more tricks up our sleeves here.


---

How about these dividers here that I am using to separate each supported markdown feature?  Those are created by typing “---”.  As soon as the third dash is typed, a divider will appear, don’t even need to hit space after like you do for all these other elements.

\
Oddly enough, if you type “\*\*\*”, you will need to hit space to create a dashed Page Break.  I am not sure why you need both types, nor do I know why you need a space afterwards, but I may need to figure that one out and make a pull request back to their repo, but here’s what that looks like:


***

How about links?  Those are a bit more complicated and looks like:

\
`[text you can see](https://link-to-a-site.com)`

\
This will turn into:

\
[text you can see](https://link-to-a-site.com)

\
You may end up just using the ctrl/cmd + K shortcut to create links instead.

 ![The pop up for adding links looks like this ](https://cdn.hackernoon.com/images/6sWrtbrOmsOIbrWzrG88lYfV4ch1-gb1i035df.png)

Alternatively, you can highlight text in the editor and a pop up with a link icon on the far right will also turn text into clickable hyperlinks.

\

---

Images have a similar syntax. `![caption goes here](https://cdn.hackernoon.com/images/ckr-3-vyhp-000040-as-6-byan-6-x-08.jpg)`

It just has an exclamation mark (!) at the start.  The neat thing here though, is that the caption bit will show up in small italic font under the image.  It’ll also be set at the `alt` property on the `img` tag for better accessibility.  Currently, the image uploader modal is missing from this editor, so you’ll have to find your image URLs yourself, or you’ll have to have an image locally on your machine to insert.  This can be done by dragging and dropping the image right in to the editor.  Alternatively, using the auto complete commands  The list of all of elements you can add, including the ones we’ve just covered, as well as other ones that don’t have a markdown equivalent,


---

\
One special bit of syntax that is supported, but isn’t really markdown, is `==two equals signs==`

which will ==highlight the text in green.==  Fun! 🎈

\
# Conclusion

So that’s a quick list of the supported markdown in the new hacker noon editor, hopefully, you see how this will be a convenient way to format your stories, or import your markdown, written in the editor of your choice, into our editor.  Just copy and paste your markdown in and watch it transform into a well-formatted story before your eyes!

\
This also opens up the possibility of having an API which would take your markdown content and create or submit the draft without use of an editor, you’d just send plain text markdown over the wire.

\
\


If bugs were ghosts, he's our ghostbuster

Richard

OpenSea Collections

Support the EFF

VP of Engineering @ HackerNoon

Too Long; Didn't Read

Cassandra Forward a free Cassandra-focused community event

Markdown For What? or Why Do We Want Markdown In Our Text Editor?

Too Long; Didn't Read

@RichardJohnn

RELATED STORIES