What is Markdown

Headers

Quotes

Lists

Block Code

Horizontal Rules

Emphasis

Links

Images / Icons / Gifs

Skip Markdown

Tables

Paragraphs & Line Breaks

 

What is Markdown language?🔗

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". The markdwon is a very useful language if you publish constantly on the Internet.

 

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
-------------

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

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.

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.

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.

This is a header.🔗

  1. This is the first list item.
  2. 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

  • Car
  • Motorcycle
  • Plane
  • Car
  • Motorcycle
  • Plane
  • Car
  • Motorcycle
  • Plane

The ordered lists are obtained with numbers:

1.  Car
2.  Motorcycle
3.  Plane

  1. Car
  2. Motorcycle
  3. 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.

  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. 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

  • 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.

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.

* * *
***
*****
- - -
------
_ _ _







 

EMPHASIS🔗

The Markdown language uses asterisks and other symbols to emphasize (bold, italic, underlined and strikethrough):

 

MarkdownResult
*Italic*Italic
_Italic_Italic
*Bold*Bold
_Bold_Bold
***Italic and Bold***Italic and Bold
_Italic and Bold_Italic and Bold
++Underlined++Underlined
~~Strikethrough~~Strikethrough

 


 

LINKS🔗

Links can be made in two ways.

  1. Putting the URL directly: https://www.nitoku.com/
  2. 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/)

This is the effect:

Nitoku

MarkdownEffect
[Nitoku](https://www.nitoku.com/)Nitoku

 


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/)~~

Nitoku

Nitoku

Nitoku

Nitoku🔗

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:

![](https://i.imgur.com/qGD8Sjr.png)

Nos vale cualquier tipo de imagen que haya en la web y en un sitio seguro.

In the same way we can also add icons:

![](https://img.icons8.com/ios/68/61c3ac/markdown-filled.png) 

And gifs:

![](https://media.giphy.com/media/l4HodBpDmoMA5p9bG/giphy.gif)

 

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: ![Text](https://img.icons8.com/ios/68/61c3ac/markdown-filled.png). 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:

MarkdownonNitoku
SidebarPointHyphen

 

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 |
MarkdownonNitoku
SidebarPointHyphen
HeaderAsteriskHashtag

 

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.

 

MarkdownEffect
ICON / IMAGE
GIF
LINKNitoku

 


 

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 a line break and start a sentence on the next line but within the same paragraph, you will have to press the space bar twice and then press intro. In this way we would make a line break equivalent to a paragraph change but without double line spacing.

To make leave more than one blank line between paragraphs or, simply, whenever we want to leave blanks either aesthetically or practically the formula would be:

  

By putting this formula on a line, which means non-breaking space, we will convert it into a blank line.

 

Como hemos visto en el apartado de encabezados, utilizamos almohadillas (#) para resaltar un título o una frase. Al ser partes importantes del documento, hemos creído conveniente crear un enlace URL para cada encabezado de manera que podamos copiar este enlace y usarlo para crear un índice o menú que nos lleve directamente a dichos enlaces. Se puede ver un ejemplo en el menú lateral de esta mísma página donde están enlazados los titulares más importantes de la página para tener una navegación más cómoda y rápida. Es decir, con esta funcionalidad podemos crear enlaces que nos ayuden a saltar dentro de la misma página.

Para copiar el enlace sólo tenemos que pasar el ratón por el lado izquierdo de un encabezado y nos aparecerá un icono de enlace que podremos copiar.


Everything written in this document is written in Markdown language. You can see all the details by clicking on the edit button.🔗