MARKDOWN - README.md INCRÍVEL PARA SEUS PROJETOS
Este artigo apresentará a estrutura de código para arquivos Markdown e uma sugestão, como template, para deixar qualquer projeto pessoal bem apresentável para seu público e, potencialmente, Headhunters.
REQUERIMENTO: Nenhum.
Alternative language: See this article in English.
O QUE EU VOU APRENDER
Escrever um Markdown utilizando seus principais componentes para destacar seus projetos e, ainda, um template incrível para ver o que aprendeu. Verá:
- Editar e pré-visualizar um arquivo Markdown (MD)
- Formatação de texto (itálico, negrito, título, subtítulo)
- Utilizar links
- Inserir citações
- Uso de listas, enumerados e lista de tarefas
- Como adicionar imagens incluindo GIFs
- Tabelas
- Inserir um código inline ou em bloco
PRECISO DE UM TEMPLATE PARA AGILIZAR
Sem problemas! Se você precisa de um template para agilizar seu lado, preparei este para te facilitar, mas recomendo que busque este aprendizado depois. Clique aqui.
O QUE É O MARKDOWN
Trata-se de uma linguagem de marcação, assim como HTML e serve basicamente para estilizarmos texto na web. Inclusive algumas tags do HTML também funcionam.
EDITAR E PRÉ-VISUALIZAR O MARKDOWN
Os arquivos MDs podem ser editados em qualquer editar de texto, até mesmo em um Bloco de Notas (notepad) do Windows. No entanto, vou recomendar o uso do Visual Studio Code porque ele possui um Add-On muito útil para visualizar o que está sendo feito em tempo de escrita.
- Baixe o VS Code
- Siga os passos de instalação
Com o VS Code aberto, vá em Extensions, depois digite “Markdown” e escolha a extensão “Markdown All in One”. Em seguida, clique no botão verde Install, como mostra na imagem abaixo.
Para criar um arquivo, vá em File -> New File (Ctrl+N), depois clique no rodapé no canto inferior direito na linha roxa, conforme imagem abaixo onde provavelmente estará escrito “Plain Text”.
Abrirá uma caixa no cabeçalho do arquivo criado onde você vai selecionar
Agora tecle Crtl+Shift+P e selecione o Add-On que você acabou de instalar.
Depois de fazer isso, você terá a tela dividida entre o seu código markdown e a pré-visualização de como ficará após ser publicado no GitHub, por exemplo.
FORMATAÇÃO DE TEXTO
Cabeçalhos (HEADER)
Formatação e Ênfase
LINKS
CITAÇÕES
LISTAS, ENUMERADOS E LISTA DE TAREFAS
Para fazer a lista de tarefas em HTML ocuparia muito espaço, então apenas a lista será mostrada.
IMAGENS
Em markdown: ![](caminho da imagem)
No entanto, não é possível redimensionar o tamanho da imagem.
Em HTML: <img src=”caminho da imagem”>
Podemos usar os atributos height e width para alterar o tamanho da imagem.
TABELAS
| Topo A | Topo B | Topo C || ------------- |:-------------:| ---------:|| col 1 | col 2 | $1600 || col 1 | col 2 | $12 || col 1 | col 2 | $1 |
CÓDIGO INLINE E EM BLOCOS
Essa dica vale inclusive para o Medium.