Writing Web Content with Markdown

Unless you are really HTML-savvy, writing articles directly using HTML is not ideal. First, you have to wrap the content properly with the tags in order to format it, and secondly you will have to go back and forth from your code editor to the browser to see how it looks.

If you are a frequent web writer, I think it’s better for you to write using Markdown. Markdown allows you to write content in plain text that later can be translated into a valid HTML format, and with the help of a tool, you can instantly see the output.

Markdown Logo by Nocila Armellini

Furthermore, there seems to be a sort of trend for new publishing platforms to adopt Markdown as the primary way to write the content, for example Ghost, AnchorCMS and ScriptoGram. They allow the platform to stay simple and without being clogged up by a heavy WYSIWYG JavaScript library.

In this post, we are going show you how to write in Markdown format, and several tools that let you write with ease. Let’s check them out.

Recommended Reading: Desktop Blogging Software, The Ultimate List

Markdown Syntax Cheatsheet

Markdown is written with several notations to form the content. Let’s have a look.

Paragraph

To form a paragraph simply write it down, and hit enter to start a new paragraph. This example below:

 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Will be translated into.

 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

Bold & Italic

You can use the asterisk mark to set Bold, or Italic. Technically, a single asterisk is for Italic and double asterisks are for Bold.

 *Lorem ipsum* **Lorem ipsum**

The example above will form as follows.

 <em>Lorem ipsum</em> <strong>Lorem ipsum</strong>

If you want to make the text both bold and italic, simply wrap them with triple asterisk, like so.

 ***Lorem ipsum***

Headings

In Markdown, Headings is marked with a hash tag. One hash tag means headings level 1, two hash tags mean heading level 2 and so forth.

 #Heading 1 ##Heading 2 ###Heading 3 ####Heading 4 #####Heading 5 ######Heading 6

The example above will be translated into:

 <h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6>

Ordered & Unordered List

To create an unordered list, initiate the line with an asterisk or a dash.

 * this is list * this is list * this is list - this is list - this is list - this is list

To create an unordered list, initiate the line with number, as follows.

 1. this is list 1 2. this is list 2 3. this is list 3 4. this is list 4 5. this is list 5

You can differentiate list level simply with spaces.

 1. Hello 2. Hello 3. Hello

In HTML format, these will be translated into <ul> and <ol>.

Line

You can create lines, which is equal to <hr> by using dashes or equal signs. Here is an example.

 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. -------------------------------- Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. ================================

The output will look as shown in the following screenshot.

Blockquotes

To form blockquote, initiate the lines with a > sign, like so.

 > Duis aute irure dolor in reprehenderit in voluptate velit esse > cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non > proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

This example will be wrapped with a <blockquote> element

Link

To create a clickable text link, you can wrap the text with square brackets, with the URL in parentheses, like so.

 [Hongkiat.com](http://www.hongkiat.com/blog/)

Image

Adding an image is similar to adding text link. In Markdown, an image, is initiated with an exclamation mark. Wrap the image alt text in a square bracket, and the image URL with parentheses, like so.

 ![image](http://imageurl.jpg)

You can also insert image title in this way.

 ![image](http://imageurl.jpg "Image Title")

Limitation

It is worth noting, as stated by the Markdown’s author that “Markdown’s formatting syntax only addresses issues that can be conveyed in plain text“. Thus, Markdown does not cover some HTML tags like table, pre, and div.