Desvendando os Segredos do Markdown: Guia Prático para Formatação de Texto na Web

Tempo de leitura: 5 minutos

Desvendando os Segredos do Markdown: Guia Prático para Formatação de Texto na Web

Markdown é uma linguagem de marcação leve criada por John Gruber e Aaron Swartz. Ela foi desenvolvida para proporcionar uma forma fácil de formatar texto na web, sem a complexidade do HTML. Markdown é amplamente utilizado em plataformas como GitHub, Reddit e Stack Overflow. Vamos explorar como usar alguns dos recursos mencionados:

Adicionar Markdown ao Texto:

Utilize o caractere # para criar títulos, como # Título para um título de primeiro nível.

Negrito

Use **negrito** para que o texto fique em negrito: negrito

Itálico

Use *itálico* para que o texto fique em itálico: italico

No Markdown, os itens podem ser organizados em listas ordenadas e não ordenadas.

Listas não ordenadas

Para criar uma lista não ordenada, adicione travessões -, asteriscos * ou sinais de mais + na frente dos itens de cada linha.

Usando: -, + ou *

Você terá:

  • item 1
  • item 2
  • item 3

Recue um ou mais itens para criar uma lista aninhada.

- Primeiro item
- Segundo item
- Terceiro item
  - Item recuado
  - Item recuado
- Quarto item

Ficará assim:

  • Primeiro item
  • Segundo item
  • Terceiro item
    • Item recuado
    • Item recuado
  • Quarto item

Listas ordenadas Para criar uma lista ordenada, adicione números seguidos de pontos.

1. 🌡 Pré-aqueça o forno a 325°F
2. 🍪 coloque a massa de biscoito no forno
3. ⏰ Asse por 15 minutos

Os números não precisam estar em ordem numérica, mas a lista deve começar com o número um.

ficará parecido com:

  1. 🌡 Pré-aqueça o forno a 325°F
  2. 🍪 coloque a massa de biscoito no forno
  3. ⏰ Asse por 15 minutos

Cabeçalhos

Utilize # para cabeçalhos de diferentes níveis.

Exemplo:
# nivel 1
## nivel 2
### nivel 3

Você terá o seguinte resultado:

nivel 1

nivel 2

nivel 3

Citações em Bloco:

Inicie com > para criar uma citação em bloco.

Exemplo:
> É um prazer ter você como leitor no meu blog! Agradeço sinceramente pela sua visita e espero que tenha encontrado conteúdo interessante e útil. Se houver algum tópico específico que você gostaria de ver abordado ou se tiver alguma dúvida, não hesite em compartilhar. Estou sempre buscando fornecer informações relevantes e envolventes sobre programação, tecnologia e outros temas relacionados. Fique à vontade para explorar mais conteúdo e, caso tenha feedback, estou aberto a ouvir. Obrigado novamente por fazer parte da comunidade do blog!

Resultado:

É um prazer ter você como leitor no meu blog! Agradeço sinceramente pela sua visita e espero que tenha encontrado conteúdo interessante e útil. Se houver algum tópico específico que você gostaria de ver abordado ou se tiver alguma dúvida, não hesite em compartilhar. Estou sempre buscando fornecer informações relevantes e envolventes sobre programação, tecnologia e outros temas relacionados. Fique à vontade para explorar mais conteúdo e, caso tenha feedback, estou aberto a ouvir. Obrigado novamente por fazer parte da comunidade do blog!

Citações em bloco

Aspas indicam que o texto incluído é uma citação estendida. Eles também podem ser usados ​​para chamar a atenção para uma citação instigante. Qualquer citação com 50 palavras ou mais deve ser formatada como citação em bloco.

Uso Básico Para criar um bloco de código básico, envolva o código com três crases ( ```):

```
<p>Obrigado!</p>
```

Realce de sintaxe

Opcionalmente, uma linguagem de programação ou formatação pode ser especificado para um bloco de código para permitir o realce de sintaxe. Isso pode ser feito anexando a linguagem as crases iniciais:

```
console.log('Olá mundo');
```

O resultado ficará assim:

console.log('Olá mundo');

Imagens:

![Texto Alternativo](URL da Imagem) para adicionar imagens.

Links:

[Texto do Link](URL do Link) para criar links.

Imagens que Também são Links:

[![Texto Alternativo](URL da Imagem)](URL do Link) para imagens que são links.

Linha de Régua Horizontal: Utilize três hífens (---) para criar uma linha de régua horizontal.

Quebra de Linha:

Quebra de Linha: Pule uma linha.

Caractere Sublinhado:

Não é diretamente suportado, mas pode ser simulado com HTML <u>texto</u>.

Resultado: texto

Tabelas

Uma tabela é uma organização de dados em linhas e colunas.

Para adicionar uma tabela no Markdown, use a linha vertical | para separar cada coluna e use três ou mais traços --- para criar o cabeçalho de cada coluna. Uma linha vertical também deve ser adicionada em cada extremidade da linha.

| Mês       | Poupança |
| ---------------- | ------ |   
| Janeiro   | R$  120,00     |
| Fevereiro | R$  60,00      |
| Março     | R$  2.320,00     |

Ficará semelhante a:

Mês Poupança
Janeiro R$ 120,00
Fevereiro R$ 60,00
Março R$ 2.320,00

Alinhamento de texto

Alinhe o texto nas colunas à esquerda, à direita ou ao centro adicionando dois pontos : à esquerda, à direita ou em ambos os lados dos traços --- na linha do cabeçalho.

| Mês       | Poupança |
| :---------------- | :------ |   
| Janeiro   | R$  120,00     |
| Fevereiro | R$  60,00      |
| Março     | R$  2.320,00     |

Ficará semelhante a:

Mês Poupança
Janeiro R$ 120,00
Fevereiro R$ 60,00
Março R$ 2.320,00
  • :-- significa que a coluna está alinhada à esquerda.
  • --: significa que a coluna está alinhada à direita.
  • :-: significa que a coluna está alinhada ao centro.

Estes são exemplos básicos de formatação em Markdown. É uma ferramenta versátil para criar conteúdo web de forma rápida e simples.


Publicidade

📢 Quer ficar por dentro de todas as novidades do nosso blog? Não perca os últimos artigos, dicas valiosas e informações relevantes!

Junte-se a nós nas redes sociais para receber em primeira mão:

  • Artigos exclusivos;
  • Dicas práticas;
  • Ofertas especiais e descontos exclusivos para nossos seguidores.

Não vamos inundar sua caixa de entrada com newsletters! Simplesmente nos siga em uma de nossas redes sociais para garantir que você não perca nenhum conteúdo interessante. Estamos ansiosos para tê-lo(a) conosco! 🚀

Cristiano Ribeiro Braga
Autor: Cristiano Ribeiro Braga
Projetos, opinião, tecnologia e muito mais
comentários gerenciados por Disqus