Quick Markdown Course

[Clique aqui para ler em português]

Which is?

Markdown is a markup language, just like HTML. It is a way of writing in plain text, leaving notes on formatting.

Markdown is an open formatting system that makes writing and reading easier. With minimal coding, in addition to being easy, it is visually “cleaner”.

History

In 2004, John Gruber created the Markdown language in collaboration with Aaron Swartz in the syntax, seeking to enable structurally valid XHTML (or HTML) writing from simple texts.

Its main objective in terms of design is legibility, a characteristic that is normally affected in markup languages, such as Rich Text Format (RTF) or HTML, by the presence of “explicit” tags or formatting instructions. In Markdown, the formatting is much more subtle, it is inspired by the existing conventions to mark a simple text or email, despite being based on previous markup languages, such as setext, Textile and reStructuredText.

Gruber wrote a PerlMarkdown.pl script, which converts the marked text input into valid, well-formed XHTML or HTML and replaces the angle brackets ‘<’ ‘>’ and the ampersand ‘&’ with their corresponding character entity references. It can take on the role of an independent script, a plugin for Blosxom or a Movable Type, or a text filter for BBEdit.

Markdown has been implemented by others, for example, in a Perl module available in CPAN (Text :: Markdown) and in a variety of other programming languages. It is distributed under a BSD-style license and is included or available as a plugin for various content management systems.

Variations of the Markdown language are widely used by sites such as GitHub, Bitbucket, Reddit, Diaspora, Stack Exchange, OpenStreetMap and SourceForge to facilitate communication and discussion between users; it is also widely used in README files.

Creating a file

To create a markdown file, simply save it with the extension .md

Tools

To assist in the creation of markdown files there are a few, such as:

• StackEdit;
• Visual Studio Code;
• Typora;
• Dillinger;
• Etc…;

Using markdown

The markdown is converted to HTML, so if you already know HTML it is easier to absorb the content.

Comments

to create comments we can use the same syntax as html.

<!-- comments -->

Title

# H1
## H2
### H3
#### H4
##### H5
###### H6
<!-- Alternative to H1 and H2 -->
Alt-H1
======
Alt-H2
------

List

Cluttered list

To create an unordered list with the markdown we can use either *, or — or +, all have the same functionality, to create a sublist, just insert two spaces or a tab in the item, example:

* Red
* Green  
  * Green
  * Blue
    * Green 
    * Blue

Ordered list

For an ordered list add the numbers:

1.  Red
2.  Blue
3.  Green

Checkbox list

For a checklist add the square brackets, to mark it add an X, example:

- [ ] Red
- [x] Blue
- [x] Green

Link

To create a link [text to be displayed] (link, “title”).

[Google](https://www.google.com,  "Site do Google")

It is also possible to create link references, example:

[referência de texto][Arbitrary case-insensitive reference text]
[usando referência numérica][1]
<!-- Referencias -->
[arbitrary case-insensitive reference text]: https://link
[1]: http://link "título"

To use email use, this creates the mailto: automatically, but it is also possible to use the normal abbreviation [text to be displayed] (link, “title”).

<[e-mail]>

Images

To add images or gif, use:

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

We can also add reference to the images, example:

Reference-style:
![alt text][logo]
<!-- Referencias -->
[logo]: https://github.com/adam-p/markdown-here/raw/master/src/common/images/icon48.png "Logo Title Text 2"

If you want to customize the height or width of the image use html directly.

<img src="https://media.giphy.com/media/lPoxtQlcX30doRbHTN/giphy.gif" width="42" height="42">

Quote

to add quotes add the greater than sign (>), example:

> Texto usando citação

Using codes

Using a back quote back accent, the text will be marked, example:

`code`

To use large codes use 3 backpacks 3 back accent, this will cause it to be wrapped between a <pre> tag and will preserve spaces and line breaks, some converters adding the language type make the code more readable, example:

` ` `java
public static void main(String[] args) {
//TODO
}
` ` `

Text Style

Markdown has several ways to adjust the text.

Bold text

To use bold text use two asterisks (**).

**texto negrito**

Italic text

To use italic text use an underscore (_) or just an asterisk (*).

_texto itálico_
*texto itálico*

Crossed out text

To use crossed out text use two tilde (~~).

~~texto riscado~~

Superscript text

To use superscript text it is necessary to use the <sup> tag.

Texto <sup>sobrescrito</sup>

Subscribed text

To use subscript text it is necessary to use the <sub> tag.

Texto <sub>subscrito</sub>

Keyboard input text

To use keyboard-style text use the <kdb> tag

<kbd>ALT + F4</kbd>

Marked Text

To mark a text we can use the <mark> tag

Texto <mark>marcado</mark>

Horizontal line

To create a horizontal line use 3 asterisks or a hyphen or underscore.

---
***
___

Centering items

To center items in the markdown it is necessary to use the <center> tag.

<center>Item centralizado</center>

Table

Choose column headings and use | to delimit the columns. Then use a hyphen — in the second line to indicate that the column headings are above, using | to delimit columns.

To specify the type of alignment you want to have in the tables, use: next to the horizontal hyphen field — -, in the second line of your table. See below:

• Left aligned: use: on the left side (standard alignment);
• Right aligned: use: on the right side;
• Centralized: use: on both sides.

| Alinhado a esquerda | Centralizado | Alinhado a direita |
| :------------------ | :----------: | -----------------: |
| Valor               | Valor        | Valor              |
| Valor               | Valor        | Valor              |
| Valor               | Valor        | Valor              |

Extras

These items below, only work in some places / tools.

Progress bar

The HTML itself has a progress tag and like the markdown converted to HTML, so we can use a <progress> tag to create a progress bar.

Barra de progresso <progress value="32" max="100"></progress>

Tag Details

The <details> tag is an html tag that allows you to create information and hide it until it is clicked, example:

<details>
<summary>Clique aqui para exibir</summary>
texto oculto
</details>

Using mathematical formulas

to use mathematical formulas use the dollar ($), example.

$-b \pm \sqrt{b² — 4ac} \over 2a$

Emoji

To use emojis, just use the codes:

:bowtie:

For more codes visit the Emoji cheat sheet

---

Thanks for reading!

If you have any questions, complaints or tips, you can leave them here in the comments. I will be happy to answer!

😊😊 See you later! 😊😊

Comments

[Arpit]

Great :)

[Walter Nascimento]

;)