MARKDOWN - README.md INCRÍVEL PARA SEUS PROJETOS

Alexandre Rosseto
4 min readAug 9, 2020

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.

Apresente seu projeto de uma maneira incrível e se destaque!
Template disponível no GitHub

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.

Visual Studio Code — Instalando Add-On

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”.

Visual Studio Code — Rodapé — Canto Direito

Abrirá uma caixa no cabeçalho do arquivo criado onde você vai selecionar

Visual Studio Code — Seleção Flutuante

Agora tecle Crtl+Shift+P e selecione o Add-On que você acabou de instalar.

Visual Studio Code — Command Palette

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.

Visual Studio Code — Visualização do arquivo MD

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.

--

--

Alexandre Rosseto

Senior Tech Manager specialized in Java with experience in software factories and consultancies. LinkedIn: https://www.linkedin.com/in/alexandrerosseto