Using Markdown and the Mou editor for blogging
Having learned HTML in the 1990s, I’ve always felt very comfortable with it and I’ve used plain text or HTML in text editors for as long as I can remember when I’ve been writing something. However, I’ve finally taken the plunge into Markdown now.
Why?
While I’ve felt extremely confident with my various editors and their setup with regards to shortcuts, snippets, HTML support, themes and much much more, I also like trying different approaches to existing tasks.
For me, using HTML for editing text has been so deeply rooted that even if I’ve been aware of Markdown for a long time, I’ve never really seen the point before.
However, time and simplicity becomes more and more important, and using Markdown can be very quick to get some basic formatting/structure right, while keeping the document as readable as possible.
And, of course: we can always learn and get better at what we do. So keep trying alternatives!
So, what is Markdown?
Markdown is basically a text-to-HTML conversion tool created by John Gruber and Aaron Swartz. The idea is to make it as easy as possible to create your content, and to focus on that rather the formatting of your input.
The idea is to mark up your content as easy and swift as possible, with a few characters. This is how you mark up the most common examples:
Headings
Headings are marked up with the # hash character, with one hash equal to <h1>, two hashes equal to <h2> etc.
Example:
## This is a <h2> heading
Paragraphs
You don’t mark up paragraphs explicitly in any way. They are just assumed to be paragraphs of text, and when converted to HTML, they will be wrapped with <p> elements.
Links
A link is created by using parentheses, like this:
[Robert Nyman](https://robertnyman.com/)
You can also create links via link references, increasing readability of a document:
[Robert Nyman][website]
[website]: https://robertnyman.com
or
[Robert Nyman][]
[Robert Nyman]: https://robertnyman.com
Note: It got pointed out to me, the empty brackets in the above example aren’t needed either.
Images
Creating images follows the same syntax as links, but with an exclamation sign in front of it:

You could also optionally add on a tittle attribute:

Italic text
Italic text is created by wrapping it with the * character:
This food is *amazing*
Bold text
You can create bold by encompassing it with double * characters:
I am so **strong**
Lists
Lists are easily created by using the * character or a number. This would be an unordered list:
* Item 1
* Item 2
* Item 3
An ordered list:
1. First
2. Second
Blockquotes
Blockquotes are easily created by the “greater than” character:
> This is a quote
Code
If you want to include code, you can either wrap it with a backtick:
`var amazing = true;`
or indent it as a block with tab/minimum 4 spaces.
Using Mou, the Markdown editor
There are tons of ways for various text/code editors to add Markdown support, and to be able to edit it, convert it to HTML and much more. I tried that a little, but then Rob Hawkes suggested that I’d rather used a dedicated Markdown editor, instead of adding it on top of all features in my normal editors.
He suggested Mou to me, and so far I’m quite happy with it! It has a bunch of shortcuts for the most common formatting and exporting or copying the content into HTML.
It also has a nice live preview and a few good themes.
Try it out!
If you write a lot, especially blogging, and haven’t looked into Markdown, I do recommend trying it out. Perhaps you’ll love it and will be much faster than before. Or, you’ve ruled out an alternative. π
Either way, trying things is fun! Let’s have fun!
YES, you mark paragraphs explicitly by leaving one empty line between blocks of text. Something like that:
First paragraph
Second paragraph
Love Mou. Waiting for a webapp to capture its feature set. http://dillinger.io is probably the closest, though I really do want the header fontsize boost in markdown view.
nagisa,
Yep, the easiest approach possible!
Paul,
Good to hear! Yes, Dillinger seems quite good, but agreed on the font size. It’s a nice extra touch!
I host my blog through github, which uses markdown for everything, so I’ve been enjoying using it via Mou for quite some time. It does make things much more readable in source.
For us that use some other *NIX flavor than Mac OS X, here are some alternatives:
http://sourceforge.net/p/retext/home/ReText/
http://uberwriter.wolfvollprecht.de/
http://codeboje.de/wysiwyg-markdown-editor/
Al,
Ah, nice!
And yes, I think that readability part is very important, both for us but also for getting other people to write things and get going.
Victor,
Excellent, thanks!
I wish I had done that research before the post, so I really appreciate hearing about options on other platforms.
If for some reason you prefer to use your usual text editing tools, then there’s also Marked for previewing your writings.
http://markedapp.com
I’ll take Mou for a spin, great tip!
Morgan,
Nice, thanks for the tip!
[…] Using Markdown and the Mou editor for blogging […]
For the simplest path from your markdown editor to your blog, check out Markbox (http://www.markbox.io) – save your post to Dropbox, and a minute later its live on the web.
I’m the developer – feel free to hit me up anytime to ask questions!
Steve,
Cool, thanks for the tip!