Como escrever textos usando Markdown

Olás, nesse tutorial, vou mostrar como utilizarmos o Markdown para escrevermos textos formatados em Html. Esse tutorial será, basicamente, um spin-off da saga Jekyll.

Markdown é uma ferramenta de conversão texto pra HTML para escrever textos para web. Markdown permite escrever usando um texto fácil de ler e escrever e depois converte em uma estrutura valida de XHTML (ou HTML). Pra uma definição melhor, veja o site do projeto.

Um local onde o Markdown é bastante utilizado é nos arquivos .md utilizado no Git Hub.

Mas vamos lá, pra escrevermos texto começamos sempre com o titulo, hehehe. Pra gerarmos um titulo em Markdown é tranquilo, veja:

# 007 - Um novo dia pra morrer

Colocamos a partir de três símbolos de **= **(igual) abaixo do texto, e o HTML gerado é:

<h1>007 - Um novo dia pra morrer</h1>
;

Bem sussa, pra gerar um subtítulo, é tão simples quanto:

## O Daniel Craig é o James Bond mais zica

Colocamos a partir de três traços abaixo do texto, e o HTML gerado é:

<h2>O Daniel Craig é o James Bond mais zica</h2>

Pra escrever títulos, podemos utilizar outras formas também:

#Titulo 1
##Subtítulo
###SubSubtítulo
.....

E o resultado é:

<h1>Titulo 1</h1>
<h2>Subtítulo</h2>
<h3>SubSubtítulo</h3>

Para escrevermos um texto, também é bem simples, o que devemos atentar é que pra começarmos um novo paragrafo, devemos deixar uma linha em branco no final da linha:

Curabitur consequat commodo magna. Nulla vel eros nec dui malesuada gravida. Donec pellentesque, quam et varius consectetur, risus orci dapibus ante, quis euismod diam metus sed erat.

Mauris aliquet pretium ante, a rutrum libero facilisis a. Nulla facilisi. Praesent semper ornare felis, non pharetra elit vestibulum pulvinar.

Phasellus quis lacus ultrices, posuere urna eu, pellentesque metus. Donec vulputate velit sit amet augue mattis rutrum. Phasellus ultrices tempor elit vitae vulputate. Praesent quis ullamcorper justo. Cras euismod nisl nibh, eu pulvinar lectus condimentum ut.

O HTML gerado segue abaixo:

<p>
  Curabitur consequat commodo magna. Nulla vel eros nec dui malesuada gravida. Donec pellentesque,
  quam et varius consectetur, risus orci dapibus ante, quis euismod diam metus sed erat.
</p>

<p>
  Mauris aliquet pretium ante, a rutrum libero facilisis a. Nulla facilisi. Praesent semper ornare
  felis, non pharetra elit vestibulum pulvinar.
</p>

<p>
  Phasellus quis lacus ultrices, posuere urna eu, pellentesque metus. Donec vulputate velit sit amet
  augue mattis rutrum. Phasellus ultrices tempor elit vitae vulputate. Praesent quis ullamcorper
  justo. Cras euismod nisl nibh, eu pulvinar lectus condimentum ut.
</p>

No meio do texto, podemos colocar palavras em itálico ou negrito, por exemplo:

_consequat_
**consequat**

Resultado:

<em>consequat</em>; <strong>consequat</strong>;

Pra adicionarmos uma citação:

> Ser ou não ser, eis a questão.

O HTML gerado é:

<blockquote>
  <p>Ser ou não ser, eis a questão</p>
  ;
</blockquote>

Em Markdown, sempre que vc começar a linha com > (maior) ele será uma citação e se você continuar em varias linhas seguidas, será apenas uma única citação com e um paragrafo, mas caso você coloque um linha em branco com sinal de > (maior) entre duas linhas com sinal de > (maior) mas que tenha algum conteúdo, você irá criar um novo paragrafo, porem, está dentro de uma única citação.

Pra criarmos uma lista não ordenada, temos um segredinho também, temos que pular uma linha depois do ultimo paragrafo, veja:

Lista de compras

- alface
- tomate
- cebola
- couve

O resultado:

<p>Lista de compras</p>

<ul>
  <li>alface</li>
  <li>tomate</li>
  <li>cebola</li>
  <li>couve</li>
</ul>

Além do * (asterisco), podemos utilizar o sinal de + (soma) ou - (subtração) pra formarmos uma lista.

Pra termos uma lista ordenada, segue a mesma ideia da lista não ordenada:

Lista de compras

1. alface
2. tomate
3. cebola
4. couve</pre>

E resultado:

<p>Lista de compras</p>

<ol>
  <li>alface</li>
  <li>tomate</li>
  <li>cebola</li>
  <li>couve</li>
</ol>

Pra criamos uma lista aninhada, basta uma colocarmos o subitem com um espaço na frente:

Lista de compras

- alface
- tomate
- cebola
- couve

O resultado:

<p>Lista de compras</p>

<ul>
  <li>
    alface
    <ul>
      <li>tomate</li>
    </ul>
  </li>
  <li>
    cebola
    <ul>
      <li>couve</li>
      <li>espinafre</li>
    </ul>
  </li>
</ul>

A ideia é a mesma para a lista ordenada.

Pra criamos um link com uma página da web:

Esse é o [link para o meu blog](https://cezarcruz.com.br/ 'Meu blog')

O resultado vem logo abaixo:

<p>Esse é o <a href="https://cezarcruz.com.br/" title="Meu blog">link para o meu blog</a></p>

Repare que o que está dentro do colchetes é o que irá virar um link, o endereço vem dentro de parênteses e utilizar o title dentro do parênteses é opcional, caso não queira, basta deixar somente o endereço.

Ainda com links, podemos usar ele de uma forma um pouco mais organizada, utilizando referencias:

O site do [G1][1] é igual ao do [R7][2]

[1]: http://g1.com 'Site do G1'
[2]: http://r7.com 'Site do R7'

O Resultado segue como de costume:

<p>
  O site do <a href="g1.com" title="Site do G1">G1</a> é igual ao do
  <a href="r7.com" title="Site do R7">R7</a>
</p>

Pra utilizarmos referencias em links, temos que atentar aos fatos:

O que estiver entre os primeiros colchetes é o que irá se tornar "clicável";
O segundo colchetes é a referencia, nela, podemos utilizar uma letra ou palavra e elas não são case sensitive;
No local onde deixamos organizada as referencias, temos de colocar : (dois pontos) depois dos colchetes pra que funcione corretamente;
Não esquecer de por http://;

Pra utilizarmos imagens, o código é semelhante ao de links:

![O alt](https://www.google.com.br/images/srpr/logo11w.png 'Logo do google')

E o lindo resultado:

<img src="https://www.google.com.br/images/srpr/logo11w.png" alt="O alt" title="Logo do google" />

A diferença básica entre links e imagens é a ! (exclamação) antes do código.

Bom por enquanto é isso ai, são bem básicas, mas é o suficiente pra nos prepararmos pros próximos tutoriais de Jekyll.

Abraços.

Links úteis