Aprenda a escrever textos com Markdown
Markdown é uma ferramenta de conversão de texto para HTML. Com markdown é possível marcar títulos, listas, tabelas, taragrafos, códigos e muito mais de forma limpa e legível.
Última atualização em: | 9284 Visualizações
Markdown é uma ferramenta de conversão de texto para HTML. Com markdown é possível marcar títulos, listas, tabelas, taragrafos, códigos e muito mais de forma limpa e legível.
Se quiser saber mais sobre o que é markdown e onde utilizar, criamos este outro post aqui no Receitas de Código para explicar o que é markdown.
Neste post vamos te ensinar como escrever em Markdown.
Como escrever Títulos (<h1>
a <h6>
)
Os títulos são bastante utilizados e importantes para trabalhar com SEO em suas páginas. Para marcar os título, você deve utilizar #
, onde a quantidade de vezes que utilizar #
vai representar o nível do título.
Veja o exemplo:
# Título nível 1
## Título nível 2
### Título nível 3
#### Título nível 4
##### Título nível 5
###### Título nível 6
O resultado após a conversão será:
<h1>Título nível 1</h1>
<h2>Título nível 2</h2>
<h3>Título nível 3</h3>
<h4>Título nível 4</h4>
<h5>Título nível 5</h5>
<h6>Título nível 6</h6>
Você também pode escrever títulos de nível 01 (h1
) e nível 02 (h2
) da seguinte maneira:
Título de nível 1
=========
Título de nível 2
----------------
O resultado será:
<h1>Título nível 1</h1>
<h2>Título nível 2</h2>
Parágrafos e quebras de linha (<p>
e <br />
)
Para criar novos paragrafos basta inserir uma linha de texto qualquer. Por exemplo:
Este aqui é um paragrafo
O resultado após o parse será:
<p>Este aqui é um paragrafo</p>
Mas se quiser inserir uma quebra de linha pode utilizar um Enter, veja:
Este aqui é um paragrafo.
Este aqui é um paragrafo com quebra de linha.
O resultado será:
<p>Este aqui é um paragrafo.<br />
Este aqui é um paragrafo com quebra de linha.</p>
E ainda pode criar quantos paragrafos quiser, para isso utilize uma linha em branco entre as linhas. Exemplo:
Este aqui é um paragrafo.
Este aqui é o paragrafo 2.
O resultado será:
<p>Este aqui é um paragrafo.</p>
<p>Este aqui é o paragrafo 2.</p>
Links (<a>
)
Para criar um link em meio ao seu texto, basta utilizar a expressão [descrição](link)
, veja:
Esse o [link para o Receitas de Código](https://receitasdecodigo.com.br "Receitas de Código")
O resultado será:
<p>Esse o <a href="https://receitasdecodigo.com.br" title="Receitas de Código">link para o Receitas de Código</a></p>
Note, o que está dentro do colchetes irá virar um link, o endereço para o link vem dentro de parênteses, e se utilizar ao final do endereço entre
"
(parênteses) qualquer texto este será o title para seu link, e está é uma informação opcional.
Ainda pode utilizar links de maneira mais organizada, o exemplo abaixo demonstra como funciona:
A [Garbo Software][1] criou o site do [Receitas de Código][2]
[1]: http://www.garbosoftware.com.br "Site da Garbo Software"
[2]: http://receitasdecodigo.com.br "Site do Receitas de Código"
O resultado para este exemplo será:
<p>A <a href="http://www.garbosoftware.com.br" title="Site da Garbo Software">Garbo Software</a> criou o site do <a href="http://receitasdecodigo.com.br" title="Site do Receitas de Código">Receitas de Código</a></p>
Itálico e Negrito (<em>
, <strong>
)
Pra escrever itálico ou negrito em qualquer texto, basta adicionar ao inicio e ao final do texto a marcação *
para itálico ou **
para negrito.
Veja o exemplo mostrado:
*Texto em itálico* ou **texto em negrito**.
O resultado para esta expressão será:
<em>Texto em itálico</em> ou <strong>texto em negrito</strong>.
Se preferir você ainda pode utilizar o caractere _
no lugar de *
, da mesma forma, veja:
_Texto em itálico_ ou __texto em negrito__.
O resultado será o mesmo.
Citação (<blockquote>
)
Para adicionar citações utilize ao início da frase o caracter >
, veja:
> Citação de texto em markdown
O resultado para esta expressão será:
<blockquote>
<p>Citação de texto em markdown</p>
</blockquote>
Listas não ordenadas e listas ordenadas (<ul>
/<ol>
e <li>
)
Para criar listas não ordenadas basta deixar uma linha em branco a partir do último paragrafo e utilizar um série de itens iniciados por *
, veja:
Lista não ordenada
* Java
* Markdown
* Android
O resultado será:
<p>Lista não ordenada</p>
<ul>
<li>Java</li>
<li>Markdown</li>
<li>Android</li>
</ul>
Além do
*
, podemos utilizar o sinal de+
(soma) ou?
(subtração) pra formarmos uma lista.
Para listas ordenadas, apenas adicione os números em cada linha, veja:
Lista ordenada
1. Java
2. Markdown
3. Android
O resultado será:
<p>Lista ordenada</p>
<ol>
<li>Java</li>
<li>Markdown</li>
<li>Android</li>
</ol>
Ainda se quiser criar uma lista dentro de outra lista (subitens), pode utilizar da seguinte forma:
Sub Lista
* Java
* Simples e prática
* Markdown
* Ótimo para escrever artigos
O resultado será:
<p>Sub Lista</p>
<ul>
<li>Java
<ul>
<li>Simples e prática</li>
</ul>
</li>
<li>Markdown
<ul>
<li>Ótimo para escrever artigos</li>
</ul>
</li>
</ul>
Esta mesma ideia se aplica para a lista ordenada, trocando o
*
por1.
,2.
....
Imagem (<img>
)
Por último não menos importânte, estão as imagens. Sua escrita é bem similar aos links, veja:
![Logo do Receitas de Código](http://receitasdecodigo.com.br/resources/codeconference/img/favicon.png "Logo do Receitas de Código")
Seu resultado será:
<p><img src="http://receitasdecodigo.com.br/resources/codeconference/img/favicon.png" alt="Logo do Receitas de Código" title="Logo do Receitas de Código"></p>
Note que o que está entre conchetes será o
alt
da imagem, dentro dos parênteses será o link e o title que fica ao fim do link entre aspas duplas.
Qualquer dúvida, deixe nos comentários.
Não esqueca de deixar suas dúvidas nos comentários e compartilhar este post.