Blog   ❯   Author: Fabio MoschiniDate: 21.08.2022

Introduction to Markdown

alt text for image

What is Markdown?

It's a language through which you can define the layout of a web page. Text written using Markdown syntax can be converted to HTML and many other formats.
The Markdown language maintains almost unchanged readability of the text, making its use simple and immediate.
For example, this text written in Markdown:
# Page Title ## Page Description The following text *is in italics*, unlike this one **which is in bold**; finally, this text ~~is strikethrough~~.
can be transformed into HTML and displayed as follows:

Page Title

Page Description

The following text is in italics, unlike this one which is in bold; finally, this text is strikethrough.

As it's evident, the text written in Markdown is absolutely readable, although there are characters that define the layout. A markdown file is a text file with a 'md' extension and contains both the text and its formatting, applied using symbols such as the hash #, asterisk *, underscore _ or greater than >.

What are the tools to create a file in Markdown?

Since a markdown file is in text format, you can create or modify this type of file with any text editor.
However, there are features that make life easier for those who need to write, view, or convert a markdown file.
For this reason, it's preferable to use advanced editors such as:

Notepad++ (https://notepad-plus-plus.org/)

Visual Studio Code (https://code.visualstudio.com/)

What are the rules for defining layout in Markdown?

In the previous example, we used some rules that Markdown provides to define the layout of a text.
For example, for the title we used the "hash" character #, followed by a space and the text that defines the title.
When the text is converted to HTML, the character # is replaced by the tag <h1>, whose closing tag will be inserted at the end of the line. Similarly, for the subtitle we used the double hash ##, which corresponds to the <h2> tag in HTML.

As it's easily intuitive, the sequence of three hashes corresponds to the tag <h3> and so on, up to six hashes that correspond to the tag <h6>. In the example we used other rules for text formatting, such as, for example, the one to set italics, through the asterisk character *. This way, the text between two characters * is converted to HTML using the tags <i> ... </i>. In a very similar way, for bold we use the double asterisk ** which, in HTML, becomes <b> ... </b>, while to have strikethrough text you must enclose it between two double tilde characters ~~, which, in HTML, becomes <s> ... </s>.

Defining a paragraph or block of text

Markdown uses an empty line to define paragraphs.
Markdown:
This text, although written on different lines, is part of the same paragraph while from this line starts a new paragraph
Result:
This text, although written on different lines, is part of the same paragraph
while from this line starts a new paragraph

What are the most important rules in Markdown?

This table shows the most used rules for formatting text with Markdown:

MarkdownFormatted TextHTMLNotes
# Title

Title

<h1> ... </h1>
heading 1
## Title

Title

<h2> ... </h2>
heading 2
### Title

Title

<h3> ... </h3>
heading 3
#### Title

Title

<h4> ... </h4>
heading 4
##### Title
Title
<h5> ... </h5>
heading 5
###### Title
Title
<h6> ... </h6>
heading 6
*Text*Text
<i> ... </i>
italics
_Text_Text
<i> ... </i>
italics
**Text**Text
<b> ... </b>
bold
__Text__Text
<b> ... </b>
bold
***Text***Text
<b><i> ... </i></b>
bold and italics
___Text___Text
<b><i> ... </i></b>
bold and italics
~~Text~~Text
<s> ... </s>
strikethrough

Other rules defined in Markdown

Blockquote

The greater than character > is used, followed by the text:
Markdown:
> blockquote

Result:
blockquote

It's possible to use multiple greater than characters in sequence to define higher level blockquotes:
Markdown:
> first level blockquote >> second level blockquote >>> third level blockquote

Result:
first level blockquote
second level blockquote
third level blockquote

Lists

Each item in the list is preceded by the "minus" character -:
Markdown:
- Element no. 1 - Element no. 2 - Element no. 3
Result:
- Element no. 1
- Element no. 2
- Element no. 3

Numbered Lists

Each item in the list is preceded by the characters 1.:
Markdown:
1. Element no. 1 1. Element no. 2 1. Element no. 3
Result:
1. Element no. 1
2. Element no. 2
3. Element no. 3

Links

The text to click is enclosed in square brackets, while the URL of the link follows in round brackets:Markdown:
[Click here](https://www.moschini.cloud)
Result:
It's possible to use other methods to create links. For example, instead of defining the URL right after the text, you can use a label that references the URL:
Markdown:
[Click here][URL to open] [URL to open]:https://www.moschini.cloud
Result:
You can also use a number as a label for the URL:
Markdown:
[Click here][1] [1]: https://www.moschini.cloud
Result:

Source Code

To indicate a block of lines that represent source code, enclose the code between two sequences of three "backtick" characters ```.
It's also possible to indicate the language for which you want to apply the formatting:
Markdown:
```javascript var add2 = function(number) { return number + 2; } ```
Result:
var add2 = function(number) { return number + 2; }

Images

For images, there are two methods:

Inline-style:
Markdown:
![alt text](https://cdn.pixabay.com/photo/2018/08/18/13/26/interface-3614766_960_720.png)
Result:
alt text

or Reference-style:
Markdown:
![alt text][image] [image]: https://cdn.pixabay.com/photo/2018/05/18/15/30/web-design-3411373_960_720.jpg

Result:
alt text

Tables

For table definition, the "pipe" character | is used to delimit columns and a sequence of - to separate the header from other rows.
The content of the cells can be formatted according to the established rules.
Markdown:
| Column 1 | Column 2 | | ----------------- | --------------------- | | First row | No formatting | | *Second row* | *Italics* | | **Third row** | **Bold** |

Result:
Column 1Column 2
First rowNo formatting
*Second row**Italics*
**Third row****Bold**

Horizontal Rule

To separate one section of the page from another, you can insert a horizontal rule.
In HTML this element can be defined with the tag <hr>.
In Markdown it's sufficient to write one of these sequences of characters:
  • - "minus" character ---
  • - "asterisk" character ***
  • - "underscore" character ___

The line must not contain any other characters.
Markdown:
---
Result: