Guia Markdown

Neste página: este texto é um guia de referência escrito por Matt Cone traduzido para o português

Quando comecei a pesquisar sobre o Jekyll e sobre a construção de página com geradores de HTML estático sempre ouvi falar sobre Markdown. Essa informação martelou na minha cabeça, mas buscava informações de maneiras esporádicas, à medida que ia sentido a necessidade de uma tag ia na internet e pesquisava, mas essa busca ficava cada vez mais cansativa, já que minha preocupação maior é deixar o mais semântico e mais acessível possível.

O markdown não abrangem tantas possibilidades como HTML que além de ser mais "universal", é uma linguagem que eu domino, porém vejo que a escrita com markdown me parece mais natural e muito mais fácil de se produzir, por isso, numa busca para levantamento de conteúdo sobre o tema achei um guia ao qual traduzo parte dele para o português.

Observações:

• Eu sempre gosto de contextualizar tudo que pesquiso, por isso uma informação detalhada sobre a linguagem estará disponível aqui para depois mostrar as aplicações práticas da linguagem.
• Outra coisa bem importante que vou iniciar a passar para markdown todas as páginas do site. Só não vou dizer prazos 😏.
• Esta página que você está lendo está escrita em duas linguagens diferentes, mas essa flexibilidade é aceitável pelo Github e pelo Markdown. A maneira como ela foi descritita pode ser visualizada através do arquivo disponibilizado no repositótio do site.
• A fonte este post é muito mais extensa do que está disponibilizado aqui, mas escolhi publicar usar apenas o que faz sentido para mim, já que essa publicação será uma guia caso eu vá ter alguma dúvida na escrita do Markdown.

O texto abaixo foi traduzido para o português a partir o material disponível no site Markdown Guide sob a licença CC BY-SA 4.0.

O que é o Markdown?

Markdown é uma linguagem de marcação leve que você pode usar para adicionar elementos de formatação a documentos de texto simples. Criado por John Gruber em 2004, Markdown é agora uma das linguagens de marcação mais populares do mundo.

Usar Markdown é diferente de usar um editor WYSIWYG. Em um aplicativo como o Microsoft Word, você clica em botões para formatar palavras e frases e as alterações ficam visíveis imediatamente. Markdown não é assim. Ao criar um arquivo formatado em Markdown, você adiciona a sintaxe Markdown ao texto para indicar quais palavras e frases devem ter uma aparência diferente.

Por exemplo, para exibir um título, você adiciona um sinal dele (por exemplo, # Título Um) ou para deixar uma frase em negrito, você adiciona dois asteriscos antes e depois dela (por exemplo, **este texto está em negrito**). Pode demorar um pouco para se acostumar a ver a sintaxe Markdown em seu texto, especialmente se você estiver acostumado com aplicativos WYSIWYG. A captura de tela abaixo mostra um arquivo Markdown exibido no editor de texto Atom.

Você pode adicionar elementos de formatação Markdown a um arquivo de texto simples usando um aplicativo editor de texto. Ou você pode usar um dos muitos aplicativos Markdown para sistemas operacionais macOS, Windows, Linux, iOS e Android. Existem também vários aplicativos baseados na web projetados especificamente para escrever em Markdown.

Dependendo do aplicativo que você usa, você pode não conseguir visualizar o documento formatado em tempo real. Mas está tudo bem. De acordo com Gruber, a sintaxe do Markdown foi projetada para ser legível e discreta, de modo que o texto nos arquivos do Markdown pode ser lido mesmo que não sejam processados por máquinas.

O objetivo principal do design para a sintaxe de formatação do Markdown é torná-lo o mais legível possível. A ideia é que um documento formatado em Markdown deve ser publicável como está, como texto simples, sem parecer que foi marcado com tags ou instruções de formatação.

Por que usar Markdown?

Você pode estar se perguntando por que as pessoas usam Markdown em vez de um editor WYSIWYG. Por que escrever com Markdown quando você pode pressionar botões em uma interface para formatar seu texto? Acontece que existem algumas razões diferentes pelas quais as pessoas usam Markdown em vez de editores WYSIWYG.

• Markdown pode ser usado para tudo. As pessoas o usam para criar sites, documentos, anotações, livros, apresentações, mensagens de e-mail e documentação técnica.
• Markdown é portátil. Arquivos contendo texto formatado em Markdown podem ser abertos usando virtualmente qualquer aplicativo. Se você decidir que não gosta do aplicativo Markdown que está usando no momento, pode importar seus arquivos Markdown para outro aplicativo Markdown. Isso contrasta fortemente com os aplicativos de processamento de texto, como o Microsoft Word, que bloqueiam seu conteúdo em um formato de arquivo proprietário.
• Markdown é independente de plataforma. Você pode criar texto formatado em Markdown em qualquer dispositivo que execute qualquer sistema operacional.
• Markdown é à prova de futuro. Mesmo que o aplicativo que você está usando pare de funcionar em algum momento no futuro, você ainda poderá ler seu texto formatado em Markdown usando um aplicativo de edição de texto. Esta é uma consideração importante quando se trata de livros, teses universitárias e outros documentos importantes que precisam ser preservados indefinidamente.
• Markdown está em toda parte. Sites como Reddit e GitHub suportam Markdown, e muitos aplicativos de desktop e baseados na web o suportam.

Comece

A melhor maneira de começar a usar o Markdown é usá-lo. Isso é mais fácil do que nunca graças a uma variedade de ferramentas gratuitas.

Você nem precisa fazer download de nada. Existem vários editores Markdown online que você pode usar para tentar escrever no Markdown. Dillinger é um dos melhores editores online do Markdown. Basta abrir o site e começar a digitar no painel esquerdo. Uma visualização do documento formatado aparece no painel direito.

Provavelmente, você desejará manter o site do Dillinger aberto enquanto lê este guia. Dessa forma, você pode experimentar a sintaxe à medida que aprende sobre ela. Depois de se familiarizar com o Markdown, você pode usar um aplicativo Markdown que pode ser instalado em seu computador desktop ou dispositivo móvel.

Como isso funciona?

Dillinger torna a escrita em Markdown fácil porque esconde as coisas que acontecem nos bastidores, mas vale a pena explorar como o processo funciona em geral.

Quando você escreve em Markdown, o texto é armazenado em um arquivo de texto simples com extensão .md ou .markdown. Mas e daí? Como seu arquivo formatado em Markdown é convertido em HTML ou em um documento pronto para impressão?

A resposta curta é que você precisa de um aplicativo Markdown capaz de processar o arquivo Markdown. Existem muitos aplicativos disponíveis - tudo, desde scripts simples a aplicativos de desktop que se parecem com o Microsoft Word. Apesar de suas diferenças visuais, todos os aplicativos fazem a mesma coisa. Como Dillinger, todos eles convertem texto formatado em Markdown em HTML para que possa ser exibido em navegadores da web.

Os aplicativos Markdown usam algo chamado de processador Markdown (também comumente referido como "parser" ou "implementation") para pegar o texto formatado em Markdown e gerá-lo no formato HTML. Nesse ponto, seu documento pode ser visualizado em um navegador da web ou combinado com uma folha de estilo e impresso. Você pode ver uma representação visual deste processo abaixo.

Nota: O aplicativo Markdown e o processador são dois componentes separados. Por uma questão de prática eu os combinei em um elemento ("Markdown App") na figura abaixo.

Para resumir, este é um processo de quatro partes:

1. Crie um arquivo Markdown usando um editor de texto ou um aplicativo Markdown dedicado. O arquivo deve ter uma extensão .md ou .markdown.
2. Abra o arquivo Markdown em um aplicativo Markdown.
3. Use o aplicativo Markdown para converter o arquivo Markdown em um documento HTML.
4. Visualize o arquivo HTML em um navegador da web ou use o aplicativo Markdown para convertê-lo em outro formato de arquivo, como PDF.

Da sua perspectiva, o processo irá variar um pouco dependendo do aplicativo que você usa. Por exemplo, Dillinger basicamente combina as etapas 1-3 em uma interface única e contínua - tudo o que você precisa fazer é digitar no painel esquerdo e a saída renderizada aparece magicamente no painel direito. Mas se você usar outras ferramentas, como um editor de texto com um gerador de site estático, verá que o processo é muito mais visível.

O que é bom para o Markdown?

Markdown é uma maneira rápida e fácil de fazer anotações, criar conteúdo para um site da Web e produzir documentos prontos para impressão.

Não demora muito para aprender a sintaxe do Markdown e, depois que você souber como usá-la, poderá escrever usando o Markdown em quase todos os lugares. A maioria das pessoas usa o Markdown para criar conteúdo para a web, mas o Markdown é bom para formatar tudo, desde mensagens de e-mail a lista de compras.

Aqui estão alguns exemplos do que você pode fazer com o Markdown.

Sites

O Markdown foi projetado para a web, portanto, não é nenhuma surpresa que existam muitos aplicativos projetados especificamente para a criação de conteúdo de sites.

Se você está procurando a maneira mais simples possível de criar um site com arquivos Markdown, verifique blot.im e smallvictori.es. Depois de se inscrever em um desses serviços, eles criam uma pasta Dropbox no seu computador. Basta arrastar e soltar seus arquivos Markdown na pasta e - puf! - eles estão em seu site. Não poderia ser mais fácil.

Se você estiver familiarizado com HTML, CSS e controle de versão, dê uma olhada no Jekyll, um popular gerador de sites estáticos que pega arquivos Markdown e constrói um site HTML. Uma vantagem dessa abordagem é que o GitHub Pages oferece hospedagem gratuita para sites gerados pelo Jekyll. Se Jekyll não é sua preferência, basta escolher um dos muitos outros geradores de sites estáticos disponíveis.

Documentos

O Markdown não tem todos os recursos de processadores de texto como o Microsoft Word, mas é bom o suficiente para criar documentos básicos como tarefas e cartas. Você pode usar um aplicativo de criação de documento Markdown para criar e exportar documentos formatados em Markdown para o formato de arquivo PDF ou HTML. A parte do PDF é fundamental porque, uma vez que você tenha um documento PDF, você pode fazer qualquer coisa com ele - imprimi-lo, enviá-lo por e-mail ou carregá-lo em um site.

Aqui estão alguns aplicativos de criação de documentos Markdown que eu recomendo:

• Mac: MacDown, iA Writer ou Marked
• iOS / Android: iA Writer
• Windows: ghostwriter ou Markdown Monster
• Linux: ReText ou ghostwriter
• Web: Dillinger ou StackEdit

Dica: o iA Writer fornece modelos para visualizar, imprimir e exportar documentos formatados com Markdown. Por exemplo, o modelo "Academic - MLA Style" recua parágrafos e adiciona espaçamento duplo de frases.

Anotações

Em quase todos os aspectos, o Markdown é a sintaxe ideal para fazer anotações. Infelizmente, Evernote e OneNote, dois dos aplicativos de notas mais populares, não são compatíveis com Markdown. A boa notícia é que vários outros aplicativos de notas suportam Markdown:

• Simplenote é um aplicativo de anotações básico gratuito disponível para todas as plataformas.
• Notable é um aplicativo de anotações executado em uma variedade de plataformas.
• Bear é um aplicativo semelhante ao Evernote disponível para dispositivos Mac e iOS. Ele não usa exclusivamente o Markdown por padrão, mas você pode ativar o modo de compatibilidade do Markdown.
• O Boostnote se autodenomina um "aplicativo de anotações de código aberto projetado para programadores".

Se você não pode se separar do Evernote, dê uma olhada no Marxico, um editor do Markdown baseado em assinatura para o Evernote, ou use o Markdown Here com o site do Evernote.

Livros

Quer publicar um romance por conta própria? Experimente o Leanpub, um serviço que pega seus arquivos formatados em Markdown e os transforma em um livro eletrônico. Leanpub produz seu livro em formato de arquivo PDF, EPUB e MOBI. Se desejar criar cópias de seu livro em brochura, você pode fazer upload do arquivo PDF para outro serviço, como Kindle Direct Publishing. Para saber mais sobre como escrever e publicar um livro por conta própria usando Markdown, leia esta postagem do blog.

Apresentações

Acredite ou não, você pode gerar apresentações a partir de arquivos formatados em Markdown. Demora um pouco para se acostumar com a criação de apresentações no Markdown, mas quando você pega o jeito, é muito mais rápido e fácil do que usar um aplicativo como o PowerPoint ou Keynote. Remark (projeto GitHub) é uma ferramenta popular de apresentação de slides Markdown baseada em navegador, assim como o Cleaver (projeto GitHub). Se você usa um Mac e prefere usar um aplicativo, verifique Deckset ou Marked.

Email

Se você envia muitos e-mails e está cansado dos controles de formatação disponíveis na maioria dos sites de provedores de e-mail, ficará feliz em saber que existe uma maneira fácil de escrever mensagens de e-mail usando Markdown. Markdown Here é uma extensão de navegador gratuita e de código aberto que converte texto formatado em Markdown em HTML que está pronto para ser enviado.

Documentação

Markdown é um ajuste natural para documentação técnica. Empresas como o GitHub estão mudando cada vez mais para o Markdown para sua documentação - confira sua postagem no blog sobre como eles migraram sua documentação formatada com Markdown para o Jekyll. Se você escreve documentação para um produto ou serviço, dê uma olhada nestas ferramentas úteis:

• O Read the Docs pode gerar um site de documentação a partir de seus arquivos Markdown de código aberto. Basta conectar seu repositório GitHub ao serviço e enviar - Read the Docs faz o resto. Eles também têm um serviço para entidades comerciais.
• MkDocs é um gerador de site estático rápido e simples que é voltado para a documentação do projeto de construção. Os arquivos de origem da documentação são gravados em Markdown e configurados com um único arquivo de configuração YAML. MkDocs tem vários temas embutidos, incluindo uma porta do tema de documentação Read the Docs para uso com MkDocs. Um dos temas mais recentes é o Material MkDocs.
• Docusaurus é um gerador de sites estáticos projetado exclusivamente para a criação de sites de documentação. Ele oferece suporte a traduções, pesquisa e controle de versão.
• VuePress é um gerador de site estático desenvolvido pela Vue e otimizado para escrever documentação técnica.
• Jekyll foi mencionado anteriormente na seção sobre sites, mas também é uma boa opção para gerar um site de documentação a partir de arquivos Markdown. Se você seguir esse caminho, certifique-se de verificar o tema de documentação do Jekyll.

Variações do markdown

Um dos aspectos mais confusos do uso do Markdown é que praticamente todo aplicativo Markdown implementa uma versão ligeiramente diferente do Markdown. Essas variantes do Markdown são comumente chamadas de sabores. É seu trabalho dominar qualquer tipo de Markdown que seu aplicativo tenha implementado.

Para entender o conceito de sabores de Markdown, pode ser útil pensar neles como dialetos de linguagem. As pessoas em Ciudad Juárez falam espanhol da mesma forma que as pessoas em Barcelona, ​​mas existem diferenças substanciais entre os dialetos usados ​​nas duas cidades. O mesmo é verdadeiro para pessoas que usam diferentes aplicativos Markdown. Usar Dillinger para escrever com Markdown é uma experiência muito diferente do que usar Ulysses.

Em termos práticos, isso significa que você nunca sabe exatamente o que uma empresa quer dizer quando afirma que apoia o “Markdown”. Eles estão falando apenas sobre os elementos básicos da sintaxe ou todos os elementos básicos e estendidos da sintaxe combinados ou ainda alguma combinação arbitrária de elementos da sintaxe? Você não saberá até ler a documentação ou começar a usar o aplicativo.

Se você está apenas começando, o melhor conselho que posso dar é escolher um aplicativo Markdown com um bom suporte de Markdown. Isso ajudará muito a manter a portabilidade de seus arquivos Markdown. Você pode querer armazenar e usar seus arquivos Markdown em outros aplicativos e, para isso, precisa iniciar com um aplicativo que forneça um bom suporte. Você pode usar o diretório de ferramentas para encontrar um aplicativo que se encaixe na conta.

Recursos adicionais

Existem muitos recursos que você pode usar para aprender o Markdown. Aqui estão alguns outros recursos introdutórios:

• Documentação do Markdown de John Gruber. O guia original escrito pelo criador do Markdown.
• Markdown Tutorial. Um site de código aberto que permite que você experimente o Markdown em seu navegador.
• Awesome Markdown. Uma lista de ferramentas Markdown e recursos de aprendizagem.
• Typesetting Markdown. Uma série que descreve um ecossistema para a formatação de documentos Markdown usando pandoc e ConTeXt.

Visão geral

Esses são os elementos descritos no documento do John Gruber. Todos os aplicativos Markdown oferecem suporte a esses elementos. Existem pequenas variações e discrepâncias entre os processadores Markdown - essas diferenças serão descritas no documento sempre que possível.

Sintaxe Básica

Elemento	Sintaxe de markdown
Caractere Cabeçalho	Sintaxe de Markdown # Cabeçalho nível 1 ## Cabeçalho nível 2 ### Cabeçalho nível 3
Elemento Negrito	Sintaxe de Markdown texto em negrito
Elemento Itálico	Sintaxe de Markdown texto em itálico
Elemento Bloco de citação	Sintaxe de Markdown > bloco de citação
Elemento Lista ordenada	Sintaxe de Markdown 1. Primeiro item 2. Segundo item 3. Terceiro item
Elemento Lista não ordenada	Sintaxe de Markdown - Primeiro item - Segundo item - Terceiro item
Elemento Código	Sintaxe de Markdown codigo
Elemento Régua horizontal	Sintaxe de Markdown ---
Elemento Link	Sintaxe de Markdown texto
Elemento Imagem	Sintaxe de Markdown

Títulos

Para criar um título, adicione sinais numéricos (#) na frente de uma palavra ou frase. O número de sinais numéricos que você usa deve corresponder ao nível do título. Por exemplo, para criar um título de nível três (<h3>), use três sinais numéricos (por exemplo, ### Meu cabeçalho).

Sintaxe Alternativa

Como alternativa, na linha abaixo do texto, adicione qualquer número de == caracteres para o título de nível 1 ou -- caracteres para o título de nível 2.

Práticas recomendadas

Os aplicativos Markdown não concordam sobre como lidar com a falta de espaço entre os sinais numéricos (#) e o nome do título. Para compatibilidade, sempre coloque um espaço entre os sinais numéricos e o nome do título.

Parágrafo

Para criar parágrafos, use uma linha em branco para separar uma ou mais linhas de texto.

Práticas recomendadas

A menos que o parágrafo esteja em uma lista, não avance as linhas dos parágrafos com espaços ou tabulações.

Quebra de linhas

Para criar uma quebra de linha (<br>), termine uma linha com dois ou mais espaços e retorne a digitar.

Práticas recomendadas

Você pode usar dois ou mais espaços (comumente chamados de "trailing whitespace") para quebras de linha em quase todos os aplicativos Markdown, mas isso é controverso. É difícil ver espaços em branco em um editor, e muitas pessoas, acidental ou intencionalmente, colocam dois espaços após cada frase. Por esse motivo, você pode querer usar algo diferente de espaço em branco à direita para quebras de linha. Felizmente, há outra opção com suporte em quase todos os aplicativos Markdown: a tag <br> HTML.

Para compatibilidade, use um espaço em branco à direita ou a tag <br> HTML no final da linha.

Existem duas outras opções que não recomendo usar. CommonMark e algumas outras linguagens de marcação leves permitem que você digite uma barra invertida (\) no final da linha, mas nem todos os aplicativos Markdown suportam isso, então não é uma ótima opção de uma perspectiva de compatibilidade. E pelo menos algumas linguagens de marcação leves não exigem nada no final da linha - basta voltar a digitar e elas criarão uma quebra de linha

Ênfase

Você pode adicionar ênfase colocando o texto em negrito ou itálico.

Negrito

Para texto em negrito, adicione dois asteriscos ou sublinhados antes e depois de uma palavra ou frase. Para colocar em negrito no meio de uma palavra para dar ênfase, adicione dois asteriscos sem espaços ao redor das letras.

Práticas recomendadas

Os aplicativos de Markdown não concordam sobre como lidar com sublinhados no meio de uma palavra. Para compatibilidade, use asteriscos para colocar em negrito o meio de uma palavra para dar ênfase.

Itálico

Para colocar o texto em itálico, adicione um asterisco ou sublinhado antes e depois de uma palavra ou frase. Para colocar em itálico o meio de uma palavra para dar ênfase, adicione um asterisco sem espaços ao redor das letras.

Práticas recomendadas

Os aplicativos de Markdown não concordam sobre como lidar com sublinhados no meio de uma palavra. Para compatibilidade, use asteriscos para colocar em itálico uma letra no meio de uma palavra.

Negrito e Itálico

Para enfatizar o texto com negrito e itálico ao mesmo tempo, adicione três asteriscos ou sublinhados antes e depois de uma palavra ou frase. Para colocar em negrito e itálico no meio de uma palavra para dar ênfase, adicione três asteriscos sem espaços ao redor das letras.

Práticas recomendadas

Os aplicativos de Markdown não concordam sobre como lidar com sublinhados no meio de uma palavra. Para compatibilidade, use asteriscos para colocar em negrito e itálico no meio de uma palavra para dar ênfase.

Citações em bloco

Para criar um bloco de citação (blockquote), adicione um > na frente de um parágrafo.

> Dorothy a seguiu por muitas das belas salas de seu castelo.

A renderização é essa:

Dorothy a seguiu por muitas das belas salas de seu castelo.

Citações em bloco com vários parágrafos

Citações em bloco (blockquote) podem conter vários parágrafos. Adicione um > nas linhas em branco entre os parágrafos.

> Dorothy a seguiu por muitas das belas salas de seu castelo.<br>
>
> A Bruxa mandou que ela limpasse os potes, chaleiras, varresse o chão e mantivesse o fogo alimentado com lenha.

A renderização é essa:

Dorothy a seguiu por muitas das belas salas de seu castelo.

A Bruxa mandou que ela limpasse os potes, chaleiras, varresse o chão e mantivesse o fogo alimentado com lenha.

Citações em bloco alinhados

Citações em bloco (blockquote) podem ser aninhados. Adicione um >> na frente do parágrafo que deseja aninhar.

>Dorothy a seguiu por muitas das belas salas de seu castelo.
>> A Bruxa mandou que ela limpasse os potes, chaleiras, varresse o chão e mantivesse o fogo alimentado com lenha.

A renderização é essa:

Dorothy a seguiu por muitas das belas salas de seu castelo.

A Bruxa mandou que ela limpasse os potes, chaleiras, varresse o chão e mantivesse o fogo alimentado com lenha.

Citações em bloco com outros elementos

Citações em bloco (blockquote) podem conter outros elementos formatados em Markdown. Nem todos os elementos podem ser usados — você precisará experimentar para ver quais funcionam.

> #### Os resultados trimestrais estão ótimos!`
>
> - A receita estava fora do gráfico.
> - Os lucros foram maiores do que nunca.
>
>  * Tudo * está indo de acordo com o ** plano **.

A renderização é essa:

Os resultados trimestrais estão ótimos!

• A receita estava fora do gráfico.
• Os lucros foram maiores do que nunca.

Tudo está indo de acordo com o plano.

Listas

Você pode organizar itens em listas ordenadas e não ordenadas.

Listas ordenadas

Para criar uma lista ordenada, adicione itens de linha com números seguidos de pontos. Os números não precisam estar em ordem numérica, mas a lista deve começar com o número um.

Práticas recomendadas

CommonMark e algumas outras linguagens de marcação leves permitem que você use um parêntese ()) como um delimitador (por exemplo, 1) Primeiro item), mas nem todos os aplicativos Markdown suportam isso, então não é uma ótima opção de uma perspectiva de compatibilidade. Para compatibilidade, use apenas ponto (.).

Lista não ordenada

Para criar uma lista não ordenada, adicione travessões (-), asteriscos (*) ou sinais de adição (+) na frente dos itens de linha. Recue um ou mais itens para criar uma lista aninhada.

Práticas recomendadas

Os aplicativos de Markdown não concordam sobre como lidar com diferentes delimitadores na mesma lista. Para compatibilidade, não misture e combine delimitadores na mesma lista - escolha um e fique com ele.

Adicionando Elementos em Listas

Para adicionar outro elemento em uma lista enquanto preserva a continuidade da lista, indente o elemento quatro espaços ou uma tabulação, como mostrado nos exemplos a seguir.

Parágrafos

* Este é o primeiro item da lista.
* Este é o primeiro item da lista.

  Preciso adicionar outro parágrafo abaixo do item da lista Segundo.

- E aqui está o item da lista do Terceiro.

A renderização é essa:

• Este é o primeiro item da lista.

• Este é o primeiro item da lista.
  
  Preciso adicionar outro parágrafo abaixo do item da lista Segundo.

• E aqui está o item da lista do terceiro.

Citações em bloco

* Este é o primeiro item da lista.
- Aqui está o item da lista Segundo.

  > Um blockquote ficaria ótimo abaixo do item da lista Segundo.

E aqui está o item da lista do Terceiro.

A renderização é essa:

• This is the first list item.

• Here's the second list item.

  A blockquote would look great below the second list item.

• And here's the third list item.

Blocos de código

Os blocos de código são normalmente recuados quatro espaços ou uma tab

Quando estiverem em uma lista, recue oito espaços ou duas tabulações.

 1. Abra o arquivo.
 2. Encontre o seguinte bloco de código na linha 21:

     < html>
       < head>
             < title>Teste</ title>
       </ head>

 3. Atualize o título para corresponder ao nome do seu site.

A renderização é essa:

1. Abra o arquivo.
2. Encontre o seguinte bloco de código na linha 21:

     < html>
       < head> < br>
             < title>Teste</ title> < br>
       </ head>

1. Atualize o título para corresponder ao nome do seu site.

Imagen

 1. Abra o arquivo que contém o mascote do Linux.
 2. Maravilhe-se com sua beleza.

    ![Tux, O mascote Linux](upload.wikimedia.org/wikipedia/commons/3/35/Tux.svg)

 3. Fechar o arquivo

A renderização é essa:

1. Abra o arquivo que contém o mascote do Linux.

2. Maravilhe-se com sua beleza.

   

3. Fechar o arquivo

Listas

Você pode aninhar uma lista não ordenada em uma lista ordenada ou vice-versa.

 1. Primeiro item
 2. Segundo item
 3. Terceiro item
     - Item recuado
     - Item recuado
 4. Quarto item

A renderização é essa:

1. Primeiro item
2. Segundo item
3. Terceiro item
   • Item recuado
   • Item recuado
4. Quarto item

Código

Para denotar uma palavra ou frase como código, coloque-a entre crases ( ` ).

Exibindo a crase ( ` )

Se a palavra ou frase que você deseja exibir como código inclui um ou mais crases, você pode fazer o escape colocando a palavra ou frase entre crases duplos ( `)

Bloco de código

Para criar blocos de código, avance cada linha do bloco em pelo menos quatro espaços ou uma tabulação.

     <html>
         <head>
         </head>
     </html>

A renderização é essa:

     <html>
         <head>
         </head>
     </html>

Note: Para criar blocos de código sem recuar linha, acesse configurações avançadas de código.

Régua horizontal

Para criar uma régua horizontal <hr>, use três ou mais asteriscos ( *** ), travessões ( --- ) ou sublinhados ( ___ ) em uma linha.

***

---

A renderização é essa:

Práticas recomendadas

Para compatibilidade, coloque linhas em branco antes e depois das régua horizontal <hr>.

Links

Para criar um link, coloque o texto do link entre colchetes (por exemplo, [Duck Duck Go]) e siga-o imediatamente com o URL entre parênteses (por exemplo, (duckduckgo.com )).

Meu mecanismo de pesquisa favorito é [Duck Duck Go](duckduckgo.com).

A renderização é essa:

Meu mecanismo de pesquisa favorito é Duck Duck Go.

Adicionando títulos

Você pode adicionar um título para um link. Isso aparecerá como uma dica quando o usuário passar o mouse sobre o link. Para adicionar um título, coloque-o entre parênteses após o URL.

Meu mecanismo de pesquisa favorito é [Duck Duck Go](duckduckgo.com "O melhor mecanismo de pesquisa para privacidade").

A renderização é essa:

Meu mecanismo de pesquisa favorito é Duck Duck Go.

URLs e endereços de e-mail

Para transformar rapidamente um URL ou endereço de e-mail em um link, coloque-o entre colchetes angulares.

<markdownguide.org> ou <email-falso@exemplo.com>

A renderização é essa:

https://markdownguide.org ou email-falso@exemplo.com

Formatação dos links

Para enfatizar os links "enfatizar os links", adicione asteriscos antes e depois dos colchetes e parênteses. Para exibir links como código "código", adicione crases entre colchetes.

Eu amo apoiar a **[EFF](https://eff.org`)**.`
Este é o * [Guia de marcação](https://markdownguide.org`) *.<br> Veja a seção em [código] (# código). `

A renderização é essa:

Eu amo apoiar a EFF.
Este é o Guia de marcação.
Veja a seção em código.

Links de referência

Os links de referência são um tipo especial de link que torna os URLs mais fáceis de exibir e ler no Markdown. Os links de referência são construídos em duas partes: a parte que você mantém alinhada com o seu texto e a parte que você armazena em algum outro lugar do arquivo para manter o texto fácil de ler.

Formatando a primeira parte do link

A primeira parte de um link de referência é formatada com dois conjuntos de colchetes. O primeiro conjunto de colchetes envolve o texto que deve aparecer vinculado. O segundo conjunto de colchetes exibe um rótulo usado para apontar para o link que você está armazenando em outro lugar no documento.

Embora não seja obrigatório, você pode incluir um espaço entre o primeiro e o segundo conjunto de colchetes. O rótulo no segundo conjunto de colchetes não diferencia maiúsculas de minúsculas e pode incluir letras, números, espaços ou pontuação.

Isso significa que os formatos de exemplo a seguir são aproximadamente equivalentes para a primeira parte do link:

- [hobbit-hole]
- [hobbit-hole]

Formatando a segunda parte do link

A segunda parte de um link de estilo de referência é formatada com os seguintes atributos:

1. O rótulo, entre colchetes, seguido imediatamente por dois pontos e pelo menos um espaço (por exemplo, [rótulo]:).
2. O URL do link, que você pode colocar opcionalmente entre colchetes angulares.
3. O título opcional do link, que você pode colocar entre aspas duplas, aspas simples ou parênteses.

Isso significa que os formatos de exemplo a seguir são praticamente equivalentes para a segunda parte do link:

• [1]: https://en.wikipedia.org/wiki/Hobbit#Lifestyle
• [1]: https://en.wikipedia.org/wiki/Hobbit#Lifestyle "Hobbit lifestyles"
• [1]: https://en.wikipedia.org/wiki/Hobbit#Lifestyle 'Hobbit lifestyles'
• [1]: https://en.wikipedia.org/wiki/Hobbit#Lifestyle (Hobbit lifestyles)
• [1]: <https://en.wikipedia.org/wiki/Hobbit#Lifestyle> "Hobbit lifestyles"
• [1]: <https://en.wikipedia.org/wiki/Hobbit#Lifestyle> 'Hobbit lifestyles'
• [1]: <https://en.wikipedia.org/wiki/Hobbit#Lifestyle> (Hobbit lifestyles)

Você pode colocar esta segunda parte do link em qualquer lugar do documento Markdown. Algumas pessoas os colocam imediatamente após o parágrafo em que aparecem, enquanto outras os colocam no final do documento (como notas de fim ou de rodapé).

Um exemplo juntando as peças:

Digamos que você adicione um URL como um link de URL padrão para um parágrafo e se parece com isto no Markdown:

Em um buraco no chão vivia um hobbit. Não é um buraco sujo, sujo e úmido, cheio de pontas de vermes e um cheiro de gosma, nem ainda um buraco seco, vazio e arenoso sem nada nele para sentar ou para comer: era um [buraco do hobbit](https://en.wikipedia.org/wiki/Hobbit#Lifestyle "estilos de vida do hobbit") e isso significa conforto.

Embora possa apontar para informações adicionais interessantes, o URL conforme exibido realmente não acrescenta muito ao texto bruto existente, exceto torná-lo mais difícil de ler. Para corrigir isso, você pode formatar o URL assim:

Em um buraco no chão vivia um hobbit. Não é um buraco sujo, sujo e úmido, cheio de pontas de vermes e um cheiro de gosma, nem ainda um buraco seco, vazio e arenoso sem nada nele para sentar ou para comer: era um [buraco de hobbit][1] e isso significa conforto.

[1]: <https://en.wikipedia.org/wiki/Hobbit#Lifestyle> "Hobbit Lifestyles"

Em ambos os casos acima, a renderização será idêntica:

Em um buraco no chão vivia um hobbit. Não um buraco nojento, sujo e úmido, cheio de pontas de vermes e um cheiro de gosma, nem ainda um buraco seco, vazio e arenoso sem nada para sentar ou comer: era um buraco de hobbit e que significa conforto.

e o HTML para o link seria:

<a href="https://en.wikipedia.org/wiki/Hobbit#Lifestyle" title="Hobbit lifestyles">buraco de hobbit</a>

Práticas recomendadas

Os aplicativos de Markdown não concordam sobre como lidar com espaços no meio de uma URL. Para compatibilidade, tente codificar em URL quaisquer espaços com %20.

Imagens

Para adicionar uma imagem, adicione um ponto de exclamação (!), seguido pelo texto alternativo (alt) entre colchetes e o caminho ou URL para o recurso de imagem entre parênteses. Você pode opcionalmente adicionar um título após o URL entre parênteses.

![Jardins Mágicos da Filadélfia. Este lugar é tão legal!](/img/philly-magic-gardens.jpg "Jardins Mágicos da Filadélfia")

A renderização é essa:

Imagens com links

Para adicionar um link a uma imagem, coloque o Markdown da imagem entre colchetes e, a seguir, adicione o link entre parênteses.

[![Uma pedra antiga no deserto](img/shiprock.jpg "Shiprock, Novo México por Beau Rogers")](https://flic.kr/p/Qv3rFw)

A renderização é essa:

Exibir caracteres de formatação

Para exibir um caractere literal que seria usado para formatar texto em um documento Markdown, adicione uma barra invertida (\) na frente do caractere.

\* Sem a barra invertida, isso seria um marcador em uma lista não ordenada.

A saída renderizada é semelhante a esta:

• Sem a barra invertida, isso seria um marcador em uma lista não ordenada.

Caracteres que podem ser exibidos pela barra invertida

Você pode usar uma barra invertida para exibir os caracteres a seguir:

HTML

Muitos aplicativos Markdown permitem que você use tags HTML em texto formatado por Markdown. Isso é útil se você preferir certas tags HTML à sintaxe Markdown. Por exemplo, algumas pessoas acham mais fácil usar tags HTML para imagens. Usar HTML também é útil quando você precisa alterar os atributos de um elemento, como especificar a cor do texto ou alterar a largura de uma imagem.

Para usar HTML, coloque as tags no texto do arquivo formatado em Markdown.

Esta **palavra** está em negrito. Esta <em>palavra</em> está em itálico.

A renderização é essa:

Esta palavra está em negrito. Esta palavra está em itálico.

Práticas recomendadas

Por razões de segurança, nem todos os aplicativos Markdown suportam HTML em documentos Markdown. Em caso de dúvida, verifique a documentação do aplicativo Markdown. Alguns aplicativos suportam apenas um subconjunto de tags HTML.

Use linhas em branco para separar elementos HTML em nível de bloco como <div>, <table>, <pre> e <p> do conteúdo circundante. Tente não recuar as tags com tabulações ou espaços - isso pode interferir na formatação.

Você não pode usar a sintaxe Markdown dentro de tags HTML de nível de bloco. Por exemplo, <p>_itálico_ e **negrito** </p> não funcionam.

Sintaxe avançada

Esses elementos estendem a sintaxe básica, adicionando recursos adicionais. Nem todos os aplicativos Markdown suportam esses elementos.

            | Sintaxe         | Descrição         |
            | --------------- | ----------------- |
            | Cabeçalho       | Título            |
            | Paragrafo       | Texto             |
            

            {
                "firstName": "John",
                "lastName": "Smith",
                "age": 25
              }
      

            Termo
            : Definição

A sintaxe básica delineada no documento original de John Gruber adicionou muitos dos elementos necessários no dia-a-dia, mas não foi suficiente para algumas pessoas. É aí que entra a sintaxe estendida.

Vários indivíduos e organizações se encarregaram de estender a sintaxe básica adicionando elementos adicionais como tabelas, blocos de código, realce de sintaxe, link automático de URL e notas de rodapé. Esses elementos podem ser ativados usando uma linguagem de marcação leve que se baseia na sintaxe Markdown básica ou adicionando uma extensão a um processador Markdown compatível.

Nem todos os aplicativos Markdown oferecem suporte a elementos de sintaxe estendidos. Você precisará verificar se a linguagem de marcação leve que seu aplicativo está usando suporta ou não os elementos de sintaxe estendida que você deseja usar. Se não, ainda pode ser possível habilitar extensões em seu processador Markdown.

Linguagens de marcação leves

Existem várias linguagens de marcação leves que são superconjuntos do Markdown. Eles incluem a sintaxe básica de Gruber e a baseiam na adição de elementos adicionais como tabelas, blocos de código, destaque de sintaxe, link automático de URL e notas de rodapé. Muitos dos aplicativos Markdown mais populares usam uma das seguintes linguagens de marcação leves:

• CommonMark
• GitHub Flavored Markdown (GFM)
• Markdown Extra
• MultiMarkdown
• R Markdown

Processadores Markdown

Existem dezenas de processadores Markdown disponíveis. Muitos deles permitem adicionar extensões que permitem elementos de sintaxe estendidos. Verifique a documentação do seu processador para obter mais informações.

Tabelas

Para adicionar uma tabela, use três ou mais hifens (---) para criar o cabeçalho de cada coluna e use barras verticais (|) para separar cada coluna. Opcionalmente, você pode adicionar tubos em qualquer extremidade da tabela.

|  Sintaxe      |  Descrição    |
|  ------------ |  ------------ |
|  Cabeçalho    |  Título       |
|  Paragrafo    |  Texto        |

A renderização é essa:

As larguras das células podem variar, conforme mostrado abaixo, mas o resultado será sempre o mesmo

|  Sintaxe |  Descrição |
|  --- |  ----------- |
|  Cabeçalho |  Título |
|  Paragrafo |  Texto |

Dica: Criar tabelas com hifens e tubos pode ser entediante. Para acelerar o processo, tente usar o Gerador de tabelas Markdown. Crie uma tabela usando a interface gráfica e, a seguir, copie o texto formatado em Markdown gerado em seu arquivo.

Alinhamento

Você pode alinhar o texto nas colunas à esquerda, à direita ou ao centro adicionando dois pontos (:) à esquerda, à direita ou em ambos os lados dos hifens na linha do cabeçalho.

|  Sintaxe      |  Descrição    |  Teste texto      |
|  :---         |  :----:       |  ---:             |
|  Cabeçalho    |  Título       |  Exemplo de texto |
|  Paragrafo    |  Texto        |  E mais exemplo   |

A renderização é essa:

Formatação de textos em tabelas

Você pode formatar o texto dentro das tabelas. Por exemplo, você pode adicionar links, código (formatação de palavras ou frases utilizando a crase ( ` ), mas não blocos de código) e formação com ênfase.

Você não pode adicionar títulos, cotas bloqueadas, listas, regras horizontais, imagens ou tags HTML.

Exibindo o pipe

Você pode exibir um caractere de barra vertical (|) em uma tabela usando seu código de caractere HTML (|).

Bloco de códigos indentados

A sintaxe básica do Markdown permite criar blocos de código avançando as linhas em quatro espaços ou uma tabulação. Se você achar isso inconveniente, tente usar blocos de código protegidos. Dependendo do seu processador ou editor Markdown, você usará três crases (`` ) ou três tis (~~~) nas linhas antes e depois do bloco de código. A melhor parte? Você não precisa recuar nenhuma linha!

```
{
   "primeiroNome":  "João",
   "ultimoNome":  "Silva",
   "idade": 25
}
```

A renderização é essa:

{
  "primeiroNome":  "João",
  "ultimoNome":  "Silva",
  "idade": 25
}

Dica Você deseja exibir crases dentro de um bloco de código? Consulte esta seção para aprender como exibi-los.

Realce de código

Muitos processadores Markdown suportam realce de bloco de código. Este recurso permite adicionar realce de cor para qualquer linguagem em que seu código foi escrito. Para adicionar realce de sintaxe, especifique um idioma próximo as crases antes do bloco de código exibido.

```json
  {
   "firstName":  "John",
   "lastName":  "Smith",
   "age": 25
  }
```

A renderização é essa:

{
  "firstName":  "John",
  "lastName":  "Smith",
  "age": 25
}

Notas de rodapé

As notas de rodapé permitem adicionar notas e referências sem confundir o corpo do documento. Quando você cria uma nota de rodapé, um número sobrescrito com um link aparece onde você adicionou a referência da nota de rodapé. Os leitores podem clicar no link para ir para o conteúdo da nota de rodapé na parte inferior da página.

Para criar uma referência de nota de rodapé, adicione um circunflexo e um identificador entre colchetes ([^1]). Os identificadores podem ser números ou palavras, mas não podem conter espaços ou tabulações. Os identificadores correlacionam apenas a referência da nota de rodapé com a própria nota de rodapé - na saída, as notas de rodapé são numeradas sequencialmente.

Adicione a nota de rodapé usando outro acento circunflexo e número entre colchetes com dois pontos e texto ([^1]: Minha nota de rodapé). Você não precisa colocar notas de rodapé no final do documento. Você pode colocá-los em qualquer lugar, exceto dentro de outros elementos como listas, citações em bloco e tabelas. [^1]: Minha nota de rodapé.

Aqui está uma nota de rodapé simples, [^1] e aqui está outra mais longa. [^nota]

[^1]: Esta é a primeira nota de rodapé.
[^nota]: Aqui está um com vários parágrafos e código.

Avance parágrafos para incluí-los na nota de rodapé.

 `{meu código}`

Adicione quantos parágrafos desejar.

A renderização é essa:

Aqui está uma nota de rodapé simples, [^1] e aqui está outra mais longa. [^nota]

[^1]: Esta é a primeira nota de rodapé. [^nota]: Aqui está um com vários parágrafos e código.

Avance parágrafos para incluí-los na nota de rodapé.

{meu código}

Adicione quantos parágrafos desejar.

IDs nos títulos

Muitos processadores Markdown suportam IDs personalizados para cabeçalhos - alguns processadores Markdown os adicionam automaticamente. Adicionar IDs personalizados permite que você vincule diretamente aos títulos e os modifique com CSS. Para adicionar um ID de título personalizado, coloque o ID personalizado entre chaves na mesma linha do título.

### Meu ótimo título

A renderização é essa:

< h3 id= "meu-id-personalizado">Meu ótimo título</ h3>

Links para os IDs dos títulos

Você pode vincular títulos com IDs personalizados no arquivo criando um link padrão com um sinal de número (#) seguido pelo ID do cabeçalho personalizado.

Outros sites podem se vincular ao título adicionando o ID do título personalizado ao URL completo da página da web (por exemplo, [ID do título](https://markdownguide.org/extended-syntax#heading-ids)).

Listas de Definição

Alguns processadores Markdown permitem criar lista de definições de termos (definition list) e suas definições correspondentes. Para criar uma lista de definições, digite o termo na primeira linha. Na próxima linha, digite dois pontos seguido por um espaço e a definição

```html
Primeiro termo
: Esta é a definição do primeiro item.

Segundo termo
: Esta é a definição do segundo item.
```

O HTML será esse:

< dl>
  < dt>First Term</ dt>
  < dd>This is the definition of the first term.</ dd>
  < dt>Second Term</ dt>
  < dd>This is one definition of the second term.</ dd>
</ dl>

A renderização é essa:

Primeiro termo : Esta é a definição do primeiro item.

Segundo termo : Esta é a definição do segundo item.

Tachado

Você pode tachar palavras colocando uma linha horizontal no centro delas. O resultado é assim. Este recurso permite que você indique que certas palavras são um erro que não deve ser incluído no documento. Para rasurar palavras, use dois símbolos de til ( ~~ ) antes e depois das palavras.

~~O mundo é plano~~. Agora sabemos que o mundo é redondo.

A renderização é essa:

O mundo é plano. Agora sabemos que o mundo é redondo.

Lista de tarefas

As listas de tarefas permitem que você crie uma lista de itens com caixas de seleção. Em aplicativos Markdown que suportam listas de tarefas, as caixas de seleção serão exibidas ao lado do conteúdo. Para criar uma lista de tarefas, adicione travessões ( - ) e colchetes com um espaço ( [ ] ) na frente dos itens da lista de tarefas. Para selecionar uma caixa de seleção, adicione um x entre os colchetes ( [x] ).

- [x] Escrever o *release* para imprensa
- [ ] Atualizar o site
- [ ] Contactar a mídia

O resultado será algo parecido com a imagem abaixo:

• [x] Escrever o release para imprensa
• [ ] Atualizar o site
• [ ] Contactar a mídia

Emoji

Existem duas maneiras de adicionar emoji a arquivos Markdown: copie e cole o emoji em seu texto formatado em Markdown ou digite códigos de emoji shortcodes.

Copiando e colando emoji

Na maioria dos casos, você pode simplesmente copiar um emoji de uma fonte como a Emojipedia e colá-lo em seu documento. Muitos aplicativos Markdown exibirão automaticamente o emoji no texto formatado em Markdown. Os arquivos HTML e PDF exportados do aplicativo Markdown devem exibir o emoji.

Dica: Se você estiver usando um gerador de site estático, certifique-se de que o encode da sua página HTML está em UFT-8.

Usando os atalhos

Alguns aplicativos Markdown permitem inserir emoji digitando códigos de atalho de emoji. Eles começam e terminam com dois pontos e incluem o nome de um emoji.

Indo acampar! :tent: Volto logo.

Isso será tão divertido! :joy:

A renderização é essa:

Indo acampar! ⛺ Volto logo.

Isso será tão divertido! 😂

Observação: você pode usar esta lista de códigos de atalho de emoji, mas lembre-se de que os códigos de atalho de emoji variam de aplicativo para aplicativo. Consulte a documentação do aplicativo Markdown para obter mais informações.

Vinculação automática de URL

Muitos processadores Markdown transformam URLs em links automaticamente. Isso significa que se você digitar https://exemplo.com seu processador Markdown o transformará automaticamente em um link, mesmo que você não tenha usado colchetes.

https://google.com

A renderização é essa:

https://google.com

Desabilitando a vinculação automática de URL

e você não quiser que um URL seja vinculado automaticamente, você pode remover o link exibindo o URL como um código com crases.

`https//google.com`

A renderização é essa:

https://google.com

Se você leu até aqui, meu muito obrigado 🤘🏼💝. Gostou? Compartilhe para mais pessoas! 😉