Markdown Editors For Note-taking

Markdown is becoming more popular as a minimalistic format for a simple markup document. It is simpler to use than having to type out the syntax of an HTML document and still appear neat and aesthetically appealing. For notes takers, markdown helps to simplify the task of writing up an overview well-designed note outlook and just learning some basics are needed for that.

Online markdown editors for note-taking

StackEdit – Recommended
HackMD – Basic for collaboration

Mac apps markdown editors for note-taking

Typora – Recommended: Beautiful and intuitive
Boostnote – Basic and working

Mac coding editor apps as Markdown editor for note-taking

Atom – Usable with markdown preview plus and mindmap packages
Visual Studio Code – Works with Markdown Preview Enhanced

Which solution would you prefer? please read on for more screenshots and analysis…

StackEdit

StackEdit is a comprehensive online markdown editor that also supports offline by saving files in the browser. I tested going offline and still could retrieve and edit the file as usual with live preview while sync is disabled. Just go to Stackedit.io and click start writing to continue where you last left off.

StackEdit probably has all the features you may need

Online and offline support and workspaces
Examples and formatting menu
Publishing options to the various cloud or blogging platforms
Import and export to disk options
Latex(Maths rendering)
UML diagrams

StackEdit makes it easy to learn and write markdown documents

You have there Welcome file on the left, the menu formatting tools above and Markdown cheatsheet on the right to guide you.

For beginners the Markdown cheatsheet is an easy way to follow and learn.

When you are ready, click publish to your configured cloud or blog accounts. You can choose from Blogger, Dropbox, Google Drive, Github, WordPress, and others.

You can render Maths equations (LaTeX) on StackEdit.

Or you can also use it to draw diagrams similar to mind mapping, in left to right or top down or more, learn more here.

To start, activate by enclosing the diagram logic within “`mermaid … “`. Please follow through the examples above if you wish to learn this. I have attached the markdown file here for your reference.

StackEdit Export Options.

HackMD

HackMD is a simpler online markdown editor with basic features. The strength of HackMD is in collaboration with different options on how you want to share this note. There is also an option to export to Dropbox, Google Drive, and Gist. Also, there is an option to go into Slide Mode and you can easily present your note in a powerpoint slide style.

Typora

Typora is one or the most beautiful markdown editor I have seen. This is the only editor I know that displays live preview in the same frame as you type away. The Mac App design is simply visually appealing. It can also support Maths rendering and UML diagrams. It does not have cloud support but there are many options for export such as HTML, PDF, image and more. This is a gem Mac notes takers can keep. It is still free in Beta.

Beauty of Markdown in Typora. The Markdown document is here.

Boostnote

Boostnote is an open-source cross-platform markdown editor. There is an option to publish to a WordPress blog. LaTeX and UML diagrams are working.

Boostnote example 1

Boostnote example 2

Both Boostnote and VNote are also evaluated in a previous post: A Basic Good Coding Practise: How To Comment Codes And Take Notes.

Markdown in Atom

Please read the previous post: How To Use Atom To Take Notes. Maths Rendering is possible too.

Markdown Preview Plus in Atom is neat and working. However, the UML diagram is not working here.

Markdown Mindmap works in Atom.

Markdown in Visual Studio Code

I evaluated a working solution for Markdown in Visual Studio code as follows:

Click the Visual Studio Code Marketplace Icon (Square-look) on the left
Search for Markdown Preview Enhanced
Create and save a note as .md. Type some markdown content.
In Mac, live preview by pressing CMD+K together. Release both fingers. Press v. The preview window or pane should appear on the right.

Working Markdown with Maths Rendering and UML diagram in Visual Studio Code

How to use Markdown? (Quick guide)

Open up an app or editor that support Markdown e.g. StackEdit.io, Typora, Atom
Create a new document and save it with a .md extension.
Start a heading like this: # Heading. Up to 6 ###### heading is possible.
Type text without any preceding symbols.
Unordered bullets like this: * point 1. Start next line like this: * point 2.
Numbers list like this: 1. One. Start the next line like this: 2. Two.
Bold text: __bolded text__
Italic text: _italic text_
Horizontal line: three dashes
Add links: [link_name](http://www.link_url.com)
Add images: ![cat](http://www.cat_image_address.com)
Preview the markdown document

On a side note, did you miss this post? How To Take Notes On YouTube Video (4 Tools Evaluated)

To learn more, please visit Mastering Markdown, Markdown Tutorial or Markdown Guide.

More Markdown

Examples with Emoji, new line, code blocks, checkboxes and inline-block. The Markdown document can be accessed here.

Conclusion

For online with offline access, I recommend and prefer StackEdit for scalability and its features. Please remember to upload or publish your notes to backup. HackMD is basic and collaboration with others is possible.

For the Mac App, Typora is the clear winner. Boostnote is also a viable markdown note-taking solution but Typora not only looks good but has live preview once the syntax is complete.

For Mac code editor as Markdown editors, for basic Markdown usage, both are working. Atom has a better preview markdown outlook in my opinion and in addition, has a markdown mindmap package that mind mapping users may prefer for note-taking purposes. However, the UML diagram is not supported in Markdown Preview Plus. On the other hand, Visual Studio Code Markdown preview enhanced works fine for markdowns, Maths and UML. But visually may not be as appealing as Atom. Both have their advantages.

The overall ranking of these Markdown editors for note-taking or otherwise in my opinion:

Typora is best in terms of beauty with live preview on the same page
StackEdit comes in second with its comprehensive features
Third place is shared between Atom and Visual Studio Code

Please remember not to get carried away with Markdown, it is just a simple tool to help us take notes down. Backup your notes to a cloud or drive. I would prefer syncing markdown notes directly into Evernote but I did not find a recommendable free solution for that. I hope this helps, good luck and be kind to others.

Markdown support for Evernote?

Markdown Here – It is free and created for writing emails with Markdown i.e. Gmail. However, you can use basic Markdown commands on the Evernote Web as well with its Chrome extension. But please note it is not a robust solution. Maths rendering, image resizing, and UML diagrams may not work. And one may have to keep turning on and off the rendering by clicking the chrome extension icon to avoid unsaved changes.

A Markdown Here note in Evernote.

More free markdown alternatives

Laverna and Dillinger are also basic online markdown editors. Go for sustainability instead. It is less probable for smaller sites such as HackMD, Laverna or Dillinger to survive longer than popular or more professional ones.

Markdown for blogging

Hexo – Install and run your blog framework with Markdown support. There is a learning curve involved here and it may be over the top for just a note-taking purpose
Jekyll – From text with markdown support to sites and blog on Github pages for free hosting.

Paid Mac App with markdown support alternatives

Alternote
INKDROP
Ulysses
Bear
Marxico – Markdown editor that link and sync to Evernote
EverTool – Another Markdown for Evernote

How To upload a Markdown README to Github

Sign up and click new project/repository
Put in a name and create the Github repository
On your Mac, create a new directory on Desktop i.e. Test. Put a markdown document named README.md into it.
Start a terminal session (from spotlight search and CMD+ if the screen is too small), go into the created directory i.e. Type: cd Desktop/Test. Press Enter. (pwd to know your current directory. cd .. to back out of a directory. Tab can auto-complete a long directory or file name.)
In the new directory from the terminal, type and press enter: git init
git add .
git commit -am ‘First commit’
git remote add origin https://github.com/your-username/your-repository-name.git
git push -u origin master
Go to your Github repository page to view README
Tip: Any further changes made to the same directory can be updated to Github with 2 commands without the brackets [git commit -am ‘a commit comment’] and then [git push -u origin master]
You may also download and use Github Desktop