markdown

Marcação de Texto com Markdown

Posted on by Guilherme

“O poeta é um fingidor. Finge tão completamente que chega a fingir que é dor a dor que deveras sente.”
― Fernando Pessoa, Autopsicografia.

O que é Markdown

Markdown é uma linguagem de marcação de texto. Ele permite a insercão de marcas ou códigos em texto simples que são representados na exibição final em formatos sofisticados. Além disso ela permite a conversão para textos em HTML, que podem ser distribuídos pela web (ou localmente) e lidos por browsers. A marcação foi concebida para deixar o texto simples e legível. Markdown é software livre, disponível sob uma licença BSD de código aberto.

Títulos (Headings)

Para criar títulos use sinais # em frente ao texto (um para cada nível).

Markdown html Output obtido
# Título de nível 1 <h1>Título de nível 1</h1> (título de nível 1)
## Título de nível 2 <h2>Título de nível 2</h2> (título de nível 2)
### Título de nível 3 <h3>Título de nível 3</h3> (título de nível 3)
#### Título de nível 4 <h4>Título de nível 4</h4> (título de nível 4)
##### Título de nível 5 <h5>Título de nível 5</h5> (título de nível 5)
###### Título de nível 6 <h6>Título de nível 6</h6> (título de nível 6)

Alternativamente, é possível sublinhar com sinais de igual (===) para gerar um título de nível 1 e com traços (---) para gerar um título de nível 2:

Markdown Output
Título de nível 1
=================		 (Título de nível 1)
Título de nível 2
—————–		 (Título de nível 2)

Bastam dois sinais == ou -- para a representação de título.

Parágrafos

Parágrafos são linhas de texto separadas por linhas vazias.

Markdown html Output obtido
Markdown é simples.
Vou usá-lo sempre!		 <p>Markdown é simples.</p>
<p>Vou usá-lo sempre!</p>		 Markdown é simples.
Vou usá-lo sempre!

Quebra de linhas

Para quebrar uma linha termine a linha com 2 ou mais espaços (⎵ ⎵) seguidos de return (↲).

Markdown html Output obtido
Essa é a primeira linha. ⎵⎵↲
Essa é a segunda linha.		 <p>Essa é a primeira linha.<br>
Essa é a segunda linha.</p>		 Essa é a primeira linha.
Essa é a segunda linha.

Negrito e itálico

Texto em negrito é obtido com asteriscos ou traços baixos (underscores) envolvendo o texto a negritar. Letras dentro da palavra também podem ser negritadas com duplos asteriscos.

Markdown html Output obtido
Precisamos de **negrito**. Precisamos de <strong>negrito</strong>. Precisamos de negrito.
Precisamos de __negrito__. Precisamos de <b>negrito</b>. Precisamos de negrito.
abcdef**GH**ij abcdef<strong>GH</strong>ij abdcefGHij

Textos em itálico são obtidos com um asterisco ou uma traço baixo (underscores) envolvendo o texto. Letras dentro da palavra também podem ser tornadas itálicos com um asterisco.

Markdown html Output obtido
Texto *em itálico*. Texto <em>em itálico</em>. Texto em itálico.
Texto _em itálico_. Texto <i>em itálico</i>. Texto em itálico.
a*bcd*ef a<em>bcd</em>ef abcdef

Texto em negrito e itálico simultâneos são obtidos com três asteriscos ou traços baixos (underscores) envolvendo o texto. Letras dentro da palavra também podem ser negritadas com três asteriscos.

Markdown html Output obtido
Um texto ***muito importante***. Um texto <strong><em>muito importante</em></strong>. Um texto muito importante.
Um texto ___muito importante___. Um texto <b><i>muito importante</i></b>. Um texto muito importante.
Um texto __*muito importante*__. Um texto <i><b>muito importante</b></i>. Um texto muito importante.
Um texto **_muito importante_**. …idem… Um texto muito importante.
Texto***muito***importante. Texto<strong><em>muito</em></strong>importante. Textomuitoimportante.

Textos riscados são obtidos com dois “tils” ˜˜ anterior e posterior ao texto.

Markdown html Output obtido
Texto ˜˜riscado˜˜. Texto <del>riscado</del>. Texto riscado.

Linha horizontal

Linhas horizontais são inseridas com três ou mais asteriscos (***), ‘dashes’ (---), ou ‘underscores’ (___) em uma linha.

Markdown html Output obtido
*** <hr>

Blocos

Para criar blocos destacados (citações) coloque > na frente do parágrafo.

> “O poeta é um fingidor. Finge tão completamente que chega a fingir que é dor a dor que deveras sente.”
> ― Fernando Pessoa, Autopsicografia.

“O poeta é um fingidor. Finge tão completamente que chega a fingir que é dor a dor que deveras sente.”
― Fernando Pessoa, Autopsicografia.

Blocos destacados podem conter muitos parágrafos. Para isso basta inserir > em cada linha branca entre as parágrafos.

> “Nós, os mortais, alcançamos a imortalidade nas coisas que criamos em comum e que estão atrás de nós.”
>
> “A coisa mais bela que podemos experimentar é o mistério. Essa é a fonte de toda a arte e ciências verdadeiras.”
> ― Albert Einstein.

“Nós, os mortais, alcançamos a imortalidade nas coisas que criamos em comum e que estão atrás de nós.”
“A coisa mais bela que podemos experimentar é o mistério. Essa é a fonte de toda a arte e ciências verdadeiras”.
― Albert Einstein.

Blocos ou citações podem ser aninhadas. Para isso coloque >> na frente do parágrafo com segunda indentação.

> “Eu jamais iria para a fogueira por uma opinião minha pois não tenho certeza alguma. Porém, eu iria pelo
direito de ter e mudar de opinião, quantas vezes quisesse.”
>
>> ”Sem música a vida seria um erro.”
> ― Friedrich Nietzsche

“Eu jamais iria para a fogueira por uma opinião minha pois não tenho certeza alguma. Porém, eu iria pelo direito de ter e mudar de opinião, quantas vezes quisesse.”

“Sem música a vida seria um erro.”

― Friedrich Nietzsche

Listas

Listas ordenadas (numeradas) são criadas numerando-se as linhas, cada número seguido de ponto. Qualquer número serve para isso, embora o número da primeira linha marque o número usado na lista:

Markdown html Output obtido
1. Primeiro item
2. Segundo item
3. Terceiro item
4. Quarto item		 <ol>
<li>Primeiro item</li>
<li>Segundo item</li>
<li>Terceiro item</li>
<li>Quarto item</li>
</ol>
  1. Primeiro item
  2. Segundo item
  3. Terceiro item
  4. Quarto item
1. Primeiro item
1. Segundo item
1. Terceiro item
  1. Indentado item 1
  1. Indentado item 2
1. Quarto item		 <ol>
<li>Primeiro item</li>
<li>Segundo item</li>
<li>Terceiro item
<ol>
<li>Indentado item 1</li>
<li>Indentado item 2</li>
</ol>
</li>
<li>Quarto item</li>
</ol>
  1. Primeiro item
  2. Segundo item
  3. Terceiro item
    1. Indentado item 1
    2. Indentado item 2
  4. Quarto item

Observe que não é necessário usar a numeração correta nas listas. Alguns editores completam automaticamente esses números. A segunda indentação (ou lista dentro de outra lista) é gerada por espaços ou tab antes do item.

Listas não numeradas são criadas com os sinais *, + ou - antes dos itens.

Markdown html Output obtido
– Primeiro item
– Segundo item
– Terceiro item
– Quarto item		 <ul>
<li>Primeiro item</li>
<li>Segundo item</li>
<li>Terceiro item</li>
<li>Quarto item</li>
</ul>
  • Primeiro item
  • Segundo item
  • Terceiro item
  • Quarto item
– Primeiro item
– Segundo item
– Terceiro item
  - Indentado item 1
  - Indentado item 2
– Quarto item		 <ul>
<li>Primeiro item</li>
<li>Segundo item</li>
<li>Terceiro item
<ul>
<li>Indentado item 1</li>
<li>Indentado item 2</li>
</ul>
</li>
<li>Quarto item</li>
</ul>
  • Primeiro item
  • Segundo item
  • Terceiro item
    • Indentado item 1
    • Indentado item 2
  • Quarto item

Blocos de código

Uma anotação apropriada para código, principalmente de programação, é uma característica muito útil no markdown. A indentação correta para blocos de código pode ser conseguida com linhas precedidas por 4 espaços ( ⎵ ) ou 1 tab. Dentro de uma lista essas linhas são precedidas por 8 espaços ou 2 tabs. Nesse contexto usamos o sinal ⎵ para representar um espaço:

Markdown html Output obtido
⎵⎵⎵⎵def soma(a,b):
⎵⎵⎵⎵⎵⎵⎵⎵return a + b
⎵⎵⎵⎵print (soma(5, 7))		 <pre>
  def soma(a,b):
    return a + b
  print (soma(5, 7))
</pre>
  def soma(a,b):
    return a + b
  print(soma(5, 7))

Alternativamente, blocos de código também podem ser colocados entre três acentos graves, backticks, ```:

Markdown Output obtido
```
function factorial(n) {
  if (n === 0) return 1; // 0! = 1
  return n * factorial(n – 1);
}
factorial(3); // returns 6}
``` 		function factorial(n) {
  if (n === 0) return 1; // 0! = 1
  return n * factorial(n – 1);
}
factorial(3); // returns 6}

Nesse formato de bloco de código é possível marcar o código com cores, de acordo com a linguagem selecionada (syntax highlighting). Essa característica depende do processador usado. No exemplo seguinte o código é marcado como JSON, o que é informado após o primeiro grupo de acentos graves.

Markdown Output obtido
``` json
{
  ”nome”: “José”,
  ”sobrenome”: “Garcia”,
  ”idade”: 45
}
``` 		{
  “nome”: “José”,
  “sobrenome”: “Garcia”,
  “idade”: 45
}

Para denotar texto em código, uma ou mais palavras, coloque-as entre acentos graves (backticks, `).

Markdown html Output obtido
Digite no prompt de comando: `nano`. Digite no prompt de comando: <code>nano</code>. Digite no prompt de comando: nano.

Imagens

Para acrescentar uma imagem use a seguinte sintaxe:


![Imagem 1](caminho/images/tux.png “Título a ser exibido”)

Tabelas

Tabelas são criadas usando-se a barra vertical | e hífens. Por exemplo, as três tabelas abaixo mostram o uso do código markdown a seguir

Tabela (1)

| Título 1 | Título 2 | T3 |
| ‐‐‐‐‐‐‐‐‐‐‐‐| ‐‐‐‐‐‐‐‐‐‐‐‐|‐‐-‐|
| célula 1, 1 | célula 1, 2 | 1 |
| célula 2, 1 | célula 2, 2 | 2 |

Tabela (2)

| Alinhamento | Alinhamento | Alinhamento |
| :‐‐‐‐‐‐‐‐‐‐ | :‐‐‐‐‐‐‐‐‐: | ‐‐‐‐‐‐‐‐‐‐: |
| Esquerda | Centro | Direita |
| 1 | 2 | 3 |

Tabela (3)

Título | N
-|-
a|b

são representadas como as tabelas (1), (2) e (3) abaixo:

A tabela (2) ilustra o uso dos sinais de alinhamento: à esquerda (:‐‐), centralizado (:‐‐:) (centralizado) e à direita (‐‐:). Os itens da tabela não precisam estar bem alinhados no markdown e as barras laterais são dispensáveis, como é mostrado na tabela (3). Dentro das tabelas o texto pode conter links, negrito e itálico e código.

Links

Links para outras páginas, locais ou na web, podem ser inseridos dentro de colchetes (ex.: [Duck Duck Go]) seguidos da URL entre parênteses. Por ex. (https://duckduckgo.com)).

Markdown html Output obtido
Recomendo o mecanismo de busca_ _
[Duck Duck Go](https://duckduckgo.com).		 Recomendo o mecanismo de busca <br>
<a href=”https://duckduckgo.com”>Duck Duck Go</a>.		 Recomendo o mecanismo de busca
Duck Duck Go.

Notas de Pés de Página

Segue um exemplo de texto com notas de pé de página.

Use a seguinte notação para criar pés de página[^1], que também pode conter textos mais longos e várias parágrafos[^2].
Os marcadores não precisam ser números[^t].[^1]: O pé de página fica no final do texto.
[^2]: Um pé de página pode ter vários parágrafos.
Todos os parágrafos dentro da mesma nota devem ser indentados.
`{ function teste(a, b): # pode conter código e outras formatações. }`
[^t]: Outro pé de página.

Esse código é apresentado em forma final da seguinte forma (com os links ativos):


Use a seguinte notação para criar pés de página[1], que também pode conter textos mais longos e várias parágrafos[2].
Os marcadores não precisam ser números[3].

1. O pé de página fica no final do texto.↵
2. Um pé de página pode ter vários parágrafos.
Todo o texto dentro do mesma anotação deve ser indentado.
{ function teste(a, b): # pode conter código e outras formatações. }↵
3. Outro pé de página.↵

Lista de tarefas

O código abaixo gera a lista mostrada à direita.

## Lista de Tarefas
- [x] Tarefa primeira (completa)
- [ ] Tarefa segunda
- [ ] Arranjar outras **tarefas**

Lista de Tarefas
☑ Tarefa primeira (completa)
☐ Tarefa segunda
☐ Arranjar outras tarefas

HTML

Vários aplicativos que usam Markdown, entre eles o Jupyter Notebook, também podem representar corretamente diversas tags de marcação html. Isso é útil para usuários familiarizados com html, principalmente quando se pretende inserir texto com formatos mais sofisticados, tais como como texto colorido, com variação de tamanho, caixas coloridas, etc.

Como exemplo, o código abaixo produzirá uma barra vermelha, útil para marcar o ponto de parada dentro de um notebook (Jupyter). Outro exemplo consiste na produção de texto sublinhado. Como não há código markdown específico para isso você pode conseguir texto sublinhado com as tags html.

<u>Texto 1 sublinhado</u> ou <ins>Texto 2 sublinhado</ins><div style=”border:1px solid black; padding:10px; color:white; background-color:red;”>parei aqui &curarr;</div>


Texto 1 sublinhado ou Texto 2 sublinhado

parei aqui ↷

Latex

LaTeX é uma linguagem de composição de texto para a produção de documentos científicos. Vários editores de Markdown podem renderizar equações matemáticas e símbolos Latex para reproduzir notação matemática. Em particular o Jupyter Notebook reconhece código LaTeX escrito nas células de Markdown e os representa corretamente no navegador usando a biblioteca JavaScript MathJax. Para inserir uma fórmula matemática em uma linha use o símbolo $expressão$. Para equações isoladas em uma linha e centralizadas use $$expressão$$.

A identidade de Euler é $e^{i \pi} + 1 = 0$.
As equações de Einstein são:
$$
R_{\mu\nu}-\frac{1}{2} Rg_{\mu\nu} +\Lambda g_{\mu\nu} = \frac{8 \pi G}{c^4} T_{\mu\nu}.
$$
A definição da derivada de primeira ordem é:
$$
f'(x) = \lim\limits_{h \rightarrow 0} \frac{f(x+h) – f(x)}{h}
$$

A identidade de Euler é \(e^{i \pi} + 1 = 0\).
As equações de Einstein são:
$$
R_{\mu\nu}-\frac{1}{2} Rg_{\mu\nu} +\Lambda g_{\mu\nu} = \frac{8 \pi G}{c^4} T_{\mu\nu}.
$$
A definição da derivada de primeira ordem é:
$$
f'(x) = \lim\limits_{h \rightarrow 0} \frac{f(x+h) – f(x)}{h}
$$

Editores de Markdown

Existem muitos bons editores de markdown. Algumas sugestões:

Remarkable
Haroopad
UberWriter
Macdown
Ghostwriter
Marcor

Editores online:

São excelentes aplicativos de anotações, permitindo o uso de plugins para calendários, ToDos, customização de aparência por css. Permitem a sincronização entre diversos aparelhos Mac, Windows, Linux e Androide:

SimpleNote, Joplin, Obsidian

Bibliografia