Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/heliocarlitos/formatacao-e-sintaxe-basica-do-github
Quando eu comecei a usar o GitHub tinha muita dificuldade em formatar e organizar melhor os meus README, mas depois de algumas pesquisas eu descobri como fazer isso, e para que você não sofra como eu, decidi fazer essa pequena documentação para ti guiar a personalizar os seu README. Espero que eu possa te ajudar.
https://github.com/heliocarlitos/formatacao-e-sintaxe-basica-do-github
Last synced: about 1 month ago
JSON representation
Quando eu comecei a usar o GitHub tinha muita dificuldade em formatar e organizar melhor os meus README, mas depois de algumas pesquisas eu descobri como fazer isso, e para que você não sofra como eu, decidi fazer essa pequena documentação para ti guiar a personalizar os seu README. Espero que eu possa te ajudar.
- Host: GitHub
- URL: https://github.com/heliocarlitos/formatacao-e-sintaxe-basica-do-github
- Owner: heliocarlitos
- Created: 2023-11-03T17:36:46.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-08-01T20:23:01.000Z (5 months ago)
- Last Synced: 2024-08-01T22:50:02.925Z (5 months ago)
- Homepage:
- Size: 262 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Introdução
Quando eu comecei a usar o GitHub tinha muita dificuldade em formatar e organizar melhor os meus README, mas depois de algumas pesquisas eu descobri como fazer isso, e para que você não sofra como eu, decidi fazer essa pequena documentação para ti guiar a personalizar os seu README.
Índice
- 5. Como Adicionar Uma Imagem Adequada Para os Visitantes
- 6. Como adicionar Texto de Referência
- 9. Como Adicionar Alertas ou Notas
- 10. Como Ocultar o conteúdo com comentários
- 12. Como Adicionar Uma Secção Recolhida
- 13. Como Adicionar Botões de Linguagens
##
### Ir ao Fundo
##
## 1. Como adicionar títulos
Os títos são categorizados em três categorias, **Primário**, **Secundário** e **Terceário**. Para usar os títulos você deve adicionar um cardinal/jogo da velha `#` no início da linha seguido por um espaço.
- **a) Primário**:
Apenas um cardinal/jogo da velha `#`
Escrita:
```
# Seu Título Primário
```
Resultado:
# Seu Título Primário
- **b) Secundário**:
Apenas dois cardinal/jogo da velha `##`
Escrita:
```
## Seu Título Secundário
```
Resultado:
## Seu Título Secundário
- **c) Terceário**:
Apenas três cardinal/jogo da velha `###`
Escrita:
```
### Seu Título Terceário
```
Resultado:
### Seu Título Terceário
##
> [!NOTE]
> Repare que o número de cardinais/jogo da velha define o tamanho/importância do título, quanto mais cardinal/jogo da velha tiver o título será menenor ou menos inportante.
##
### Ir ao topo
##
## 2. Como Formatar Textos
| Estilo | Código | Escrita | Resultado |
| :---: | :---: | :---: | :---: |
| Negrito | `** **` ou `__ __` | `**Texto em Negrito**` | **Texto em Negrito** |
| Itálico | `* *` ou `_ _` | `_Texto em Itálico_` | _Texto em Itálico_ |
| Riscado | `~~ ~~` | `~~Texto em Riscado~~` | ~~Texto em Riscado~~ |
| Sup | ` ` | `Texto sup` | Texto sup |
| Sub | ` ` | `Texto sup` | Texto sub |
> Você também pode fazer combinações.
Exemplo
| Estilo | Código | Escrita | Resultado |
| :---: | :---: | :---: | :---: |
| Negrito e Itálico | `** **` e `_ _` | `**_Texto em Negrito e Itálico_**` | **_Texto em Negrito e Itálico_** |
| Negrito e Riscado | `** **` e `~~ ~~` | `**~~Texto em Negrito e Riscado~~**` | **~~Texto em Negrito e Riscado~~** |
| Itálico e Riscado | `* *` e `~~ ~~` | `*~~Texto em Itálico e Riscado~~*` | *~~Texto em Itálico e Riscado~~* |
| Riscado e Negrito | `~~ ~~` e `** **` | `~~**Texto Riscado e Negrito**~~*` | ~~**Texto Riscado e Negrito**~~* |
## Como Alinhar Texto, Imagens ou GIF
Para alinha qualquer conteúdo à esquerda, no centro ou à direita você deve adicionar o seu conteúdo dentro da tag `
` do HTML com a propriedade do CSS `align` e o valor `left` para esquerda. `center` para centralizar e `right` para direita.
### - Alinhando à Esquerda
Escrita:
```
Este é um exemplo de um texto alinhado à esquerda
```
Resultado:
Este é um exemplo de um texto alinhado à esquerda
### - Alinhando no Centro
Escrita:
```
Este é um exemplo de um texto alinhado no Centro
```
Resultado:
Este é um exemplo de um texto alinhado no Centro
### - Alinhando à Direita
Escrita:
```
Este é um exemplo de um texto alinhado à Direita
```
Resultado:
Este é um exemplo de um texto alinhado à Direita
> [!NOTE]
> Lembrando que você pode alinhar qualquer tipo de conteúdo (textos, imagens e GIF) desde que estejam dentro da `
` e use a propriedade `align` com o seu respectivo valor `left`
, `center` ou `right`
## Como fazer quebra de linha
Para fazer quebra de linhas você só precisa adicionar a tag do HTML `
` onde quer passar passar para nova linha.
Escrita:
```
Aqui o texto foi
quebrado uma vesz
```
Resultado:
Aqui o texto foi
quebrado uma vesz
Se você deseja quebrar a linha mais de uma vez é só repetira várias vezes a tag `
`
Escrita:
```
Aqui o texto foi
quebrado duas vezes.
```
Resultado:
Aqui o texto foi
quebrado duas vezes.
> Ao adicionarmos dois `
`, a primeira vez o texto pulou para nova linha, ao adicionar o segundo `
` é adicionada uma linha em branco.
##
### Ir ao topo
##
## 3. Como Adicionar Listas
**a) Lista Normal**
Para fazer a uma lista de ítens você pode usar os seguintes sinais: hífen `-` , asterisco `*` ou sinal de mais `+`.
Escrita:
```
- Hélio
* Carlitos
+ António
```
Resultado:
- Hélio
* Carlitos
+ António
**b) Lista Ordenada**
Para ordenar a lista, coloque um número na frente de cada linha.
Escrita:
```
1. Hélio
1. Carlitos
1. António
```
Resultado:
1. Hélio
1. Carlitos
1. António
**c) Listas aninhadas**
Escrita:
```
1. Nomes
- Hélio
- Carlitos
- António
```
> [!NOTE]
> Respeitando as identções.
Resultado:
1. Nomes
- Hélio
- Carlitos
- António
**d) Lista de tarefas**
Para criar uma lista de tarefas, coloque um hífen e um espaço seguidos de [ ] antes dos itens de lista. Para marcar uma tarefa como concluída, use [x].
Escrita:
```
- [x] Pão
- [ ] Alface
- [ ] Tomate :tada:
```
Resultado:
- [x] Pão
- [ ] Alface
- [ ] Tomate :tada:
Se a descrição de um item da lista de tarefas começar com parênteses (carater especial), você precisará fazer escape dele com
Escrita:
```
- [ ] \(Optional) Open a followup issue
```
Resultado:
- [ ] \(Optional) Open a followup issue
##
### Ir ao topo
##
## 4. Como Adicionar Links
Para adicionar um link você deve adicionar o texto do link entre parenteses rectos e o link entre parenteses curvos.
Escrita:
```
[GitHub Hélio Carlitos](https://github.com/heliocarlitos/)
```
Resulatado:
[GitHub Hélio Carlitos](https://github.com/heliocarlitos/)
Você também pode adicionar um texto antes do texto do link.
Escrita:
```
Para acessar o meu perfil, click [aqui](https://github.com/heliocarlitos/)
```
Resultado:
Para acessar o meu perfil, click [aqui](https://github.com/heliocarlitos/)
Se deseja adicionar um link em uma imagem você deve usar a tag de links do HTML `` e a taga de imagens `![]()
`
Escrita:
```
```
Resultado:
> Para o meu exemplo eu usei um link de uma imagem de um botão. Sem nenhum direccionamento para quando for clicado.
##
### Ir ao topo
##
## 5. Como Adicionar Uma Imagem Adequada Para os Visitantes
Você pode incluir imagens em sua comunicação no GitHub. Aqui, você adicionará uma imagem responsiva, como uma faixa, à parte superior do LEIAME do perfil.
Usando o elemento HTML `` com o recurso de mídia `prefers-color-scheme`, você pode adicionar uma imagem que muda de acordo com o modo claro ou escuro usado pelo visitante. Para obter mais informações.
Escrita:
```
```
Substitua os espaços reservados na marcação pelas URLs das imagens escolhidas. Como alternativa, para experimentar o recurso primeiro, copie as URLs do exemplo abaixo.
- Substitua `YOUR-DARKMODE-IMAGE` pela URL de uma imagem a ser exibida para visitantes que usam o modo escuro.
- Substitua `YOUR-LIGHTMODE-IMAGE` pela URL de uma imagem a ser exibida para visitantes que usam o modo claro.
- Substitua `YOUR-DEFAULT-IMAGE` pela URL de uma imagem a ser exibida caso nenhuma das outras imagens seja correspondida, por exemplo, se o visitante estiver usando um navegador sem suporte ao recurso prefers-color-scheme.
-
Para tornar a imagem acessível a visitantes que estejam usando um leitor de tela, substitua `YOUR-ALT-TEXT` por uma descrição da imagem.
Resultado:
##
### Ir ao topo
##
## 6. Como adicionar Texto de Referência
Você pode citar um texto com `>` .
Escrita:
```
Isso não é uma nota.
> Seu texto de citação aqui.
```
Resultado:
Isso não é uma nota.
> Seu texto de citação aqui.
##
### Ir ao topo
##
## 7. Como Citar Código
Para citar um código você deve adicionar o código entre duas crases ( `` ).
Escrita:
```
Este é um exemplo de um código citado `` essa é uma tag do HTML.
```
Resultado:
Este é um exemplo de um código citado `` essa é uma tag do HTML.
##
### Ir ao topo
##
## 8. Como Adicionar Código
Para formatar código ou texto no próprio bloco distinto, use crases triplas ( ``` ).
Escrita:
````
```
Minha página de teste
```
````
Resultado:
```
Minha página de teste
```
Se deseja colorir o seu código use o tema `ruby` depois das primeiras três crases:
Escrita:
````
```ruby
Minha página de teste
```
````
Resultado:
```ruby
Minha página de teste
```
##
### Ir ao topo
##
## 9. Como Adicionar Alertas ou Notas
Os alertas são uma extensão da sintaxe blockquote que você pode usar para enfatizar informações críticas. Em GitHub, eles são exibidos com cores e ícones distintos para indicar a importância do conteúdo. A sintaxe de alertas é compatível com:
- Discussões
- Gists
- Problemas
- Arquivos Markdown
- Solicitações pull
- Versões
O GitHub Recomenda restrições do uso de alertas a um ou dois por artigo para evitar sobrecarregar o leitor. As anotações consecutivas devem ser evitadas.
Há três tipos de alertas disponíveis. Você pode adicionar um alerta com uma linha de blockquote especial que especifica o tipo de alerta e, em seguida, adicionar as informações de alerta em um blockquote padrão imediatamente depois.
Escrita:
```
> [!NOTE]
> Adiciona aqui o seu texto de aviso informando alguma coisa.
> [!IMPORTANT]
> Adiciona aqui o seu texto de aviso informando alguma coisa.
> [!WARNING]
> Adiciona aqui o seu texto de aviso informando alguma coisa.
```
Resultado:
> [!NOTE]
> Adiciona aqui o seu texto de aviso informando alguma coisa.
> [!IMPORTANT]
> Adiciona aqui o seu texto de aviso informando alguma coisa.
> [!WARNING]
> Adiciona aqui o seu texto de aviso informando alguma coisa.
##
### Ir ao topo
##
## 10. Como Ocultar o conteúdo com comentários
Para ocultar um conteúdo ou código você deve adiciona-lo entre esse sinais ``
Escrita:
```
Esta palavra será oculta o código também será oculto.
```
Resultado:
Esta palavra será oculta o código também será oculto.
> Nota que a palavra "não" e "HTML" foram ocultos.
##
### Ir ao topo
##
## 11. Como Criar Uma Tabela
Você pode criar tabelas com pipes `|` e hífens `-`. Hifens são usados para criar o cabeçalho de cada coluna, enquanto as barras verticais separam cada coluna. Você deve incluir uma linha em branco antes da tabela para ela ser construída corretamente.
Escrita:
```
| Cabeçalho | Cabeçalho |
| --------- | --------- |
| Texto | Texto |
| Texto | Texto |
```
Resultado:
| Cabeçalho | Cabeçalho |
| --------- | --------- |
| Texto | Texto |
| Texto | Texto |
As barras verticais em cada extremo da tabela são opcionais.
As células podem ter largura variada e não precisam estar alinhadas perfeitamente com as colunas. Deve ter no mínimo três hifens em cada coluna da linha do cabeçalho.
Escrita:
```
| Cabeçalho | Cabeçalho |
| ----- | ---
| Texto | Texto
|Texto | Texto |
```
Resultado:
| Cabeçalho | Cabeçalho |
| ----- | ---
| Texto | Texto
|Texto | Texto |
Você pode alinhar o texto à esquerda, à direita ou no centro de uma coluna incluindo dois pontos `:` à esquerda, direita ou nos dois lados dos hifens que estão dentro da linha de cabeçalho.
Escrita:
```
| Texto Alinhanho à Esquerda | Texto Centralizado | Texto Alinhanho à Direita |
| :--- | :---: | ---: |
| Texto | Texto | Texto |
| Texto | Texto | Texto |
| Texto | Texto | Texto |
| Texto | Texto | Texto |
```
Resultado:
| Texto Alinhanho à Esquerda | Texto Centralizado | Texto Alinhanho à Direita |
| :--- | :---: | ---: |
| Texto | Texto | Texto |
| Texto | Texto | Texto |
| Texto | Texto | Texto |
| Texto | Texto | Texto |
##
### Ir ao topo
##
## 12. Como Adicionar Uma Secção Recolhida
Você pode obscurecer temporariamente seções do seu Markdown criando uma seção expandida que o leitor pode optar por expandir. Por exemplo, quando você deseja incluir detalhes técnicos em um comentário do problema que pode não ser relevante ou interessante para todos os leitores, você pode colocar esses detalhes em uma seção recolhida.
Qualquer Markdown dentro do bloco `` estará recolhido até que o leitor clique em para expandir os detalhes.
No bloco ``, use a marca `` para que os leitores saibam o que está dentro dele. O rótulo aparece à direita de ▶.
Escrita:
````
Dicas para seções recolhidas
### Você pode adicionar um título
Você pode adicionar texto em uma seção recolhida.
Você também pode adicionar uma imagem ou um bloco de código.
```ruby
print("Olá Mundo")
```
````
Resultado:
Dicas para seções recolhidas
### Você pode adicionar um título
Você pode adicionar texto em uma seção recolhida.
Você também pode adicionar uma imagem ou um bloco de código.
```ruby
print("Olá Mundo")
```
##
### Ir ao topo
##
## 13. Como adicionar Botões de Linguagens
**1. Asana**
Escrita:
```
```
Resulatado:
**2. Csharp**
Escrita:
```
```
Resulatado:
**3. CSS**
Escrita:
```
```
Resulatado:
**4. Cypress**
Escrita:
```
```
Resulatado:
**5. Django**
Escrita:
```
```
Resulatado:
**6. Flask**
Escrita:
```
```
Resulatado:
**7. GCP**
Escrita:
```
```
Resulatado:
**8. Git**
Escrita:
```
```
Resulatado:
**9. Graphql**
Escrita:
```
```
Resulatado:
**10. HTML**
Escrita:
```
```
Resulatado:
**11. JavaScript**
Escrita:
```
```
Resulatado:
**12. Kubernetes**
Escrita:
```
```
Resulatado:
**13. MongoDB**
Escrita:
```
```
Resulatado:
**14. Notion**
Escrita:
```
```
Resulatado:
**15. Postgresql**
Escrita:
```
```
Resulatado:
**16. Python**
Escrita:
```
```
Resulatado:
**17. R**
Escrita:
```
```
Resulatado:
**18. RabbitMQ**
Escrita:
```
```
Resulatado:
**19. React.js**
Escrita:
```
```
Resulatado:
**20. Slack**
Escrita:
```
```
Resulatado:
**21. Typescript**
Escrita:
```
```
Resulatado:
**22. Ubuntu**
Escrita:
```
```
Resulatado:
**23. Unity**
Escrita:
```
```
Resulatado:
**24. VScode**
Escrita:
```
```
Resulatado:
## [Ver mais...](https://github.com/hcadeveloper/markdown-badges/)
##
### Ir ao topo
##