DEV Community

Sabrina Barros
Sabrina Barros

Posted on

O que é Markdown, e como ele pode melhorar o seu README no GitHub!

#markdown #github

Alt Text

O README no GitHub é uma parte essencial do seu repositório, onde você apresenta seu projeto ou organiza seu repositório!

E para formatar o seu arquivo README utilizamos a linguagem de marcação chamada Markdown. As possibilidades dessa linguagem incluem formatações de texto de forma fácil e útil, apesar de ser uma formatação simples contém o que há de mais essencial para você deixar seu texto bem construído e organizado, por exemplo: listas, tabelas, titulação, inserção de links e imagens, bloco de código, destaque, negrito, sublinhado, itálico etc...

Onde Markdown costuma ser usado?

No próprio GitHub além do já citado arquivo README.md, pull requests, issues e na wiki. Mas também em outras plataformas para escrever mensagens em fóruns ou rich text. Este artigo mesmo foi escrito e formatado em Markdown.

Como escrever em Markdown

A partir deste ponto eu vou te ensinar como executar essa linguagem na pratica passo a passo!

Primero vamos abrir um preview de Markdown, para que você possa acompanhar o resultado do seu código enquanto o executa.

  1. Abra o editor de código VSCode. Usarei ele como base nesse tutorial. (Clique aqui para baixar o VSCode caso você não o tenha instalado.)

  2. Crie um novo arquivo com o nome README.md, repare que .md é a extensão de um arquivo Markdown.

  3. Pressione CTRL/CMD + SHIFT + P .

  4. Isso fara com que uma janela se abra e nela você digitara Markdown, clique na extensão de nome *Markdown: Open Preview to the Side*.

Pronto! Agora sempre que quiser abrir sua preview é só dar o comando CTRL/CMD + K depois pressione V separadamente.

Agora vamos a prática!

Alt Text

A partir daqui vamos para as tags de formatação em Markdown, execute-os no seu arquivo ao mesmo tempo que os aprende para ver o resultado.

Titulação

Para você destacar títulos (como os títulos deste post por exemplo), utiliza-se #.


# Título 1  


## Título 2 


### Título 3 


#### Título 4 


##### Título 5 


###### Título 6
Enter fullscreen mode Exit fullscreen mode

Título 1

Título 2

Título 3

Título 4

Título 5
Título 6

Formatação

As vezes, existe mais de uma forma de se fazer a mesma coisa em Markdown.

Itálico


*Itálico*
Enter fullscreen mode Exit fullscreen mode 

_Itálico_
Enter fullscreen mode Exit fullscreen mode

Negrito


**Negrito**
Enter fullscreen mode Exit fullscreen mode 

__Negrito__
Enter fullscreen mode Exit fullscreen mode

Itálico e Negrito


***Italico e Negrito***
Enter fullscreen mode Exit fullscreen mode 

___Italico e Negrito___
Enter fullscreen mode Exit fullscreen mode

Riscado


~~Riscado~~
Enter fullscreen mode Exit fullscreen mode

Destaque


`Destaque`
Enter fullscreen mode Exit fullscreen mode

Repare que estou utilizando o acento invertido (è), e não o acento comum que utilizamos no dia a dia (é).

Links

Existem duas formas de se inserir links:

Com texto âncora.


[Texto](www.google.com)
Enter fullscreen mode Exit fullscreen mode

Ou apenas o link direto


<www.exemplo.com>
Enter fullscreen mode Exit fullscreen mode

Imagens

É parecido com inserir links.


![texto](www.caminhodaimagem.com)
Enter fullscreen mode Exit fullscreen mode

Resultado:

icon

Listas

Para criar listas não ordenadas é só utilizar - ou *.

  • E

  • Fica

  • Assim

E para listas ordenadas o bom e velho 1.

  1. Item

  2. Outro item

  3. Mais um item

Em ambos os casos se lembre de dar um espaço depois do ícone para o comando funcionar.

Blockquote

Caso você precise fazer uma citação ou comentário é só utilizar >.

E fica assim.

Pra continuar outro “paragrafo” como este no blockquote você precisa utilizar outro > no começo.

Bloco de código

Sabe os blocos de código legais que você estava vendo ao longo desse artigo? Se faz assim: 



```js  

Console.log(3 > 2) 

```

Onde esta o js você pode substituir por qualquer outra linguagem que você quer exemplificar.

Você pode substituir o acento invertido por ~ que também funciona da mesma forma.

Tasklist

Isso aqui, sabe?

boxpreview

Se faz assim:


[x] Fazer Rascunho do artigo
[ ] Revisar artigo
[ ] Publicar artigo
Enter fullscreen mode Exit fullscreen mode

Não esqueça do espaço entre os caracteres, quando completar sua tarefa é só colocar um x entre os colchetes.

Tabelas

No Markdown você literalmente tem que desenhar as tabelas.

| Para colunas.

- Para Divisórias de título.


Exemplo | Valor do exemplo 
--------- | ------ 
Exemplo 1 | R$ 10 
Exemplo 2 | R$ 8 
Exemplo 3 | R$ 7 
Exemplo 4 | R$ 8
Enter fullscreen mode Exit fullscreen mode

Fica assim:

Exemplo Valor do exemplo
Exemplo 1 R$ 10
Exemplo 2 R$ 8
Exemplo 3 R$ 7
Exemplo 4 R$ 8

Mas caso você goste de atalhos, recomendo este site que desenha tabelas em Markdown para você e é só copiar e colar!

Conclusão

Esses são os elementos mais basicos para quem esta conhecendo o Markdown e pretende utiliza-lo no dia a dia. Com isso você já consegue usar o melhor do Markdown nas suas plataformas preferidas, formatar seus textos, artigos e seus README’s.
Espero que tenha sido util para você!

Referencias

Alt Text

Top comments (4)

Collapse
 
pauloeliass profile image
Paulo Elias •

Muito bom! absorvi muita coisa vai ser minha fonte de consulta caso eu esqueça alguma coisa que eu não use tanto no dia a dia

Collapse
 
sabrinabarros profile image
Sabrina Barros •

Fico feliz por ser útil obg por ler <3

Collapse
 
afonsopacifer profile image
Afonso Pacifer •

Maravilhoso, ótima conteúdo para quem esta entrando nesse mundo se achar e já conseguir fazer bastante coisa <3

Collapse
 
sabrinabarros profile image
Sabrina Barros •

eee obrigado <3

Read next

wolzcodelife profile image

Understanding Mend Renovate's Pull Request Workflow

Joel Adewole -

konmaz profile image

GUI in GitHub Codespaces

Konstantinos Mazgaltzidis -

phukon profile image

How I write Commits like a pro

phukon -

codewithcaen profile image

Create static directory listings on GitHub Actions/Pages

CodeWithCaen -