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.

Wolmir Cezer Garbin por Wolmir Cezer Garbin - - Front-end - TUTORIAL

Última atualização em: | 9284 Visualizações

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.

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 * por 1., 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.


Publique seu post no Receitas de Código

Aguarde, estamos trabalhando para que você possa publicar sua postagem no Receitas de Código!