App Showdown #4: 4 Online Markdown Editors

Most of the time, I write my drafts (as Markdown files) on the desktop. Typing on a full-sized keyboard is more convenient, and WordPress, both the website and the Android app, can be slow and cumbersome sometimes.)

But there are times when I don’t have my laptop with me and only have access to my school’s public computer. Although Markdown files can be edited by any text editor, it’s always better to use a dedicated one. Fortunately, there are a lot of online Markdown editors out there; to simplify the comparison, I’ve decided to remove editors that:

  1. Don’t have Import/Export function (some editors only support copy-and-paste).
  2. Don’t follow an existing bullet/numbered list (writing on them feels as if I’m writing on a plain-text editor instead of a dedicated editor).
  3. Don’t show the HTML preview.

Although my drafts are stored on Dropbox, I don’t think that Dropbox/online storage integration is a must. Keyboard shortcuts can be practical, but I can live without it.


To test the editors, I’m going to replicate this simple document:

# Markdown Editor Testing
------

**Hello** *World*!

- One
- Two
- Three

[Shameless self-promotion](https://nochkawtf.wordpress.com) 

1. A
2. B
3. C


## Table Here

| Fruit  | Vegetable | School Subject |
| ------ | --------- | -------------- |
| Cherry | Carrot    | Civics         |

`I forgot how to write in HTML, so I have to use Markdown`

Dillinger

(I wonder if they named this app after John Dillinger the gangster or Ed Dillinger the antagonist of Tron.)

There’s nothing remarkable about the interface; it has the usual editor pane and preview pane, some menus on top, and a hamburger menu on top left corner. The hamburger menu lets you create a new document, switch between files, and link Dillinger to your online storage accounts. There’s a word count on top right corner.

Dillinger supports Dropbox, Github, Medium, Google Drive, and OneDrive. If you save a Dillinger-made document on Dropbox, it would appear on ./Dillinger.

Dillinger can preview and export documents to Markdown, HTML (source/styled), and PDF. The results looks great on all formats – even the table, which some Markdown parsers can’t handle well. You cannot save those other formats to your cloud storage, though.

Dillinger doesn’t have a lot of options. You can toggle auto saving, word count, and scroll sync for both panes, and view a cheatsheet.

StackEdit

StackEdit seems to be the most popular online markdown editor. I found out about it after reading Abner Lee’s article about markdown editors.

Besides the usual editor and preview panes, there are two menus on the top corners of StackEdit – the left one lets you open files (both local and online), share document links, and open preferences. The right button lets you create, delete, and manage documents. There are also a navigation bar with formatting buttons on top – which I don’t think I would use – and the name of the currently opened document. On the bottom right corner, there’s a cheatsheet, table of contents, and document statistics (word count and the like).

StackEdit can open documents from CouchDB, Dropbox, and Google Drive, convert HTML file to Markdown, and publish to Blogger (as post and page), Gist, Github, Google Drive, SSH Server, Tumblr, and WordPress.

Although it has a preview pane, the editor pane also shows the formatting of a document, and the syntax is still shown. I think it’s more comfortable to hide the preview pane when writing.

With preview pane and navigation bar hidden.
With preview pane and navigation bar hidden.

One great thing about StackEdit is that it supports keyboard shortcuts. Not only the standard CTRL+B for bold and the like, you can even search and replace text with CTRL+F and switch between documents by CTRL+[ or CTRL+].

There are two modes of StackEdit – editor, which shows the editing pane and navigation bar, and preview, which shows the preview in full screen.

StackEdit in preview mode

You can save your document to disk as Markdown, HTML, and PDF (if you ‘sponsored’ StackEdit for $5/year.) The ‘As HTML’ option exports to plain HTML, while ‘Using template’ generates a styled HTML which looks like what’s shown on the preview pane.

There’s a lot that you can change on the Preferences. You can change themes (the list includes Solarized), change the pane layout to vertical, change font style, edit templates of HTML and PDF outputs, backup and restore settings, and a lot more.

For some reason, StackEdit froze my browser a lot. When it works, it’s also much less responsive than Dillinger; there’s a short wait between the editor and the preview to sync. The preview usually loads after I stop typing for a while, such as after hitting space or period.

(GitHub-Flavored) Markdown Editor

At first it doesn’t look like this editor (referred as GFME from now) has an import/export function, but you can actually drag and drop a Markdown file into it (instead of copying and pasting).

GFME is the opposite of StackEdit. It’s really simple I have to think about what to write about it. There are no accounts, keyboard shortcuts, or preferences. Of course, it’s really fast; everything I typed appears almost instantaneously on the preview pane. When you’re done, you can either press CTRL+S to save directly as Markdown, or CTRL+SHIFT+S to choose between Markdown or HTML.

GFME can only generate plain HTML, which doesn’t look as nice as files created by the previous two editors.

Markable

Markable is the only editor that requires an account. It’s free, and after signing up you’ll be taken right to the editor. The purpose of creating an account is that you’ll be able to edit save your document on the site.

The editor has a menu bar on top, which makes me feel somewhat at home with my favorite editor. I don’t think they need any explanation. Markable can import files from Dropbox and Evernote, and also convert HTML file to Markdown, but strangely, it can’t import files from the disk.

 

I was surprised that Markable has keyboard shortcuts. Besides Markdown and HTML, Markable can also export documents to PDF and Word. The HTML and PDF output are not styled, though. It can also post your writings to Tumblr.

Markable has a handful of customization options. You can show/hide line numbers, change font type and size, select from five themes, and hide the preview pane.

You can also make your document (if it’s stored on Markable) public (like this) by clicking the checkbox on bottom right corner.

Test.md is public.
Test.md is public.

(When I first loaded a file into Markable, the preview pane won’t show anything. It turns out that Privacy Badger add-on can interfere with this site. If you have it installed, make sure you disable it or allow cdn.rawgit.com)

Conclusion

I think my favorite is Dillinger. It’s fast, supports Dropbox, and has little learning curve. It has

Markable is actually slightly better than Dillinger. It can also be used to save your Markdown files, but I don’t like having to remember another password. I also still prefer Dropbox to save my drafts.

If you only want to do a quick editing, GFME is great. I don’t usually like a barebones app like this, but I really enjoy using it.

StackEdit is the most feature-rich, but stay away from it if your computer is not powerful. It slowed down my laptop greatly, but works fine when I’m using my school’s public computer (the newest iMac).

Honorable Mentions

These are some editors that I found but don’t satisfy the two requirements on the beginning of this article. One of them might suit your style, though:

  • markup.rocksI came across this app when I searched for an online Org file editor (it works, but I’m disappointed that it doesn’t use the same keyboard shortcuts as Emacs.) Besides Org, it can read and edit other formats, including LaTex, HTML, MediaWiki, and of course Markdown. Supports both local and remote files (by inputting a URL or logging in to Dropbox).
  • CtrlShift.net’s Online Markdown Editor and Minimalist Online Markdown EditorThese two are similar – they’re very simple (no import/export, no accounts), really fast, and seem to share the same parsing engine. However, MOME looks nicer, has a dark theme, full screen mode, and you can change its font size.

Finally, happy holidays for everyone who visit this blog! 🎄🎆

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s