DEV Community

Sabrina Barros
Sabrina Barros

Posted on • Edited on

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

#markdown #github

Markdown Icon.

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!

Primeiro 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 à 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

Às 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:

Foto de perfil de Sabrina Barros no GitHub.

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 da linha.



> Paragrafo.
> Outro paragrafo.
> Uau! Um terceito paragrafo.
Enter fullscreen mode Exit fullscreen mode

Paragrafo.
Outro paragrafo.
Uau! Um terceito paragrafo.

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 (crase) por ~ que também funciona da mesma forma.

Tasklist

Isso aqui, sabe?

Lista de tarefas contendo 3 itens, onde apenas o primeiro item está marcado como feito.

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 básicos para quem está conhecendo o Markdown e pretende utilizá-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 útil para você!

Referencias

Simbolo do Markdown: Letra M com uma seta apontando para baixo.

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

thuragan profile image

Enable WSL shell in GitHub Desktop

Alex M -

exein profile image

Pulsar preventing vulnerabilities #1 — polkit (CVE-2021–4034)

Exein -

hkhelil profile image

Ensuring Effective Helm Charts with Linting, Testing, and Diff Checks 🚀

Hamdi KHELIL -

gauraws profile image

Git Revert: A Safe Way to Remove Faulty Commits

Gaurav Singh -