Aprenda a escrever textos com Markdown

Postado em por Wolmir Cezer Garbin em Front-end | 119 Visualizações
Última atualização em:

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.

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.

Wolmir Cezer Garbin

Wolmir Cezer Garbin


Sou formado em Desenvolvimento de Sistemas para Internet pela faculdade Mater Dei e Pós graduado em Desenvolvimento de sistemas em Java pela UTFPR. Trabalho a mais de 9 anos com desenvolvimento em Java, Android e Web utilizando as principais tecnologias do mercado. Atuo como professor na faculdade Mater Dei, programador na Garbo Software e criador do Receitas de Código.

Ver mais

Posts relacionados


Markdown é uma ferramenta de conversão de texto para HTML. Com ele é possível você marcar títulos, listas, tabelas de forma limpa, legível e precisa.

Ler mais

Em aplicações web, principalmente quando criadas em single pages, é necessário armazenar informações no próprio browser, o localStorage nos permite fazer isso.

Ler mais

Code Conference

Esta é uma conferência de código realizada na cidade de Pato Branco para dissiminar tendências e informações sobre programação e novas tecnológias

Veja mais sobre o Code Conference

Publique seu post no Receitas de Código

Agora você pode publicar seu post no Receitas de Código e compartilhar seu conhecimento com muitas pessoas!

Quero publicar