Como fazer um README.md BONITÃO

Raul Esteves
3 min readAug 29, 2018

--

Neste artigo mostrarei como fazer um README.md bacanudo para aquele projeto que você tanto se orgulha. Chega de colocar uns textinhos sem jeito.
Falaremos um pouco sobre markdown e focaremos em formatação, imagens, GIFs, links, listas, quotes, tasklists e código, tudo isso no nosso amigão, o README.md.

Ok, é bacana sabermos que o README.md tendo a extensão .md é um arquivo markdown, e o que é isso? Uma linguagem de marcação, assim como HTML e serve basicamente para estilizarmos texto na web. Falando no HTML algumas tags também funcionam, veremos adiante.

Sintaxe com seu equivalente em HTML (caso haja):

Header (equivalente aos <h1><h2><h3>)

Ênfase (equivalente ao negrito <b>, itálico <i> e riscado <strike>)

Lista Ordenada (equivalente ao <ol>)

Lista Não Ordenada (equivalente ao <ul>)

Links (equivalente ao <a>)

Quotes (equivalente ao <blockquote>)

Tasklists

Código

Tabelas

Em markdown temos que basicamente desenhar a tabela, porém existe um gerador de tabelas que facilita a nossa vida: gerador
Basta copiar o que o gerador criar e colar no README.md.

Em HTML usamos a nossa conhecida <table>:

Imagens e Gifs

Ensinarei duas maneiras, a maneira “espertinha” (e que eu não recomendo tanto) e a maneira mais “correta”. Faça como achar melhor.

Primeiro a maneira “espertinha”. Vamos em New Issue e jogamos a imagem lá, o GitHub hospeda e já converte em um link certinho, basta copiarmos e jogarmos no README.md, se liga só:

E agora uma maneira mais controlada. Tendo a imagem que queremos em um diretório do nosso repositório, basta usar a seguinte sintaxe:

Em markdown: ![](caminho até a imagem)

Em HTML: <img src=”caminho até a imagem”>
Com a tag HTML também podemos usar os atributos height e width para alterar o tamanho :D

Ambas as maneiras funcionam com links externos, vamos a alguns exemplos de sintaxe:

Caso você esteja atrás de um template, existem alguns bem bacanas, seguem alguns links:

(Este abaixo tem inclusive em inglês, português e espanhol:
https://github.com/dbader/readme-template

Bom, é isso. Espero ter ajudado, e até a próxima :D
(se curtiu esmaga essa palminha aí ;b)

--

--