[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”).
<email@email.com>
Images
To add images or gif, use:
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! 😊😊
Top comments (2)
Great :)
;)