Guia Básico Linguagem Markdown
Markdown é uma linguagem de marcação que é utilizada para adicionar formatação a textos e documentos. Ela possui várias semelhanças com o HTML no seu propósito, porém utiliza caracteres não alfabéticos para determinar a formatação dos textos. Exemplo(*, #, <>, [], (), etc...). A linguagem foi criada em 2004 por John Gruber e é atualmente uma das linguagens de marcação mais utilizada no mundo.
==========================================================================================================
Títulos
Os títulos em markdown são representados através do caractere "#" e assim como em html eles possuem 6 níveis conforme representado abaixo:
título nível 1 # título nível 1
título nível 2 ## 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
==========================================================================================================
Ênfase/Negrito
Existem duas formas de dar ênfase para um texto. Basta adicionar o texto cercado pelo caractere ** ou __
Exemplo 1: **ênfase** -> ênfase
Exemplo 2: __ênfase__ -> ênfase
==========================================================================================================
Itálico
Para criar um texto em itálico basta adicionar o caractere "*" antes e depois do texto
Exemplo 1: *italico* -> italico
Exemplo 2: _italico_ -> italico
==========================================================================================================
Sobrescrito
Para criar um trecho de texto sobrescrito devem ser utilizados os seguintes caracteres "~~" antes e depois do texto.
Exemplo de sobrescrito
Este texto está sobrescrito
==========================================================================================================
Links
É possível criar links de duas maneiras (texto-âncora ou link direto)
Texto-âncora -> []()
Entre os colchetes deve ser colocado o texto que será apresentado e entre os parênteses deve ser colocado o link da página desejada.
[Google](https://google.com\)
Google -> Exemplo de link utilizando um texto-âncora. Ao clicar na palavra "Google" o usuário será redirecionado para o link informado.
Link direto -> <>
Para criar um link direto basta colocar o link entre os caracteres <>
https://google.com -> Exemplo de link direto
==========================================================================================================
Quebra de caracteres
Quando for necessário escrever na tela algum dos caracteres que são utilizados pela linguagem markdown
basta adicionar um \ antes do caracteres desejado
Exibindo os caracteres -> * < > _
==========================================================================================================
Quebra de linha
Para realizar uma quebra de linha, ou seja, adicionar o próximo conteúdo na próxima linha, basta adicionar dois espaços no final da linha e a seguir apertar "enter"
==========================================================================================================
Lista não ordenada
Uma lista não ordenada pode ser criada com qualquer um dos seguintes caracteres (-, +, *), porém apesar de funcionar se os caracteres forem misturados a recomendação é que um dos caracteres sejam escolhidos e utilizado conforme no exemplo abaixo:
Exemplo de lista não ordenada
- item 1
- item 2
- item 3
Exemplo de lista não ordenada aninhada
- item 1
- item 2
- item 2.1
- item 2.2
- item 3
- item 4
==========================================================================================================
Lista ordenada
As listas ordenadas são criadas da mesma maneira das listas não ordenadas porém no lugar dos caracteres utilizados para representar as listas deverão ser colocados números conforme no exemplo abaixo:
Exemplo de lista ordenada
- item 1
- item 2
- item 3
- item 4
Exemplo de lista ordenada aninhada
- item 1
- item 2
- aninhado
- aninhado
- item 3
==========================================================================================================
Imagens
Para inserir uma imagem devemos utilizar os caracteres ''
Dentro dos colchetes deve ser colocado um título para imagem ou um texto alternativo caso a imagem não seja carregada. Dentro dos parênteses deve ser colocado o endereço da imagem.
Definição ->
Exemplo:
==========================================================================================================
Citação
É possível criar citações, que são trechos que serão apresentados de forma destacada do resto do texto e que no HTML são representados através das tags
Exemplo de uma citação simples
As citações podem conter várias linhas ou ser aninhadas como no exemplo abaixoExemplo de citação aninha
Coloque seu texto aqui
Ultimo paragrafo==========================================================================================================
Task Lists/Lista de Tarefas
O Markdown permite que sejam criadas listas de tarefas, que são checkbox que podem ser utilizados para marcar que determinada tarefa tenha sido concluída ou não. Apesar de ser um recurso interessante ele não funciona para o VSCode mas foi testado com sucesso no GitHub.
Para criar uma tarefa basta adicionar os seguintes caracteres "- [ ]" para tarefas não concluídas e "- [x]" para tarefas concluídas.
- [ ] Tarefa 1
- [ ] Tarefa 2
- [x] Tarefa 3
==========================================================================================================
Code Highlight
O code highlight tem semelhanças com as citações relatadas acima, porém são utilizados para destacar trechos de códigos que eventualmente são colocados dentro de um documento. É interessante ressaltar que é possível informar a linguagem de programação a qual o trecho se refere, e assim o texto terá especificadades em sua formatação de acordo com a linguagem informada.
Existem 3 caracteres que podem ser utilizados para criar essa formatação (
,``, ~~~)Para trechos de códigos que ocupem apenas uma linha basta utilizar o caractere "`" no início e no fim do trecho de código
Exemplo de um trecho de código em apenas uma linha na linguagem javascript
console.log(nome)Para trechos de código que utilizem mais de uma linha deve ser utilizado os seguintes caracteres (~~~ ou `
) no início e no final do trecho do código. Lembrando que para informar a linguagem que será utilizada no trecho do código basta adicionar o nome da linguagem logo após o início do trecho de código conforme o exemplo abaixo:Exemplo utilizando ~~~
let idade = 30 console.log(idade)Exemplo utilizando
``
javascript
let idade = 30console.log(idade)
`==========================================================================================================
Tabelas
Para criar tabelas com markdown basta separar as colunas com o caractere "|" e separar a linha do cabeçalho das demais linha com o caractere "-"
Para alinhar os dados das colunas temos 3 opções. O caractere ":" é o responsável pelo alinhamento dos dados e deve ser colocados na linha que separa o cabeçalho dos dados da seguinte forma: (: a esquerda para que o alinhamento seja feito a partir da esquerda, : a direita para alinhamento a partir da direita e : no início e no final para que os dados sejam alinhados ao centro).
No exemplo abaixo temos uma tabela com cada coluna alinhada em um padrão de acordo com a formatação informada na segunda linha.
Coluna 1 Coluna 2 Coluna 3 Linha 1 Linha 1 Linha 1 Linha 2 Linha 2 LInha 2 Linha 3 Linha 3 Linha 3 ==========================================================================================================
VSCode
O VSCode é um dos editores de texto mais utilizado por programadores de todo o mundo, devido a sua grande possibilidade de personalização e quantidade enorme de plugins que potencializam sua produtividade ele se tornou uma poderosa ferramenta para escrita de código. Em relação ao Markdown o VSCode possui um recurso nativo(não precisa ser intalado) que permite que o código escrito em Markdown seja pré visualizado dentro do próprio editor. Para abrir o recurso "Markdown: Open Preview" podemos utilizar o atalho (Ctrl+Shift+V) ou (Command+Shift+V) para utilizadores do MacOS.
==========================================================================================================
Encontrou algum erro? gostaria de dar alguma sugestão? Envie seu comentário para helderatosta@gmail.com.
Referências utilizadas para criação deste material:
https://docs.pipz.com/central-de-ajuda/learning-center/guia-basico-de-markdown#open
https://www.markdownguide.org/getting-started/
https://www.markdownguide.org/cheat-sheet/
Top comments (0)