DEV Community

const Mel
const Mel

Posted on

Markdown

Apesar de ser algo relativamente simples, o markdown ainda é um mistério para muitas pessoas, fazendo com que tenham dificuldades em criar um READ ME tanto para projetos quanto para o próprio perfil no GitHub. Estarei criando este tutorial básico para falar algumas das coisas que é possível fazer com o markdown.

Começando pelos títulos! Podemos usar tanto # para indicar a importância dos títulos quanto as próprias tags de h1(...). Assim como a tag, quanto mais # você adiciona no seu título, menor vai ser a importância dele.

Exemplo de título com '#'

Exemplo de títulos com '##'

Já para os parágrafos a lógica é a mesma, podemos apenas escrever sem nenhuma tag no nosso arquivo READ ME ou para quem preferir, podemos utilizar a tag p.

Ainda falando dos parágrafos, temos alguns símbolos que mudam o estilo da fonte para itálico ou negrito. É possível __ __ para negrito e _ _ para itálico.

Exemplo de __texto__ em negrito e _texto_ em itálico.

E sobre as imagens? Também temos duas formas de inserir imagens nos nossos arquivos. O primeiro método é utilizar ![]() e o segundo, de forma óbiva, a tag img. Vamos por partes, dentro das chaves [] Você coloca o título que gostaria de dar para sua imagem e dentro dos parênteses () você cola o endereço da imagem que você deseja, ficando mais ou menos assim: ![imagem de exemplo](link da imagem).

Também podemos falar das listas e tabelas. Para fazer uma lista é simples, só é necessário colocar * em forma de coluna, já para a tabela, precisamos montar sua estrutura de forma manual.

Exemplos:

Lista de compras: 
* Morango
* Banana
* Leite
Enter fullscreen mode Exit fullscreen mode

Nome   | Idade | Sexo
-------|-------|-----
Melyssa| 19    | F
Enter fullscreen mode Exit fullscreen mode

Caso você queira mudar a centralização da sua tabela, você deve usar o ! na direção que deseja: !---- para centralizar para a esquerda ----! para a direita e !----! para o meio.

E se eu quiser escrever um bloco de código? Também é possível, utilizando ou apenas uma crase ou crase tripla.

Image description

Qual o sentido de utilizar tags?

Quando utilizamos as tags temos acesso a algumas propriedades que o markdown puro não nos fornece, como por exemplo, quando utilizamos a tag img podemos definir o width e o height da imagem de forma manual com css inline.

Image description

Também é possível usar align="center" em divs, tags a e etc. O markdown é cheio de coisas que podemos aproveitar para deixar todo o nosso projeto mais bonito! Espero que tenham gostado e até a próxima <3

Bônus - Repositórios para utilizar no markdown

https://github.com/anuraghazra/github-readme-stats/blob/master/themes/README.md
https://github.com/antonkomarev/github-profile-views-counter
https://docs.pipz.com/central-de-ajuda/learning-center/guia-basico-de-markdown#open

Top comments (0)