How to use Markdown in web development


Markdown is a type of markup language that is used to enhance the visibility and attractiveness of the plain text documents. This lightweight markup language was created in 2004, by John Gruber. Today, it is considered as one of the most popular markup languages.

Most users get confused between the usage of Markdown and WYSIWYG editor. Well, they’re entirely different. If you want to alter the formatting of phrases or words in MS Word, then you do so by clicking on them. But that is not the case in Markdown. You have to create a Markdown-formatted file and add Markdown syntax to the texts or phrases to indicate the difference.

For example, if you want to denote a phrase as a heading you write #heading One, or if you’re going to make a text bold, you add two asterisks **Make this bold**. If you’re accustomed to WYSIWYG applications, then this procedure might take a while to get used to. Follow the steps below to get a clear picture of what we’re trying to convey.

Step 1: Choose a Markdown editor.

Before you start working for your website, you need to get your hands on an editor. When you’re working for web development, it is imperative to understand the hurdle you might face and the limitations to it. There are great options to choose from like StackEdit or Byword, which allows you to convert directly into a PDF format.

Step 2: Setup Headings

Setting up headings in Markdown is different from the HTML text. There are a series of headings h1, h2, h3…h6, in HTML. To create headings in Markup, make use of # corresponding to the heading number. For example

<h1> tag in HTML

#heading1 in Markdown

<h2> tag in HTML

##heading2 in Markdown

Step3: Mark up paragraphs

Paragraphs are represented by <p> in HTML, and the amount of blank spaces is not counted in both HTML or Markdown. So, if there is one blank space or 20, it is still considered as a single paragraph.

Step 4: Line Breaks


In HTML, line breaks are indicated by adding <br> between the words, but in Markdown you can choose the next line and continue your text.

Step5: Markup Emphasis

In HTML, you can change the texts to Italics by adding <em> and to bold by <strong>. However, in Markdown language, you make use of * or underscore _.

Step 6: Horizontal line

In HTML <hr> tag is used to create a horizontal mark or horizontal line. Whereas in Markdown, we make use of ===, *** or — to make a horizontal mark. But one thing to note is that there is one line space, above and below the characters.

Step 7: Adding links and images

<img> tag is used to add images and <a> tag is used to add links in HTML. Whereas in Markdown, the image insertion is followed by an exclamation mark, square brackets and parentheses to indicate the path![]()

Step 8: Lists

<ol> are used for ordered lists and<ul> are used for unordered lists. However, in Markdown, * is used for ordered and – for the latter.

Step 9: Adding inline

In HTML you can either work with inline code or pre-existing text blocks. However, in Markdown, they’re used by a single backtick on each side (`).

Step 10: Blockquotes

HTML uses <blockquote> tag, whereas Markdown uses (>).

Step 11: Embed inline HTML

Sometimes you face issues like creating a HTML that is not supported like <table> or <div> tag. In such cases, you’re allowed to mix Markdown and HTML, with a few restrictions.

Leave a Reply

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