✍ Como Deixar seus Conteúdos Mais Bonitos e Didáticos - Tudo Sobre Markdown
Aviso
Esse conteúdo é uma tradução da documentação oficial, porém, tomei a liberdade de adicionar minha didática e simplificar para os DEVS.
O que é Markdown?
Você provavelmente já utilizou o Microsoft Word na sua vida ou algum editor de texto parecido como LibreOffice Writer. O que esses editores te permitem fazer? Adicionar títulos, imagens, negrito, itálico e etc.
Agora, imagine que exista uma linguagem universal que quase todos programas de edição de texto entendem e que você pode usar aqui no TabNews para enriquecer seu texto?
Bem-vindo ao mundo do Markdown. Nesse guia eu vou te mostrar como utilizar cada pedacinho da sintaxe dessa linguagem de formatação de textos.
A sintaxe básica do Markdown é muito simples e consiste em algumas regras básicas que você pode seguir para criar seus próprios textos em Markdown. Aqui estão as principais sintaxes que você precisa conhecer:
Títulos
Para criar títulos em Markdown, basta adicionar um ou mais # (hashtags) antes do seu título. O número de hashtags que você adiciona determina o nível do título. Por exemplo:
Tal como no HTML, temos 6 tipos de títulos diferentes, basta ir adicionando uma hashtag a mais para diminuir o nível do cabeçalho.
Markdown:
# Título 1
## Título 2
### Título 3
#### Título 4
##### Título 5
###### Título 6
Resultado:
Título 1
Título 2
Título 3
Título 4
Título 5
Título 6
Dica: sempre dê uma quebra de linha no seu editor de código antes e após o título.
## Parágrafos
Para criar parágrafos, basta digitar o texto em uma nova linha, como este.
Dica: nunca use espaços ou tab antes do parágrafo, dessa forma, seu texto vai ficar mais legível e bonito.
Quebra de Linha
Use a tag <br> para criar quebras de linha.
Exemplo:
Linha 1
<br>
Linha 2
Gera o resultado:
Linha 1
Linha 2
Formatação de Texto
Negrito
Para colocar o texto em negrito, basta envolvê-lo com dois asteriscos ** ou dois underlines __. Por exemplo:
Isto está em negrito: **estou em negrito**.
Isto está em negrito: __estou em negrito__.
Isto está em negrito: estou em negrito.
Isto está em negrito: estou em negrito.
Itálico
Para colocar o texto em negrito, basta envolvê-lo com um *, ou um underline _. Por exemplo:
Isto está em itálico: *estou em itálico*.
Isto está em itálico: _estou em itálico_.
Isto está em itálico: estou em itálico.
Isto está em itálico: estou em itálico.
Negrito e Itálico
Segue a mesma regra de ambos, porém juntos, ou seja, três *** ou ___
Isto está ***negrito e itálico***
Isto está ___negrito e itálico___
Isto está negrito e itálico
Isto está negrito e itálico
Citações
Adicione > no começo de cada linha da sua citação.
> Quando vires um homem bom, tenta imitá-lo; quando vires um homem mau, examina-te a ti mesmo.
> Confúcio
Gera o resultado:
Quando vires um homem bom, tenta imitá-lo; quando vires um homem mau, examina-te a ti mesmo.
Confúcio
Listas
Listas Ordenadas
São as listas que têm uma ordem crescente de números. Use a seguinte sintaxe:
Top Linguagens de Programação:
1. Javascript
2. Python
3. PHP
...
3219451531. PHP
Gera o código:
Top Linguagens de Programação:
- JavaScript
- Python
- PHP
...
3219451531. PHP
Código
Os blocos de código não aceitam nenhuma das outras funções do markdown, é como uma string literal que não será interpretada pelo site.
Use:
` ` `
Insira seu código aqui
(Porém, retire os espaços entre os acentos, eu não posso pois iria causar um bug aqui porque isto já é um bloco de código).
` ` `
## Linhas Horizontais
Use uma série de - ou _ em sequência para criar uma linha horizontal:
Texto bacana
-----------------------------
Outro texto bacana
Texto supimpa
_____________________________
Outro texto supimpa
Resultado:
Texto bacana
Outro texto bacana
Texto supimpa
Outro texto supimpa
Links
Link Comum
Use [] e insira seu link dentro dos colchetes.
Link do GitHub do Lucas Bezerra: [https://github.com/bezerra-lucas]
Resultado:
Link do GitHub do Lucas Bezerra: [https://github.com/bezerra-lucas]
Link Embutido no Texto
Use [] e insira seu texto dentro dos colchetes, após isso, insira seu link dentro dos ().
Link do GitHub do [Lucas Bezerra](https://github.com/bezerra-lucas)
Resultado:
Link do GitHub do Lucas Bezerra
## Imagens
Para inserir uma imagem, use ![](), coloque um texto alt dentro dos [] e o link para imagem no ().
Código:
Exemplo:
Considerações Finais
Espero que vocês tenham curtido este artigo aqui no TabNews e que seja útil para que vocês criem conteúdo cada vez mais bonito e agradável para nossa querida plataforma. Agradeço a atenção de todos e me desponho a tirar dúvidas aqui nos comentários dessa publicação!
Feito por: Lucas Bezerra
