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:

![Alternate text](https://robertnyman.com/image.png)

You could also optionally add on a tittle attribute:

![Alternate text](https://robertnyman.com/image.png "My optional title text")

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!

11 Comments

Leave a Reply to Offline First – better HTML5 User Experience, Prefetching resources, Social Media Sizing Cheat Sheet – Hacks Weekly ✩ Mozilla Hacks – the Web developer blog Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.