Skip to content

Latest commit

 

History

History
273 lines (172 loc) · 6.95 KB

GuiaMarkdown.md

File metadata and controls

273 lines (172 loc) · 6.95 KB
Raw

📝 Guia Markdown simples

📎 Índice

🎯 Sobre

Olá, este guia foi criado durante o mini curso sobre Markdown ministrado por mim durante o Hacktoberfest OpenDevUFCG com o intuito de ajudar você a encontrar os principais marcadores/formatadores da linguagem Markdown.

Espero que lhe ajude no seu dia a dia, e que você faça muita coisa legal com esse contéudo. Enfim, sucesso e aproveite!!! 💙

📖 História do Markdown

Em 2004, John Gruber criou a linguagem Markdown em colaboração com Aaron Swartz na sintaxe, buscando possibilitar a escrita em XHTML (ou HTML) estruturalmente válido partindo de textos simples.

✏️ Títulos

Para criar títulos, pode-se usar de um # até seis ###### para definir o nível (tamanho) do título.

# Exemplo

Exemplo

## Exemplo

Exemplo

### Exemplo

Exemplo

#### Exemplo

Exemplo

##### Exemplo

Exemplo

###### Exemplo

Exemplo

📋 Parágrafo

Para escrever páragrafos não temos uma formatação, basta escrever de forma contínua.

Basta escrever mesmo, e nada mais...

🅱️ Negrito

Para usar o negrito, basta usar asteriscos duplos ao redor da palavra ou frase.

Exemplo:

  • OpenDevUFCG

ℹ️ Itálico

Para colocar uma palavra em itálico, pode-se colocá-la entre um asterisco ao derredor da palavra ou frase.

*OpenDevUFCG*

Exemplo:

  • OpenDevUFCG

❌ Riscado (strike)

Para riscar uma palavra ou frase, basta adicionar ao seu redor dois símbolos de til.

~~OpenDevUFCG~~

Exemplo:

  • OpenDevUFCG

📑 Listas

🔢 Listas numeradas

Para criar uma lista numerada, pode-se iniciar a linha utilizando qualquer número e um ponto, os demais números da lista seguirão a sequência com base no primeiro número adicionado.

Exemplo:

  1. Python
  2. Java
  3. JavaScript
  4. C++

#️⃣ Listas com marcadores

Basta usar um hífen seguido de um hífen para seja criada de uma lista com marcadores.

- Python

Exemplo:

  • Python
  • Java
  • JavaScript
  • C++
  • EXEMPLO

📝 Listas de tarefas

Adicionando - [ ] ou - [x] antes de cada item, pode-se criar uma "to do list" com itens marcados ou desmarcados.

Exemplo:

  • Header
  • Card dropdown
  • EXEMPLO

📷 Imagens

Para inserir uma imagem, usa-se o símbolo ![ ]( ) onde a descrição fica contida nos colchetes e o endereço da imagem contida entre parênteses.

Obs: Neste caso está sendo utilizado HTML para que seja controlado o tamanho e a posição.

Exemplo:

🔗 Links

Para inserir links, basta remover a ! utilizada para utilizar imagens.

[Site OpenDevUFCG](https://opendevufcg.org/)

Exemplo:

💻 Trechos de código

Comando isolado

Se for citar um comando apenas, basta colocá-lo entre crases.

`console.log('Hello world)`

Exemplo:

  • console.log('Hello world)

Trecho de código

Para compartilhar um código com mais linhas, basta colocar todas elas dentro de um três crases consecutivas e se quiser especificar a linguagem, basta você adicionar a extensão da linguagem (por exemplo, para Python a sua extensão é a py) logo após as três crases separado por um espaço.

const handleClick = useCallback(
        () => {
            setCurrentFilter(title)
        },
    )

``` py

print("Hello world") ```

Exemplo:

print("Hello world")

😃 Emojis

Existem códigos especiais para emojis em Markdown, que devem ser representados entre símbolos de ::

:nome_do_emoji:

Exemplo:

📝

Você pode encontrar os nomes dos emojis aqui.

📊 Tabelas

Criar tabelas em Markdown basta usar os pipes | e os hifens -

Nome | Tipo | Descrição | Programador(a)

:---: | ---: | :--- | :---:

imageURL| string | varíavel que recebe o link com endereço de imagem | Leandra

title | string | varíavel que recebe o título do comércio | Rodrigo

Exemplo:

Nome Tipo Descrição Programador(a)
imageURL string varíavel que recebe o link com endereço de imagem Leandra
title string varíavel que recebe o título do comércio Rodrigo

--- Formatação padrão (alinhamento à esquerda)

:---: Conteúdo Centralizado

---: Alinhamento à direita

:--- Alinhamento à esquerda

Também é possível utilizar ferramentas que criam o código em markdown baseado em uma interface gráfica mais amigável. Você pode encontrar uma dessas soluções clicando aqui.

💬 Quote

Ao responder alguém, podemos realizar citações a outras mensagens completas ou a trechos dela, usando sinais de > no início da linha.

> João disse que Leandra forneceu este dado para o componente cardCategory

João disse que Leandra forneceu este dado para o componente cardCategory

🔣 Símbolos reservados

Como os símbolos utilizados em Markdown são os mesmos que utilizamos para escrever em qualquer outro arquivo pode acontecer de nós precisarmos usar um sinal desse. Para isso, basta adicionar uma \ (contrabarra) na frente do símbolo, para que o símbolo seja apresentado na tela.

Exemplo: Pode-se usar # para criar um título semelhante ao <h1> do HTML.

📏 Linhas

Para utilizar uma linha, basta utilizar:

---

Exemplo:

📃 Referências