How to Use Markdown to Easily Create and Publish Content to the Web

Overview

Markdown is a lightweight markdown language you can use to format text for publication to the web. Markdown is much simpler than HTML, requiring far fewer tags, making it much easier to write and edit documents.

Markdown is the emerging standard markup language for formatting text for the web, including CMS’s such as WordPress and Ghost, to services such as Github, Trello, Zapier, and even Slack.
By default, Markdown converts to HTML, but you can easily convert A Markdown document into Word, PDF, and most other formats.

Markdown’s primary design goal is readability.

This article will cover the basic Markdown formatting that everyone who uses a web hosting account or otherwise publishes content to the web would benefit from knowing.

Note: Two spaces at the end of a list item or line of code will ensure that the next item starts on a new line.

Section 1 - Block elements

Block elements such as paragraphs that create a container for content. New block level elements usually begin on a new line.

Note: There’s no need for closing tags in Markdown (unlike HTML), helping to make a Markdown document easier to read.

Paragraphs

In Markdown, a paragraph is one or more consecutive lines of text separated by a blank line.

Headers

Six header levels correspond to HTML elements. The best practice for accessibility is always to use these in order. That is, start with H1 and then use H2, then H3. Don’t skip right to H3.

#H1
##H2
###H3
####H4
#####H5
######H6

The output of the above looks like the corresponding HTML headers.

H1

H2

H3

H4

H5
H6

Ordered and unordered lists

Ordered lists

You create ordered lists by just entering the item numbers.

1. Item1  
2. Item2  
   1. item1  
   2. item2  
3. Item3

 

The list, rendered in HTML would look like this.

  1. Item1
  2.  Item2
    1. item1
    2. item2
  3. Item3

You can nest lists within lists by adding four spaces, backspacing back to resume the list where you left off.

Unordered list

You can use *, -, or the + symbol interchangeably for unordered lists.

+  item1  
-  item2  
*  item3

The list syntax above will render like this:

  • item1
    •item2
    •item3

Block quotes

Use the greater than symbol to create a blockquote.

> Markdown is lightweight enough that it's possible
> to learn the syntax in a couple of hours.

The blockquote looks like this when converted to HTML.

Markdown is lightweight enough that it’s possible to learn the syntax in a couple of hours.

Code blocks

You can create a code block using three bac ticks followed by two spaces at the beginning and the end of the block, creating a new line below the code block, and use two spaces at the end of each line of code so that the next line starts on a new line.

```
Code block
Code block
```
The bac tics each followed by two spaces and two spaces at the end of each line, will render this way:

Code block  
Code block

The above code block will render this:

Code block  
Code block

In many flavors of Markdown, you can add four spaces to create a code block as an alternative to the ``` syntax.

 

Section 2 - Inline elements

 

Inline Code

You can embed a command or a bit of code inline with the three backticks as the code fence described above. The three bac tics can be used inline to display on both sides of a command or snippet of code or a command.

Emphasis

You add emphasis several variations. this and this is emphasized and this and this are strongly emphasized.
You can emphasize something by ~crossing it out~.
And here are these sentences with the Markdown rendered.
You add emphasis with an * or _ on both sides of a string of text. Two asterisks or underscores on each side of a string of text for strong emphasis.
You can emphasize something by adding a ~ to both sides of a word or words to -cross them out-.

Links

You can add links in Markdown with a [Text to display.](https://www.example.com), and you can add an optional title: [Text to display.](https://www.example.com “Optional title”)
The link will render like this:
You can add links in Markdown with a Text to display., and you can add an optional title: Text to display.
Markdown will detect links in text on their own or with < and > on either side of the URL. For example,<http://www.example.com> will render http://www.example.com.

Images

To add an image to a document, you’ll use ![Alt text for image][Alt text for image](URL to image). For example, here’s the ![Host Advice Logo](https://hostadvice.com/wp-content/themes/bestwh/img/logo.svg), which would render like this:

Tables

First Header | Second Header
-———– | ————-
Cell 1 of table | Cell 2 of table
row 2 of cell 1 | row 2 of cell 2
The table would render like this:

First Header Second Header
Cell 1 of table> Cell 2 of table
row 2 of cell 1 row 2 of cell 2

Section 3 - Adding Markdown

 

WordPress Content Management System (CMS)

You can add Markdown support to WordPress for posts (blog posts), pages (static website pages), and comments (if you have comments enabled in WordPress).

  1. Install the WordPress-Markdown plugin: 
    2. Then enable Markdown from wp-admin. First, select settings then select writing. Here put a check in the box wherever you want Markdown enabled.

Ghost publishing platform

Ghost is a fast, lightweight CMS that’s an alternative to WordPress. Ghost uses Node.js on the backend and is very fast.
Ghost enables Markdown by default, so there’s no need to install a plugin.

Jekyll static site generator

Jekyll’s a popular static site generator that converts your text into a static website. It supports Markdown right out of the box.

Hugo static site generator

Hugo is another popular static site generator that supports Markdown out of the box.
There’s a good chance that whatever application you’re using supports Markdown. Check the documentation.

Markdown editors

You may find Markdown appealing enough to start using a Markdown editor. Here’s an example editor for Mac, Windows, and Google Docs. A search will show there are some other Markdown editors available.

Byword for Mac

Byword is a minimalistic Markdown editor that enables you to convert your Markdown documents into HTML, Word, PDF and other formats. You can publish directly from Byword to your WordPress site.

MarkdownPad for Windows

MarkdownPad’s a full-featured Markdown editor for Windows. With MarkdownPad you can use your CSS, which comes in handy if you’re composing content for the web.

StackEdit for Google Docs

StackEdit is an “in browser” Markdown editor that’s particularly useful if you use Google Docs. In Google Docs, click new then select More, then select Connect More Apps. Search for StackEdit or Markdown then install StackEdit. 
WithStackEdit installed, you’ll be able to compose Markdown directly within Google docs, collaborating with others.

Conclusion

In this article, you learned the basic Markdown syntax needed to start using it immediately.

Markdown is rapidly becoming a standard for formatting text, though Markdown itself is not standardized. There are various flavors of Markdown created to extend its features. Check the documentation of the application you’re using to learn the details.

You may be surprised to find that your favorite applications support Markdown!

 

Check out the top 3 Best web hosting services

Was this article helpful?