What is Markdown?
Markdown is a lightweight markup language created by John Gruber that tries to achieve maximum readability and ease of publication in both its input and output form, drawing on many existing conventions to mark email messages using plain text. Gruber's goal was to make people "able to write using a plain text format easy-to-read and easy-to-write".
Markdown Syntax🔗
HEADERS🔗
Markdown supports two styles of headers, Setext and atx.
Setext style headers are obtained by underlining using the equal symbol for a first level header (H1) and hyphens for a second level header (H2). For example:
Written on Markdown:
This is a H1
=============
This is a H2
-------------
Will render the following headers 👇
This is a H1🔗
This is a H2🔗
Atx-style headers use between 1 and 6 hastags at the beginning of each line, which correspond to the header level. For example:
Markdown:
# This is a H1
## This is a H2
### This is a H3
#### This is a H4
##### This is a H5
###### This is a H6
Will render the following headers 👇
This is a H1🔗
This is a H2🔗
This is a H3🔗
This is a H4🔗
This is a H5🔗
This is a H6🔗
QUOTES🔗
To be able to put text in the form of citations we will use the more than symbol (>) at the beginning of each line. If you are familiar with quoting passages in emails you will not have any problem quoting Markdown.
> This is a quote with two paragraphs. This is a quote with two paragraphs.
This is a quote with two paragraphs. This is a quote with two paragraphs.
>
> This is a quote with two paragraphs. This is a quote with two paragraphs.
This is a quote with two paragraphs.This is a quote with two paragraphs.
Will render the following quotes 👇
This is a quote with two paragraphs. This is a quote with two paragraphs.
This is a quote with two paragraphs. This is a quote with two paragraphs.This is a quote with two paragraphs. This is a quote with two paragraphs.
This is a quote with two paragraphs.This is a quote with two paragraphs.
You can also enter quotes within a quote:
> This is a first level quote.
>
> > This is the quote within the first level quote.
>
> Back to the first level quote.
Will render the following quotes 👇
This is a first level quote.
This is the quote within the first level quote.
Back to the first level quote.
Quotes can also contain other Markdown elements such as headers, lists...:
> ### This is a header.
>
> 1. This is the first list item.
> 2. This is the second list item.
Will render the following quotes with headers 👇
This is a header.🔗
- This is the first list item.
- This is the second list item.
LISTS🔗
Markdown supports both ordered (numbered) and disordered lists.
Disordered lists can be obtained by asterisks, + symbols or hyphens and always separating the first word with a space bar:
* Car
* Motorcycle
* Plane
+ Car
+ Motorcycle
+ Plane
- Car
- Motorcycle
- Plane
Will render the following list 👇
- Car
- Motorcycle
- Plane
- Car
- Motorcycle
- Plane
- Car
- Motorcycle
- Plane
The ordered lists are obtained with numbers:
1. Car
2. Motorcycle
3. Plane
Will render the following list 👇
- Car
- Motorcycle
- Plane
The elements of a list can consist of several paragraphs. Each subsequent paragraph in an element of a list must be indented by 4 spaces or 1 tab:
1. This is a list with two paragraphs. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
2. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Will render the following list 👇
-
This is a list with two paragraphs. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-
Suspendisse id sem consectetuer libero luctus adipiscing.
To insert a quote within a list, we must add the symbol > in the same way, with indentation:
-
A list with a quote:
This is a quote within a list.
It happens in the same way if we want to insert a list within a list. We will have to put 4 spaces or 1 tab:
- This is a list
- This is a list within a list
- This is a list within a list
- This is a list within a list, within a list
Will render the following list 👇
- This is a list
- This is a list within a list
- This is a list within a list
- This is a list within a list, within a list
CODE and BLOCK CODE🔗
Inline `code` has `back-ticks around` it.
Will render the following inline code 👇
Inline code has back-ticks around it.
To create an entire block that contains code, all we have to do is enclose that paragraph between two lines formed by three ( ~ ).
Here we could write
all the lines we want.
Markdown rules do not apply in this box
In case we only want to form a line, we will only have to put indentation with 4 spaces or 1 tab.
RULES🔗
You can enter horizontal rules using 3 or more asterisks, hyphens, or underscores. They can, or can not, be separated with spaces.
* * *
***
*****
- - -
------
_ _ _
Will render to 👇
EMPHASIS🔗
The Markdown language uses asterisks and other symbols to emphasize (bold, italic, underlined and strikethrough):
| Markdown | Result |
|---|---|
| *Italic* | Italic |
| _Italic_ | Italic |
| *Bold* | Bold |
| _Bold_ | Bold |
| ***Italic and Bold*** | Italic and Bold |
| _Italic and Bold_ | Italic and Bold |
| ++Underlined++ | Underlined |
| ~~Strikethrough~~ |
LINKS🔗
Links can be made in two ways.
- Putting the URL directly: https://www.nitoku.com/
- Linking a word or phrase: Nitoku
If we choose the second option, the formula to do it in Markdown is very simple and it is done by putting the text that we want to link in brackets [Text] and the link, followed, inside a parenthesis and without spaces between them.
[Linked Text](URL link to which the text directs)
=
[Nitoku](https://www.nitoku.com/)
It will render to 👇
In addition, we can use any other Markdown rule to highlight our link as bold, italic or even headers:
++[Nitoku](https://www.nitoku.com/)++
**[Nitoku](https://www.nitoku.com/)**
*[Nitoku](https://www.nitoku.com/)*
### [Nitoku](https://www.nitoku.com/)
- [Nitoku](https://www.nitoku.com/)
~~[Nitoku](https://www.nitoku.com/)~~
It will render to 👇
Nitoku🔗
IMAGES, ICONS, GIFS🔗
Inserting an image with Markdown is done the same way as when links are inserted, in a certain way because the images in Markdown are always introduced with their link and not as a file.
we will follow the same formula as the links: [] + () but with ! in front of everything.
This is how an image looks:
| Markdown | Effect |
|---|---|
|  | |
|  |  |
|  |  |
Also, in Nitoku we have done a tutorial of images with some more detail in case you want some more information about it: How to add images to our Nitoku pages?
BACKSLASH - SKIP MARKDOWN🔗
Sometimes we will try to put a hashtag, asterisk, bracket, etc. without the text being transformed. The Markdown language has a solution for this: put a backslash ( \ ) before each of the following symbols (without spaces):
\ backslash
` inverted quote
* asterisk
_ underscore
{} keys¿?
[] square bracket
() parenthesis
# hashtag
+ plus
- hyphen
. point
! exclamation mark
It may happen that we have two symbols together that we want to cancel as in the case of the formula of an image: . In this case, having two symbols together, we must enter a backslash in front of the exclamation (to cancel the exclamation) and a backslash after the exclamation and in front of the bracket (to cancel the bracket).
\!\[Text](https://img.icons8.com/ios/68/61c3ac/markdown-filled.png)
TABLES🔗
The way to enter tables with Markdown language is with the vertical bar ( | ) as follows:
| Markdown | on | Nitoku |
| :---: | :---: | :---: |
| Sidebar | Point | Hyphen |
As we see, each row separates the cells with the vertical bar.
Tables also have two peculiarities. Firstly, the first row is the header of the board and it will be marked in another color as we see in the following example:
| Markdown | on | Nitoku |
|---|---|---|
| Sidebar | Point | Hyphen |
Secondly, in the second row we highlight how we want to align the text in the whole column, if we want the text to be aligned to the right (--- :), to the left (: ---) or to the center (: --- :). Thereby:
| Markdown | on | Nitoku |
| :--- | :---: | ---: |
| Sidebar | Point | Hyphen |
| Header | Asterisk | Hashtag |
Will render the following table 👇
| Markdown | on | Nitoku |
|---|---|---|
| Sidebar | Point | Hyphen |
| Header | Asterisk | Hashtag |
As we have seen in other tables of this document, they also support all the syntax of Markdown so we can use bold, italics, links and even put images inside them.
| Markdown | Effect |
|---|---|
| ICON / IMAGE | |
| GIF | |
| LINK | Nitoku |
PARAGRAPHS & LINE BREAKS🔗
To generate a new paragraph in Markdown we simply have to separate the text with a blank line (pressing intro twice).
To make leave more than one blank line between paragraphs or, simply, whenever we want to leave blanks include non-breaking space on your markdown text.