Seja muito bem-vindo(a)

Ao espaço onde guardo minhas anotações!😊

Página Inicial Árvore de links Sobre

Guia de MarkDown - Parte 1

Parte 1 Parte 2

Markdown é uma linguagem de marcação leve e simples, usada para formatar texto de forma rápida e eficiente, sem a necessidade de aprender HTML. Ele é frequentemente utilizado para criar documentos legíveis e bem formatados em plataformas como GitHub, blogs e sistemas de documentação. Com o Markdown, você pode adicionar títulos, listas, links, imagens e muito mais, usando uma sintaxe fácil de entender.

Um Guia de Markdown - BÁSICO que fará você sobreviver no GitHub, e que, nesta primeira parte, abordará estes temas:

ATENÇÃO - Neste guia será apresentado alguns exemplos para facilitar a explicação, o primeiro exemplo, mostrará como é feita a codificação, e caso haja um segundo, mostrará como é o resultado.

A Formatação Básica De Texto:

1. Títulos:

O Markdown permite criar títulos de seis níveis diferentes, de H1 (o maior) a H6 (o menor).
Para criar um título, você usa o símbolo # (cerquilha / hash) no início da linha, seguido de um espaço e do texto do título. O número de símbolos # (cerquilha / hash) indica o nível do título

Exemplo:

# Título H1
## Título H2
### Título H3
#### Título H4
##### Título H5
###### Título H6

Título H1

Título H2

Título H3

Título H4

Título H5
Título H6

OBSERVE:
Índice automático:
O GitHub analisa os títulos em seus arquivos Markdown e gera automaticamente um índice (ou sumário) no topo do arquivo. Isso facilita a navegação em documentos longos, permitindo que os leitores cliquem nos títulos para ir diretamente para as seções correspondentes.




2. Estilos de Texto:

Negrito:
Envolva o texto com dois ** (asteriscos) ou dois __ (sublinhados).

Exemplo:

**texto em negrito** ou __texto em negrito__

Isso aqui está em negrito: texto em negrito


Itálico:
Envolva o texto com um * (asterisco) ou um _ (sublinhado).

Exemplo:
*texto em itálico* ou _texto em itálico_

Isso aqui está em itálico: texto em itálico


Tachado:
Envolva o texto com dois ~~ (Til / Tilde).

Exemplo:
~~texto tachado~~

Isso aqui está tachado: texto tachado


Subscrito:
Use a sintaxe html: <sub> texto... </sub>.

Exemplo:
Isso aqui está subscrito: <sub> texto subscrito </sub>

Isso aqui está subscrito: texto subscrito


Sobrescrito:
Use a sintaxe html: <sup> texto... </sup>.

Exemplo:
Isso aqui está sobrescrito: <sup> texto sobrescrito </sup>

Isso aqui está sobrescrito: texto sobrescrito


Sublinhado:
Use a sintaxe html: <ins> texto... </ins>.

Exemplo:
Isso aqui está sublinhado: <ins> texto sublinhado </ins>

Isso aqui está sublinhado: texto sublinhado

OBSERVE:
O Markdown foi criado com a intenção de ser integrável com HTML, permitindo assim, uma utilização de muitas tags HTML para estilizar conteúdos que a sintaxe padrão do Markdown não suporta. Note que, muitas tags HTML podem ser usadas (mas lembre-se que não são todas as tags existentes) porque, é o GitHub que irá renderizá-las corretamente.




3. Citações:

Use o símbolo > (maior que) no início da linha para indicar uma citação.
Você pode citar várias linhas, colocando > (maior que) no início de cada linha.

Exemplo:

> Isto é uma citação.
> Esta é a segunda linha da citação.

Isto é uma citação.
Esta é a segunda linha da citação.




4. Bloco de Código:

Código em linha:
Envolva o código com ` (acento grave).

Exemplo:

`console.log("Olá, mundo!");`

console.log("Olá, mundo!");


Blocos de código:
Envolva o bloco de código com três ``` (acentos graves).
Você pode especificar a linguagem de programação após as três crases iniciais para habilitar o realce de sintaxe.

Exemplo:
```python
print("Olá, mundo!")
```

print("Olá, mundo!")




5. Cores:

Envolva o código de cor (HEX, RGB ou HSL) com ` (acento grave).
O GitHub exibirá uma pequena amostra da cor ao lado do código.

Exemplos:

Aqui VERMELHO em HEX: `#FF0000`
Aqui AZUL em RGB: `rgb(0, 0, 255)`

OBSERVE:
Isso só tem suporte em problemas, solicitações de pull e discussões.




A Inclusão De Elementos Multimídia:

1. Links:

Links embutidos:
Use a sintaxe: [texto do link](URL).

Exemplo:

Para ir para a Página inicial: [Clique aqui](https://b-ariel.github.io)

Para ir para a Página Inicial: Clique aqui


Links de seção:
Use: #nome-da-seção
Onde "nome-da-seção" é o texto do título da seção (com espaços substituídos por - (hífens / traços) e letras minúsculas).

Exemplo:
Para ir na seção - "A Formatação Básica De Texto": [Clique aqui](#a-formatação-básica-de-texto)

Para ir na seção - "A Formatação Básica De Texto": Clique aqui


OBSERVE:
O github cria essas âncoras automaticamente.

Links relativos:
Use: [texto](caminho/para/arquivo) para criar links para outros arquivos no mesmo repositório.

Exemplo:
Use esse link para ver: [meus dogs](Main/Images/pingo-and-valente(pinscher-and-akita).jpg)

Use esse link para ver: [a página inicial](Main/index.html)


Use esse link para ver: meus dogs

Use esse link para ver: a página inicial
OBSERVE:
O texto do link deve estar em uma única linha, e usar a / (barra), pois é um link relativo


Âncoras personalizadas:
Use tags HTML para ancorar: <a name="nome"></a>
Para assim criar âncoras personalizadas dentro do documento.
Em seguida, use: [texto](#nome)
Isso cria um link para essa âncora.

Exemplo:
<a name="basic-text-formatting"></a>

Já qui fica o link - [Um link personalizado](#basic-text-formatting)

Já qui fica o link - Um link personalizado


OBSERVE:
As âncoras personalizadas não são consideradas pelo comportamento automático de nomenclatura e numeração de links de cabeçalho automáticos.




2. Imagens:

Use a sintaxe: ![texto alternativo](URL da imagem)

"texto alternativo" é uma descrição da imagem para acessibilidade.
E o GitHub suporta URLs de imagens externas e links relativos para imagens no mesmo repositório.

Exemplo:

![meus dogs](../Images/pingo-and-valente(pinscher-and-akita).jpg)

![minha outra dog](Main/Images/princesa-the-pinscher.jpg)

meus dogs

minha outra dog


OBSERVE:
Também existe o suporte para o elemento <picture> do html.




3. Emojis:

Digite : (dois-pontos) seguido do código do emoji.

Exemplo:

:smile: :laughing: :blush:
:smiley: :relaxed: :wink:

😄 😆 😊
😃 ☺️ 😉




A Organização Do Conteúdo:

1. Listas:

Listas não ordenadas:
Use - (hífens / traços), * (asteriscos) ou sinais de + (mais) no início de cada linha.

Exemplo:

- Item 1
* Item 2
+ Item 3

  • Item 1
  • Item 2
  • Item 3


Listas ordenadas:
Use números seguidos de . (ponto) no início de cada linha.

Exemplo:
Assim:

1. Primeiro item
2. Segundo item
3. Terceiro item

OU ASSIM:

1. Primeiro item
1. Segundo item
1. Terceiro item

As duas opções ficam a mesma coisa:
  1. Primeiro item
  2. Segundo item
  3. Terceiro item


Listas aninhadas:
Recue os itens da lista aninhada com espaços.
O número de espaços determina o nível de aninhamento.
- Item 1
     - Item 1.1
     - Item 1.2
        - Item 1.2.1
        - Item 1.2.2
- Item 2

● Item 1
    ○ Item 1.1
    ○ Item 1.2
       ■ Item 1.2.1
       ■ Item 1.2.2
● Item 2

OBSERVE:
Você pode criar vários níveis de listas aninhadas usando o mesmo método.
Sendo que o primeiro nível aninhado, deve ter cinco espaços obrigatoriamente. Mas para cada nível aninhado a mais, você deve adicionar três espaços a mais que o anterior.




2. Listas de Tarefas:

Use [ ] (colchetes) para tarefas não concluídas e [x] (colchetes com x) para tarefas concluídas.

Exemplo:

- [ ] Ser famoso
- [x] Fazer um site

□ Ser famoso
■ Fazer um site




3. Parágrafos:

Inclua dois espaços no final da primeira linha.
Ou inclua uma \ (barra invertida) no final da primeira linha.
Ou use a tag HTML <br> para criar uma quebra de linha.
Ou você deixa uma linha em branco entre duas linhas.

Exemplo

Primum praeceptum:<br>
Diliges Deum super omnia, et non habebis deos alienos. \
Secundum praeceptum:<br>
Nolite facere idola, neque simulacra colatis. \
Tertium praeceptum:<br>
Noli in vanum nomen Dei accipere. \
Quartum praeceptum:<br>
Sabbata et festivitates sanctas observa ex mandato. \
Quintum praeceptum:<br>
Honora patrem et matrem. \
Sextum praeceptum:<br>
Non occides. \
Septimum praeceptum:<br>
Non moechaberis. \
Octavum praeceptum:<br>
Non furtum facies. \
Nonum praeceptum:<br>
Falsum testimonium non dices. \
Decimum praeceptum:<br>
Non concupisces uxorem proximi tui.


Primum praeceptum:
Diliges Deum super omnia, et non habebis deos alienos.
Secundum praeceptum:
Nolite facere idola, neque simulacra colatis.
Tertium praeceptum:
Noli in vanum nomen Dei accipere.
Quartum praeceptum:
Sabbata et festivitates sanctas observa ex mandato.
Quintum praeceptum:
Honora patrem et matrem.
Sextum praeceptum:
Non occides.
Septimum praeceptum:
Non moechaberis.
Octavum praeceptum:
Non furtum facies.
Nonum praeceptum:
Falsum testimonium non dices.
Decimum praeceptum:
Non concupisces uxorem proximi tui.




4. Notas de Rodapé:

Como usar:
Use essa sintaxe: [^numero]
Para assim criar a referência da nota de rodapé no texto.

Depois use a mesma sintaxe: [^numero]
Para assim no texto da nota, definir o conteúdo desta mesma nota.

Exemplo:

<!-- As duas primeiras linhas ficam no texto normal,
e as duas ultimas são as que renderizam no final da página
-->

Aqui uma simples nota de rodapé[^1].
Uma nota de rodapé pode ter multiplas linhas[^2].

[^1]: Minha referência.
[^2]: Minha outra referência.


OBSERVE:
O lugar em que a nota de rodapé fica no Markdown, não influenciará a posição em que a nota será renderizada. Você pode escrever a nota logo após sua referência, e ela continuará sendo interpretada na parte inferior do Markdown.




Os Recursos Específicos Do GitHub:

1. Menções:

Digite @ (arroba) seguido do nome de usuário ou da equipe que você deseja mencionar.
Isso enviará uma notificação para a pessoa ou equipe mencionada.

Exemplo:

@B-Ariel




2. Alertas:

Use essa sintaxe: > [!TIPO]
Isso cria alertas, onde "TIPO" pode ser NOTE, TIP, IMPORTANT, WARNING ou CAUTION.

Exemplo:

> [!NOTE]
> Informações úteis que os usuários devem saber, mesmo quando estiverem lendo superficialmente o conteúdo.

> [!TIP]
> Conselhos úteis para fazer as coisas melhor ou mais facilmente.

> [!IMPORTANT]
> Informações importantes que os usuários precisam saber para atingir seus objetivos.

> [!WARNING]
> Informações urgentes que precisam de atenção imediata do usuário para evitar problemas.

> [!CAUTION]
> Aconselha sobre riscos ou resultados negativos de certas ações.




3. Ocultar Conteúdo (comentar):

Envolva o conteúdo que você deseja ocultar com comentários HTML: <!-- Texto... -->

Exemplo:

< !-- Isso é um comentário: Este texto não será exibido na renderização da página, apenas no código fonte.
-- >




4. Ignorar Formatação:

Como usar:
Use uma \ (barra invertida) antes do caractere Markdown que você deseja ignorar.

Exemplo:

O primeiro é um título, já o segundo, não:
# Olá, mundo!
\# Olá, mundo!

O primeiro é um título, já o segundo, não:

Olá, mundo!

# Olá, mundo!




EM CASOS DE DÚVIDA, SEMPRE BUSCAR A DOCUEMNTAÇÃO OFICIAL!