Markdown Support is Nigh

We’ve heard your requests for markdown support. We’ve heard that editing stories on mobile is futile. We are happy to say that work is underway to fix both of these problems in one fell swoop. Yes, these two birds will both be rocked using but a single rock. That rock is Outline’s open source markdown editor.

This post is a sneak peak and demonstration of some of the features that are available in the new editor. It’ll also mention the features that are currently missing in this editor.

Show me what you got.

To start, we’ve got the text formatting options of bold, italic, strikeout and code. Formatting options we all know and love. However, we’ve also got a new one: highlighting text in blue.

Pressing cmd+b and cmd+i will toggle bold and italics respectively and with all due respect.

Slash commands

Besides these keyboard shortcuts, there are slash commands that will add fancy elements to your story. An empty paragraph now has this placeholder:

Notices

You can type something like /info and a very striking section that looks like

There’s also scary red /warning

and fabulous purple /tip s

PROTIP:

Images have a spot for captions. A nice place for accreditation.

If you look under the image there, you will see you can add a caption. Our writers have asked about this feature for a while, mostly for the sake of accreditation.

Lists

We can also make ordered and unordered lists like

• this unordered list item

• and this one

There are also to-do lists:

• finish this write up

• publish it

• QA in production

• fix bugs

Not sure yet how these would be used. It’s interesting to think about articles being updated over time as the to-do list items are completed.

Code blocks

A welcome improvement to code blocks awaits!

const comment = `Code blocks are better now, 
  because you can change the text after creating it, 
  and even change the language(syntax highlighting) at any time.

  Readers will be greeted with a "Copy" button on mouse hover.`;

Tables

We’ve also had writers ask about tables. If wish to show data in a tabular format, /table will create this by default:

With hover over menus to help you insert and delete columns and rows.

Table of Natural Logarithms

Block quotes

Block quotes are pretty similar to what they were before.

If I could plant a flower for every time I miss you, I could walk through my garden forever

That’s heavy, doc…

Every act of creation is also an act of destruction

Heavy duty indeed. So the new editor was pretty easy to drop in, but it doesn’t replace the old editor. I am not sure if it ever will, either. For this new editor to completely supplant the old one, it’ll need to support all the old features. So which features are missing?

A lot of media embeds are not yet supported yet. The editor does offer support for embeds based on string matches, so we’ll be able to swap out URLs with embeds down the road. I tried first to get GitHub gists working again, but there was an error in the library. It seemed to want to access an iframe that wasn’t rendered yet, so that’s still a work in progress.

The image uploader is basically a file picker. Currently missing is the image upload modal with built-in search engines for a handful of stock image galleries. Instead we can drag images right in, or pick them from a file selection window. These will upload the image to our servers. Putting images in using markdown like

![Markdown for what?](https://cdn.hackernoon.com/images/markdown-for-what.jpeg)

basically hotlinks the image so that still needs to be sorted out. What I am imagining is an API for working with drafts. The API will scan for images that aren’t hosted by us and correct the issue, swapping out the image URLs with ours before publishing.

Beside the missing features that we’ll want to re-integrate into this editor, one of the remaining tasks to do is clean up the mobile experience of https://app.hackernoon.com/. We’d like this editor to work well on mobile devices. While this editor does work much better than the old one on my cell phone, it still isn’t sized correctly and it requires a lot of horizontal scrolling to see everything.

Reactions need to be added back onto the story’s paragraphs as well.

Still, I think this editor is an improvement. Being able to paste in markdown alone is a kill feature to have. I am confident we are moving in the right direction here using a text format for stories over JSON with very specific needs to work correctly.