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

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

Read on Terminal Reader
react to story with heart
react to story with light
react to story with boat
react to story with money
image
RichardJohnn HackerNoon profile picture

@RichardJohnn
RichardJohnn

VP of Engineering at HackerNoon

twitter social icongithub social icon


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.

Users will now be presented with a choice of text editor when they create a New Draft.


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


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

The pop up for adding links looks like this

The pop up for adding links looks like this

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.



react to story with heart
react to story with light
react to story with boat
react to story with money

Related Stories

L O A D I N G
. . . comments & more!