Writing for the Web with Markdown

What is Markdown

Maybe you know how to create webpages using HTML or HyperText Markup Language. If you do, you know what a pain it is. Markdown lets you write using plain text and later convert it to HTML to post it online. So, even if you don’t know a thing about HTML you can write webpages using Markdown.

Aside from marking up webpages with Markdown, you use Markdown to format text, add links and images to many note taking apps. And every day now more iOS, OS X, Android and Windows developers are beginning to incorporate Markdown into new applications.

Markdown Is Easy to Learn

Markdown is very intuitive and simple to use. You can write Markdown on any text editor from something as elaborate as Microsoft Word to something as simple as Microsoft’s NotePad. On a Mac you can use TextEdit, Pages or even Notes. But when you get hooked on using Markdown like I am you’re going to want an app on your PC or Mac that is specifically designed to help you write in Markdown.

You can google around and find lots of apps designed for Markdown on Windows, Androids and Macs. I use MarkdownPad on my PC. On my Mac, I’m torn between Typed which features several extras like Zen Mode that will play soothing audio for you while you compose your blog posts or whatever and Byword an equally impressive Markdown app and so for now I ‘m using them both.

Here’s How Markdown Works

In HTML to make a header i.e. headline in big bold letters you use HTML header tags styled with even more CSS (Cascading Style Sheets) code. What a hassle! In Markdown, you do the same thing using hash tags like so: # Header. Typing one hash tag followed by a space then followed by your text makes a huge, centered headline. Two hashtags followed by a space make the headline slightly smaller. Three hash tags and then a space makes it smaller still and six hash tags creates the smallest headers.

To create a paragraph in HTML you would use a paragraph tag or the letter p surrounded in angle brackets and then end the paragraph with the same symbol but with a backward slash in front of the p. But you can do the same thing in Markdown by hitting your return key twice. Meaning, putting a space between your lines of text is all it takes to create paragraphs.

Formatting is easy with Markdown. To make text bold, surround it with two asterisks like this: This is **bold text**. This is bold text or you can use the keyboard shortcut Cmd + B to make highlighted text bold. For italics surround text with underscore like so: _italicized_ and that text will be italicized.

To create a list, start new lines with a single asterisk, minus sign or plus sign and then a space. And you can create numeric lists by beginning a line of text with the number one and a period and then a space with the second line beginning with the number two (2) and a Period (.) and then a space and so on. That space between the asterisk, minus or plus sign is important. And speaking of spaces, remember to put a line of space between the last paragraph and the beginning of your list.

I’ve written this page using Markdown instead of regular old HTML and you may have noticed I’ve provided some links. Linking to other places on the Web is really tedious using HTML and it is so simple with Markdown. Here’s how. Find the page you want to link to in your browser and copy it’s address to your clipboard. Now go to the text in your Markdown app, find the word you want to use as the anchor and put your cursor to blinking in front of it and use the keyboard shortcut Cmd + K and you’ll see your anchor word between brackets and an empty double parentheses. Click between the parentheses and paste your URL and you’re done. In Windows MarkdownPad the link producing shortcut is Ctrl + L.

Speaking of shortcuts, here are some more

• Cmnd + b makes highlighted text bold
• Cmnd + i makes highlighted text italicized
• Cmnd + c Copy the selected text to the Clipboard
• Cmnd + v Paste the Clipboard contents into the current document
• Cmnd + x Cut the selected text and copy it to the Clipboard
• Cmnd + a Select the entire contents of the current document

Posting to WordPress Using Markdown

WordPress.com supports Markdown and so supports anything written in Typed Or ByWord on the Mac or MarkdownPad on a PC.

Converting Markdown to HTML

Some Markdown text editors will show you what your Markdown document will look like in HTML. But a quick and easy way to convert Markdown into HTML is to use John Gruber’s Dingus online page. Just copy your Markdown to your computer’s clipboard and paste it into the Dingus webpage.

Markdown examples

Below are some examples of how to use Markdown. First I’ve written what you should type to make a certain thing happen followed by its HTML equivalent followed then by the keyboard shortcut for the same action if applicable. In most cases you’ll need to highlight the word or phrase before applying the shortcut to it.

• # Largest Header html: <h1>Largest Header</h1> shortcut: Cmnd + 1
• ## Smaller Header html: <h2>Smaller Header</h2> shortcut: Cmnd + 2
• ### Smaller Header html: <h3>Still Smaller Header</h3> shortcut: Cmnd + 3

You can keep making smaller and smaller headers down to the smallest which is:

• ###### Smallest Header html: <h6>Smallest Header</h6> shortcut: Cmnd + 6
• **Bold Text** html: <b>Bold Text</b> shortcut: Cmnd + b
• _Italicized Text_ html: <i>Italicized Text</i> shortcut: Cmnd + i

If you found any of this information idiotic or confusing, yell at me in the comments.