Make Writing for the Web Easier by using MultiMarkdown

The news I used to do a lot of writing in HMTL which was a tad tedious, to say the least. But I gave all that up when I was introduced to MultiMarkdown. MultiMarkdown (an extension of John Gruber’s Markdown) is a text-to-HTML conversion tool — that is to say, it converts your plain text documents into HTML for publishing on the Web. I tend to write pretty much everything in MultiMarkdown these days.

Why Use MultiMarkdown?

There are several reasons why I like writing in MultiMarkdown:

Having a text-based workflow allows me to keep my fingers on the keyboard. I’m not hunting for the bold, italics, paragraph spacing, styles, bullets or numbering icons. Knowing a few snippets of Markdown code to do this helps me to work faster and more efficiently. No more application-specific commands to memorize.
It’s easily readable and scanable. I can edit MultiMarkdown documents effortlessly and am not distracted by confusing HTML code. Sure, there might be a few words surrounded by asterisks or brackets, but I find that I tend not to notice them as much as I do HTML code.
I can write in whatever editor I choose: TextEditor, WriteRoom, Byword, BBEdit or Scrivener and no matter which editor I use, I don’t have to spend time learning the app’s individual keyboard shortcuts or where the commands are located. I simply open the App and begin typing. My favorite Blog editor, MarsEdit and my favorite writing app Scrivener both support MultiMarkdown.
I also use MultiMarkdown for all the reasons that I mentioned in my post on text-based workflow. 5. Writing in MultiMarkdown allows me to export my text documents to a variety of formats: HTML, PDF,RTF, DOC, DOCX, RDFD and OTD. To do this, I used the Marked 2 app.

Okay, now it’s time for an example.

Below is a snippet of text written in HTML:

<H1>About our Site</H1> <p>If you wish to learn more about your Mac, visit us at <a href=”http://dailymactips”>Our Website</a>, where you will find tons of tips, tricks and reviews for “newbies; as well as for experienced Mac and iOS users. If you want to make sure you don’t miss any blog posts, you can <strong>subscribe </strong> to our blog by <em>e-mail</em> or by <em>rss</em> if you use an RSS reader.

Below are some goodies that you might find on the blog</p> <ul>
<li>Mac tips and tricks</li>
<li>Mac Workflows</li>
<li>Mac Software Reviews</li>
<li>iOS Software Reviews</li>
<li>Apple Industry News</li </ul>

Now let’s rewrite this in MultiMarkdown:

#About Our Site

If you wish to learn more about your Mac, visit us at [Our Website], where you will find tons of tips, tricks and reviews for “newbies” as well as for experienced Mac and iOS users. If you want to make sure you don’t miss any blog posts, you can **subscribe** to our blog by *e-mail* or by *rss* if you use an RSS reader.

Below are some goodies that you might find on the blog:
* Mac tips and tricks
* Mac Workflows
* Mac Software Reviews
* iOS Software Reviews
* Apple Industry News

[Our Website]: https://rogertalkstech.com Much cleaner and easier to read.

Markdown Syntax

Let’s now look at how to use MultiMarkdown in your own workflow by learning a bit of beginning syntax. The commands below will meet the majority of your needs. For more advanced syntax, check out Github’s MultiMarkdown CheatSheet.

Bold

To indicate that a word should be bolded, surround the word or words with either two asterisks (my preference) or two underlines. For example: You can bold a phrase by surrounding it with two on each side **asterisks** or if you prefer, two __underlines__, whatever your preference.

Italics

Italics works the same way, except that you use one asterisk on each side or one underline. You can bold a phrase by surrounding it with one *asterisk* on each side or if you prefer, one _underline_.

Ordered List

To create unordered or bulleted lists, precede each item with an asterisk and a space. To make certain that each sentence is on it’s own line when you convert it, add two spaces at the end of the line.

For example:
* Bread
* Milk
* Cheese
* Eggs

Numbered List

To create ordered or numbered lists, precede the sentence with a number. Again, to ensure that each item is on its own line when you convert it, add two spaces at the end of the line.

For example:
1. Bread
2. Milk
3. Cheese 4. Eggs

Headings

You can use HTML headings in MultiMarkdown: Heading 1, Heading 2, etc. by placing the appropriate number of pound symbols before the item and adding a space after the symbol.

For instance:
# Heading 1
## Heading 2
### Heading 3
### Heading 4

Links

There are a couple of different ways to do links. The first way is inline: in which you surround the text to which you want to link in brackets, and then surround the actual link in parenthesis. A good way to remember which comes first is B is before P (brackets first, then parenthesis).

For example:
Please visit [my website](https://rogertalkstech.com) for exciting Mac tips and tricks.

Another way to do links is to add the link as a reference at the end of the document (the reference itself is not displayed).

For example:

Please visit [my website] for exciting tips and tricks.
[my website]: https://rogertalkstech.com

Blockquote

If you’re familiar with quoting passages of text in an email message or on a blog, then you’ll know how to properly create a blockquote in Markdown. To do so, simply place the > character before the start of each paragraph.

This is an example of a blockquote paragraph. I can add as much text and as many lines as I want and each line will be indented.

To do this in MultiMarkdown:

>This is a blockquote paragraph. I can add as much text and as many lines as I want and each line will be indented. Simply add the > character to the beginning of the paragraph.

>This is the second blockquoted paragraph.

Superscript

Text can be displayed in a superscript font by preceding it with a caret ( ^ ).

For example:

Apple^tm becomes Apple™

Images

Images works similarly to links in that you can create an inline link or a reference link. MultiMarkdown for images contain 3 parts:

1. Exclamation point
2. Alt text surrounded by brackets
3. Link to the image ![alt text](link to image)

Below is an example linking to a logo inline:

![My company Log](https://www.rogertalkstech.com/images/logo.jpg)

Below is an example of linking by reference:

![My company Logo][logo]
[logo]: https://www.rogertalkstech.com/images/logo.jpg [id]: url/to/image “Optional title attribute”

I personally never insert images via MultiMarkdown. I find it’s easier to simply drag them to my Blog Editor.

Implementing Markdown In Your Workflow

Okay, so we saw how to write in MultiMarkdown. So how do you export it as HTML?

When writing blog posts or articles for the Web, I use an application called Byword, available both for the Mac and for iOS. With Byword, you can export your MultiMarkdown documents as HTML, PDF, RTF, or even Word. Additionally, you can copy your MultiMarkdown document as either as Rich Text or HTML, which you can then paste into another application such as a blog editor. With the ability to paste your MultiMarkdown data as Rich Text, there’s no reason why not to use MultiMarkdown for all your documents.

Moreover, Byword contains built-keyboard shortcuts to quickly insert MultiMarkdown codes in your document. These are:

Bold: ⌘ + B
Italic: ⌘ + I
Add a Header: ⌘ and then the Plus symbol (+). Simply hit it again to go down to another header level.
Bulleted List: ⌘ + L
Numbered List: ⌘ + Option + L
Block Quote: ⌘ + ‘
Links: ⌘ + K

Another excellent application to convert your MultiMarkdown documents to other formats is Marked 2. Not only does this feature-rich app serve as a previewer for MarkDown files, but you can also export to a variety of different formats. I like to have Marked open as I write because it provides a live HTML preview of my document each time I save.

If you’re a Scrivener user, you’ll be happy to know that Scrivener also provides built-in Markdown support. I tend to do all of my longer work in Scrivener and my shorter work in Byword.

For more advanced Markdown commands, check out the Github’s “MultiMarkdown Syntax Guide“.

Roger Talks Tech

Making the tech in your life work for you