Começando com Markdown [Guia para iniciantes]

23 de abril de 2021

No meu trabalho, muitas vezes tenho que escrever código, escrever a documentação que vai com esse código, criar páginas da Web e trabalhar em projetos de restauração de texto, e escrevi vários trabalhos formais enquanto eu estava na escola. Eu posso incluir notas de aula aqui também; Eu precisava escrevê-los por quase todas as aulas.

Eu uso Markdown para quase toda a minha escrita e é um grande poupador de tempo para mim.

Neste artigo, vou compartilhar minha experiência com Markdown. Você estará aprendendo o seguinte:

  • O que é Markdown?
  • Como funciona?
  • Sintaxe básica do Markdown e como usá-las

O que é Markdown?

Se você é novo em Markdown, é uma ferramenta de conversão de texto para HTML para escritores da Web. Arquivos de Markdown seguem uma sintaxe específica que é fácil de ler e fácil de escrever. Eles são arquivos de texto simples para que possam ser criados usando qualquer editor de texto em qualquer computador. Esses arquivos podem ser transformados em páginas da Web - e as páginas da Web são criadas usando uma marcação chamada HTML.

Markdown então, é apenas uma maneira de criar páginas da Web sem a necessidade (ou até mesmo saber como) escrever código HTML. Na verdade, Markdown é uma ótima maneira de formatar texto simples, mesmo que você não precise converter em HTML. Alguém uma vez descreveu Markdown para mim dessa maneira:

"Não é 'O que você vê é o que você tem', mas 'O que você vê é o que você quer dizer'".

Markdown, no entanto, é mais do que um esquema de formatação fácil, é também uma ferramenta de software que converte a formatação de texto simples para HTML.

É por isso que a sintaxe é importante. Se você quiser um título na sua página da Web, Markdown irá criar uma com base no(s) caractere(s) que você usar na frente do seu título. Uma amostragem de alguma sintaxe de Markdown é mostrada nesta captura de tela:

janela de retexas mostrando sintaxe e visualização 2

Markdown convertido para HTML

Então, como faço esse texto simples para a conversão HTML?

O Markdown de John Gruber é um script Perl que é executado na linha de comando. Basicamente, ele lê o texto Markdown que você cria e constrói uma página da Web a partir dele.

Eu evitarei a linha de comando aqui pois existem muitos editores de Markdown excelentes que podem fazer essa conversão para você. Não só isso, muitos desses editores permitirão que você escreva seu texto e mostre o que a página da Web parecerá (chamada Rendering) ao mesmo tempo.

Os editores de Markdown geralmente são configurados para mostrar dois quadros. O quadro esquerdo é onde você escreve seu texto e o quadro direito mostra qual será o texto formatado em HTML:

ghostwriter dois quadros 1

A maioria dos editores de Markdown tem dois painéis para escrever e visualizar o texto

Quando você terminar com seu texto e está feliz com ele, basta salvar o arquivo de Markdown. Dessa forma, você sempre terá no caso de precisar editar ou reescrever mais tarde. Quando o arquivo for salvo, você pode pedir ao editor que exporte o arquivo de Markdown para HTML.

O editor criará a página da Web, usando seu Markdown como referência. Seu arquivo de Markdown não será alterado durante uma exportação - você ainda terá - junto com um arquivo HTML (página HTML) separado e recém-criado que você pode colocar em um servidor da Web.

Nota: Muitos editores de marcação também podem exportar seus arquivos de Markdown para outros formatos, como .doc, .docx e .pdf. Você pode aprender sobre essas configurações avançadas e software extra que você pode precisar, mais tarde.

Sintaxe de marcação básica

Para abranger o assunto rapidamente para um novo usuário de Markdown, vou me limitar para cobrir a sintaxe que uso na maioria das vezes. Isso acredito que será o mais útil - você pode ser produtivo agora enquanto você aprende mais sobre o que o Markdown pode fazer por você mais tarde.

Escreva cabeçalhos

Eu normalmente uso caracteres # para denotar títulos. Existem seis níveis:

# Level 1 Heading
## Level 2 Heading
### Level 3 Heading
#### Level 4 Heading
##### Level 5 Heading
###### Level 6 Heading

Há outro estilo de cabeçalho que usa linhas abaixo do texto. Eu raramente uso esse tipo de escrita já que estou limitado a apenas dois. Uma linha dupla, que é feita com o caractere =, faz um cabeçalho de H1. Uma única linha, feita com o caractere -, faz um cabeçalho H2:

Level 1 Heading
===============

Level 2 Heading
---------------

Cabeçalhos e subtítulos de marcação

Parágrafos

Os parágrafos são separados por uma linha em branco (certifique-se de que haja uma linha em branco entre os parágrafos). Não recue a primeira linha. Recuo com um <Tab> ou <spaces> tem um propósito diferente no Markdown.

Um parágrafo é um bloco de texto e não deve ser indentado com espaços ou guias. Pode ter uma linha ou muitas linhas. Para terminar um parágrafo e iniciar um novo, a tecla <Enter> é pressionada duas vezes; Os parágrafos são separados por uma linha em branco.

Exemplo de parágrafo em marcação

Quebras de linha

Lembre-se de que, com os parágrafos, uma linha em branco tem que separá-las e isso é feito pressionando duas vezes na tecla <Enter>. Markdown é rigoroso sobre isso.

Markdown não suporta parágrafos "hard-wrapped" ou "linhas de tamanho fixo". Ou seja, pressionar <Enter> uma vez não forçará o texto a uma nova linha. Pode aparecer assim na janela de edição, mas o HTML não mostrará isso.

No entanto, haverá momentos em que você precisar quebrar parágrafos com alguma maneira de dividir uma linha. Markdown tem uma maneira de fazer isso, mas pode parecer um pouco estranho no começo: Uma quebra de linha é feita terminando uma linha com dois ou mais espaços e, em seguida, pressionando na chave <Enter> uma vez.

Breaks de linha na sintaxe de markdown

Aqui está um exemplo de um verso curto. Cada linha tem dois espaços no final. A última linha, já que é o fim do verso, não tem os espaços extras. Como é o final do verso (parágrafo), eu pressionei a tecla <Enter> duas vezes:

BAA BAA ovelha negra,
Você tem alguma lã?
Sim senhor. Sim senhor.
Três sacos cheios.

Adicionando dois espaços no final de uma linha, para criar uma quebra de linha, pode demorara para se acostumar.

Quebra de linha bem sucedida no markdown

Réguas horizontais

As réguas horizontais são ótimas para dividir o texto em seções.

Use três ou mais traços -, sublinhados _ ou asteriscos * para réguas horizontais, assim:

`---`

`***`

`___`

Você pode até colocar espaços entre os caracteres:

`- - -`

Eu não uso réguas horizontais com muita frequência em artigos, mas eles são úteis para mim em entradas de blogs, logs do sistema e notas de classe.

Exemplo de regras horizontais de marcação

Ênfase no texto com negrito e itálico

Quando você quer que uma palavra ou frase se destaque e seja notada, você pode torná-la em negrito ou em itálico. Itálico e negrito podem ser feitos de duas maneiras. O primeiro é cercando o texto com asteriscos *, enquanto o segundo é usar sublinhados _.

Para deixar em itálico uma palavra ou frase, deixe o texto entre um sublinhado ou asterisco. Para deixar uma palavra ou frase em negrito, deixe entre dois sublinhados ou asteriscos:

This is *italics* made with asterisks.

This is _italics_ made with underscores.

This is **bold**made with asterisks.

This is __bold__ made with underscores.

Lembre-se de usar o mesmo caractere. Um asterisco de um lado de uma palavra ou frase, e um sublinhado no outro lado, não funcionará. O mesmo caractere tem que estar em ambos os lados da palavra ou frase.

Adicionando negrito e itálico no markdown

Citações em bloco

Citações de bloco são usadas para cotações diretas. Se você estava escrevendo uma entrada de blog e queria repetir algo que Benjamin Franklin disse, você poderia usar uma cotação de bloco.

Um suporte de ângulo direito é usado para especificar uma cotação de bloco:

> This is a block quote.

>> Use two right angle brackets if you want a block quote that is further indented.

Exemplo de citação de bloco de Markdown

Adicionando links no Markdown

Links são simplesmente legais. Existem três maneiras de criar links no compartimento básico, mas eu só cobrirei dois aqui: links regulares e links automáticos.

O terceiro tipo de link, chamados de links de referência, são suportados em Markdown básice e sabores mais avançados. Eu quero começar rapidamente. Você pode procurar links de referência quando estiver pronto para isso.

Links normais permitem vincular a vários sites. O nome do site, ou uma frase que você deseja usar, é colocado em colchetes quadrados []. O link real está entre parênteses ().

Visit [It\'s FOSS](https://itsfoss.com) today!

Os links automáticos são feitos com colchetes de ângulo <> em torno do link. O link é um endereço real (uma endereço de e-mail ou da web). O link é escrito e, quando é convertido em HTML, o link digitado se torna um link funcional.

<http://automatic-link-to-url.com/>

<name@emailaddress.com>

Isso é útil para quando você deseja deixar o endereço em seu texto:

Adicionando links no markdown

Adicionando imagens no Markdown

Links para imagens são quase idênticas a links para sites. A pequena diferença entre links de sites e imagens, é que os links de imagem começam com um ponto de exclamação !

O nome da imagem, ou uma frase descritiva da imagem, é colocada em colchetes []. O link real fica dentro dos parênteses ().

Você pode incorporar imagens assim:

![alternate text](./images/image.jpg)

Aqui está um link de exemplo. É um link de amostra, sem imagem, mas é uma boa amostra de como um link real pode parecer:

![a picture of bill](./images/my_photo_of_me.jpg)

Adicionando imagens no markdown

Listas

Listas são feitas por muitas razões. Eles podem ser usados como itens de "coisas para fazer", elementos de tópicos em um esboço, listas de peças em um projeto de montagem e assim por diante. Existem dois tipos principais de listas: desordenadas e ordenadas.

Listas não ordenadas não são numeradas; Estes são os "itens de pontos" que vemos em muitos documentos. Listas ordenadas são numeradas.

Para criar uma lista ordenada (numerada), basta começar cada linha com um número, assim:

1. Item one.
2. Item two.
3. Item three.

As listas não ordenadas não são numeradas, mas usam um asterisco *, um sinal de mais +, ou um sinal de menos - no início de cada item na lista. Eu prefiro usar um asterisco ou sinal de menos, mas você pode escolher:

* Item one.
+ Item two.
- Item three.

Sub-itens podem ser adicionados às listas ordenadas e não ordenadas, desfeito, assim:

1. Item 1
   1. Sub-item 1
   2. Sub-item 2
2. Item 2
3. Item 3

Listas em Markdown ordenadas e desordenadas

Folha de dicas com a sintaxe de Markdown

Para sua referência, aqui está uma pequena listagem da sintaxe de Markdown que foi coberta nesta pequena introdução.

Se você decidir adotá-la como uma ferramenta de escrita, você descobrirá que Markdown tem os meios para simplificar ainda mais a escrita.

Markdown Syntax Syntaxe

Baixar Markdown tabela de dicas no formato PDF

Conclusão

Markdown pode fazer mais do que descrevi aqui. Uma enorme porcentagem da minha escrita pode ser realizada com a sintaxe de Markdown que cobri aqui - e estes são os itens que eu uso na maioria das vezes, mesmo em projetos mais complexos.

Se tudo isso parece muito simples, é realmente tão fácil. Markdown foi construída para simplesmente a tarefa de escrita, mas você não precisa tomar minha palavra para isso. Experimente! Não há necessidade de instalar um editor de Markdown; Você pode fazer isso online. Existem vários bons editores de marcação online. Aqui estão três que eu prefiro:

Dingus, de John Gruber, Editor.md e Dillinger. Editor.md e Dillinger permitirão que você veja sua marcação renderizada como HTML em tempo real. Dingus não visualiza em tempo real, mas há uma folha de dicas de sintaxe de Markdown na página para referência.

Edição de markdown no navegador

Experimente alguns dos exemplos neste artigo em qualquer um desses editores on-line. Experimente algumas de suas próprias idéias também. Isso permitirá que você se acostume a marcar antes de possivelmente se comprometer a aprender mais sobre isso.

Confira também a versão original desse post em inglês
Esse post foi originalmente publicado no site itsfoss.com. Traduzido pela rtland.team

Getting Started With Markdown [Beginner’s Guide]

Propaganda
Blog Comments powered by Disqus.
Propaganda