Tutorial de Markdown
Explicação
Como esse é a primeira publicação que eu vou fazer aqui, acho muito justo ir aprendendo e passando um pouco do conhecimento que eu estou absorvendo sobre o Markdown durante essa minha jornada!!
Sumário
- Títulos
- Textos
- Separador
- Tirar a função dos símbolos
- Citações
- Links
- Listas
- Blocos de código
- Imagens
- Tabelas
- Lista de tarefas
- Mensagem final
Título
No markdown, o símbolo de hashtag # é usado para criar títulos. Quanto mais hashtags você colocar, menor será o título. Você atinge o menor título usando 6 hashtags
Exemplos:
Título 1 (1 #)
Título 2 (2 #)
Título 3 (3 #)
E assim por diante...
Código:
# Título 1 (1 #)
## Título 2 (2 #)
### Título 3 (3 #)
Textos
Itálico:
Para colocar um texto em itálico, basta você usar um asterisco * ou o símbolo de sublinhado _ antes do texto que você deseja tornar itálico, e um logo depois, como se fossem aspas ou parênteses
Código:
*Exemplo* ou _Exemplo_
Bold:
Para colocar um texto em bold o processo é exatamente igual ao itálico, porém, dessa vez você coloca dois símbolos antes e dois depois, sejam eles ** ou __
Código:
**Exemplo** ou __Exemplo__
Linha cortando:
Para cortar um texto no meio você utiliza dois sinais tils ~~
Código:
~~Exemplo~~
Separador
Para criar separadores no seu documento, você só precisa escrever 3 sinais de menos --- ou 3 sinais de sublinhados ___
Exemplo:
## Sessão 1
--- ou ___
## Sessão 2
Tirando a função dos símbolos
Às vezes, nós queremos mostrar alguns símbolos como *, ~ e -, porém esses carácteres têm funções especiais e para se tornarem carácteres normais, basta você colocar uma barra invertida \ antes de usá-los
Exemplo:
Sem a barra: Texto
Com a barra: *Texto*
Código:
**Sem** a barra: *Texto*
**Com** a barra: \*Texto*
Citações
Para criar citações, basta inserir o símbolo de maior > no começo da linha
Citações tem essa forma!!
E você pode adicionais mais de uma linha também
Código:
> Citações tem essa forma!!
> E você pode adicionais mais de uma linha também
Links
Para criar um link, é necessário usar colchetes [] para o texto que terá o link, e parênteses () para o link mesmo
Exemplo De Link
Títulos nos links
O título no link, trata-se daquele pequeno retângulo que aparece quando passamos o mouse por cima do título, teste aqui!!
Para fazer isso, basta dar um espaço do link e escrever o que você deseja entre aspas
Código:
Link sem título: [Exemplo De Link](https://www.youtube.com/watch?v=bYBVCxVwrdY)
Link com título: [teste aqui!!](https://www.youtube.com/watch?v=bYBVCxVwrdY "Testando...")
Listas
Não ordenadas
Para se criar uma lista não ordenada, basta escrever um asterisco * no começo da linha, assim como nas citações. Importante ressaltar que você precisa dar um espaço entre o asterisco e a palavra para que funcione!!
- Atenção
- Se você colocar o asterisco antes de alguma palavra, ele tem outras propriedades
- Porém, se você colocar ele no começo da linha, ele vira uma lista!!
Código:
* **Atenção**
* Se você colocar o asterisco antes de alguma palavra, ele tem outras *propriedades*
* Porém, se você colocar ele no **começo da linha**, ele vira uma **lista**!!
Ordenadas
O conceito vai ser o mesmo em relação às listas não ordenadas, porém, no começo da linha, você vai usar a combinação 1.
- Assim
- Você
- Cria
- Uma
- Lista
- Ordenada!!
Código:
1. Assim
2. Você
3. Cria
4. Uma
5. Lista
6. **Ordenada**!!
Indentação
Para se criar uma indentação, basta apertar o Tab, bem conhecido pelos programadores :D
- Exemplo de lista
- Com indentação
- E misturando os dois tipos de listas!!
- Os símbolos mudam
- Quando são indentados
- E você pode indentar mais
- E menos!!
- Quando são indentados
Código:
1. Exemplo de lista
* Com indentação
* E misturando os dois tipos de listas!!
* Os símbolos mudam
1. Quando são indentados
* E você pode indentar mais
2. E menos!!
Blocos de código
Para utilizar essa ferramenta tão bonita de se ver (eu pelo menos adoro!!), basta você usar o símbolo da crase `
<p> E dentro dela, você pode escrever seus códigos!! <\p>
Código:
`<p> E dentro dela, você pode escrever seus códigos!! <\p>`
Sistema do Github
Como muitos de vocês provavelmente estão acostumados, no Github você consegue especificar a linguagem na qual você está escrevendo, deixando tudo com uma carinha mais confortável e consequentemente um entedimento maior para o leitor. Aqui não é diferente, então para se usar essa forma mais rebuscada de blocos de código, ao invés de usar só uma crase `, você utiliza 3 crases para abrir e mais 3 pra fechar!!
Para conseguir definir a linguagem que você está usando, basta escrever o nome logo após as 3 crases
Exemplo:
```javascript
function helloWord(){
console.log("Hello, world!!);
}
```
function helloWord(){
console.log("Hello, world!!);
}
Imagens
Para conseguir inserir uma imagem, o processo é bem parecido com o dos links, porém, antes dos colchetes [] e dos parêntesis (), é preciso inserir um ponto de exclamação !
Código:
Tabelas
Aqui nós conseguimos fazer tabelas também, elas são até que simples, porém demoradas pra fazer (na minha opinião), a menos que exista um jeito mais fácil!!
| Letras | Números |
|---|---|
| a | 1 |
| b | 2 |
| c | 3 |
Código:
| Letras | Números |
| ------ | ------- |
| a | 1 |
| b | 2 |
| c | 3 |
Você também pode usar assim (mas do outro jeito eu acho mais bonito):
| Letras | Números
| - | -
a | 1
b | 2
c | 3
O resultado das duas é o mesmo, mas na questão do código eu prefiro a primeira!!
Lista de tarefas
Para criar uma lista de tarefas, o processo é o mesmo de criar uma lista qualquer, porém, logo após o asterisco * ou o conjunto 1., você utiliza colchetes [] e se a tarefa estiver concluída, basta colocar a letra x dentro dos colchetes. Não esqueça de dar o nome da tarefa, ele vem logo depois dos colchetes!!
- Tarefa concluída
- Tarefa não concluída :c
Código:
* [x] Tarefa concluída
* [ ] Tarefa não concluída :c
Mensagem final
Espero que essa publicação tenha te ajudado a entender pelo menos um pouco mais sobre o markdown, ela com certeza me ajudou muito!! Antes de começar a escrever esse post eu não sabia nadinha, e agora já estou capacitado pra escrever várias coisinhas :D
Caso você sinta que faltou alguma coisa, o espaço dos comentários é todo seu!!