{"id":22763314,"url":"https://github.com/heliocarlitos/formatacao-e-sintaxe-basica-do-github","last_synced_at":"2026-03-19T23:36:16.166Z","repository":{"id":205351205,"uuid":"714000918","full_name":"heliocarlitos/formatacao-e-sintaxe-basica-do-github","owner":"heliocarlitos","description":"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.","archived":false,"fork":false,"pushed_at":"2025-01-22T13:20:53.000Z","size":289,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-02-05T11:44:50.114Z","etag":null,"topics":["documentation","documentation-readme"],"latest_commit_sha":null,"homepage":"https://github.com/heliocarlitos/melhore_seu_readme/","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/heliocarlitos.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-11-03T17:36:46.000Z","updated_at":"2025-01-24T14:02:31.000Z","dependencies_parsed_at":"2024-08-01T22:12:51.906Z","dependency_job_id":"ab5c09cf-63c5-4b0c-965b-65ed74152bd4","html_url":"https://github.com/heliocarlitos/formatacao-e-sintaxe-basica-do-github","commit_stats":null,"previous_names":["heliocarlitos/formatacao-e-sintaxe-basica-do-github"],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/heliocarlitos%2Fformatacao-e-sintaxe-basica-do-github","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/heliocarlitos%2Fformatacao-e-sintaxe-basica-do-github/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/heliocarlitos%2Fformatacao-e-sintaxe-basica-do-github/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/heliocarlitos%2Fformatacao-e-sintaxe-basica-do-github/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/heliocarlitos","download_url":"https://codeload.github.com/heliocarlitos/formatacao-e-sintaxe-basica-do-github/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246301959,"owners_count":20755512,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["documentation","documentation-readme"],"created_at":"2024-12-11T11:08:01.333Z","updated_at":"2026-03-19T23:36:15.835Z","avatar_url":"https://github.com/heliocarlitos.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# Introdução\nQuando 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.\n\n\u003cdetails\u003e\n\n\u003csummary\u003e Índice \u003c/summary\u003e \n\n- \u003ca href='#1-como-adicionar-t%C3%ADtulos'\u003e1. Como adicionar títulos\u003c/a\u003e\n\n- \u003ca href='#2-como-formatar-textos'\u003e2. Como formatar textos\u003c/a\u003e\n\n- \u003ca href='#3-como-adicionar-listas'\u003e3. Como Adicionar Listas\u003c/a\u003e\n\n- \u003ca href='#4-como-adicionar-links'\u003e4. Como Adicionar Links\u003c/a\u003e\n\n- \u003ca href='#5-como-adicionar-uma-imagem-adequada-para-os-visitantes'\u003e5. Como Adicionar Uma Imagem Adequada Para os Visitantes\u003c/a\u003e\n\n- \u003ca href='#6-como-adicionar-texto-de-refer%C3%AAncia'\u003e6. Como adicionar Texto de Referência\u003c/a\u003e\n\n- \u003ca href='#7-como-citar-c%C3%B3digo'\u003e7. Como Citar Código\u003c/a\u003e\n\n- \u003ca href='#8-como-adicionar-c%C3%B3digo'\u003e8. Como Adicionar Código\u003c/a\u003e\n\n- \u003ca href='#9-como-adicionar-alertas-ou-notas'\u003e9. Como Adicionar Alertas ou Notas\u003c/a\u003e\n\n- \u003ca href='=#10-como-ocultar-o-conte%C3%BAdo-com-coment%C3%A1rios'\u003e10. Como Ocultar o conteúdo com comentários\u003c/a\u003e\n\n- \u003ca href='#11-como-criar-uma-tabela'\u003e11. Como Criar Uma Tabela\u003c/a\u003e\n\n- \u003ca href='#12-como-adicionar-uma-sec%C3%A7%C3%A3o-recolhida'\u003e12. Como Adicionar Uma Secção Recolhida\u003c/a\u003e\n\n- \u003ca href='#13-como-adicionar-bot%C3%B5es-de-linguagens'\u003e13. Como Adicionar Botões de Linguagens\u003c/a\u003e\n\n\u003c/details\u003e\n\n\n##\n\n\u003cdiv align='center'\u003e\n\n### \u003ca href='#fundo'\u003eIr ao Fundo\u003c/a\u003e\n  \n\u003c/div\u003e\n\n##\n\n## 1. Como adicionar títulos\nOs 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.\n\n- **a) Primário**:\n  \nApenas um cardinal/jogo da velha `#`\n\nEscrita:\n```\n# Seu Título Primário\n```\nResultado:\n# Seu Título Primário\n\n- **b) Secundário**:\n  \nApenas dois cardinal/jogo da velha `##`\n\nEscrita:\n```\n## Seu Título Secundário\n```\nResultado:\n## Seu Título Secundário\n\n- **c) Terceário**:\n  \nApenas três cardinal/jogo da velha `###`\n\nEscrita:\n```\n### Seu Título Terceário\n```\nResultado:\n\n### Seu Título Terceário\n\n##\n\n\u003e [!NOTE]\n\u003e 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.\n\n##\n\n\u003cdiv align='center'\u003e\n\n### \u003ca href='#introdu%C3%A7%C3%A3o'\u003eIr ao topo\u003c/a\u003e\n  \n\u003c/div\u003e\n\n##\n\n## 2. Como Formatar Textos\n\n| Estilo  |     Código           |          Escrita         |        Resultado          |\n|  :---:  |      :---:           |           :---:          |        :---:         |\n| Negrito |  `** **` ou `__ __`  |  `**Texto em Negrito**`  | **Texto em Negrito** |\n| Itálico |  `* *` ou `_ _`      |  `_Texto em Itálico_`    | _Texto em Itálico_   |\n| Riscado |  `~~ ~~`             |  `~~Texto em Riscado~~`  | ~~Texto em Riscado~~ |\n| Sup     |  `\u003csup\u003e \u003c/sup\u003e`      |  `Texto \u003csup\u003esup\u003c/sup\u003e`  | Texto \u003csup\u003esup\u003c/sup\u003e |\n| Sub     |  `\u003csub\u003e \u003c/sub\u003e`      |  `Texto \u003csub\u003esup\u003c/sub\u003e`  | Texto \u003csub\u003esub\u003c/sub\u003e |\n\n\u003cbr/\u003e\n\n\u003e Você também pode fazer combinações.\n\nExemplo\n| Estilo            |     Código           |          Escrita                      |        Resultado                   |\n|  :---:            |      :---:           |           :---:                       |        :---:                       |\n| Negrito e Itálico |  `** **` e `_ _`     |  `**_Texto em Negrito e Itálico_**`   | **_Texto em Negrito e Itálico_**   |\n| Negrito e Riscado |  `** **` e `~~ ~~`   |  `**~~Texto em Negrito e Riscado~~**` | **~~Texto em Negrito e Riscado~~** |\n| Itálico e Riscado |  `* *` e `~~ ~~`     |  `*~~Texto em Itálico e Riscado~~*`   | *~~Texto em Itálico e Riscado~~*   |\n| Riscado e Negrito |  `~~ ~~` e `** **`   |  `~~**Texto Riscado e Negrito**~~*`   | ~~**Texto Riscado e Negrito**~~*   |\n\n\u003cbr/\u003e\n\n## Como Alinhar Texto, Imagens ou GIF\n\nPara alinha qualquer conteúdo à esquerda, no centro ou à direita você deve adicionar o seu conteúdo dentro da tag `\u003cdiv\u003e` do HTML com a propriedade do CSS `align` e o valor `left` para esquerda. `center` para centralizar e `right` para direita.\n\n### - Alinhando à Esquerda\n\nEscrita:\n\n```\n\u003cdiv align='left'\u003e\n\nEste é um exemplo de um texto alinhado à esquerda\n\n\u003c/div\u003e\n```\n\nResultado:\n\n\u003cdiv align='left'\u003e\n\nEste é um exemplo de um texto alinhado à esquerda\n\n\u003c/div\u003e\n\n### - Alinhando no Centro\n\n  Escrita:\n\n```\n\u003cdiv align='center'\u003e\n\nEste é um exemplo de um texto alinhado no Centro\n\n\u003c/div\u003e\n```\n\nResultado:\n\n\u003cdiv align='center'\u003e\n\nEste é um exemplo de um texto alinhado no Centro\n\n\u003c/div\u003e  \n\n### - Alinhando à Direita\n\n  Escrita:\n\n```\n\u003cdiv align='right'\u003e\n\nEste é um exemplo de um texto alinhado à Direita\n\n\u003c/div\u003e\n```\n\nResultado:\n\n\u003cdiv align='right'\u003e\n\nEste é um exemplo de um texto alinhado à Direita\n\n\u003c/div\u003e  \n\n\u003e [!NOTE]\n\u003e Lembrando que você pode alinhar qualquer tipo de conteúdo (textos, imagens e GIF) desde que estejam dentro da `\u003cdiv\u003e \u003c/div\u003e` e use a propriedade `align` com o seu respectivo valor `left`\n, `center` ou `right`\n\n\u003cbr/\u003e\n\n## Como fazer quebra de linha\n\nPara fazer quebra de linhas você só precisa adicionar a tag do HTML `\u003cbr/\u003e` onde quer passar passar para nova linha.\n\nEscrita:\n```\nAqui o texto foi \u003cbr/\u003e quebrado uma vesz\n```\nResultado:\n\nAqui o texto foi \u003cbr/\u003e quebrado uma vesz\n\n\u003cbr/\u003e\n\nSe você deseja quebrar a linha mais de uma vez é só repetira várias vezes a tag `\u003cbr/\u003e`\n\nEscrita:\n\n```\nAqui o texto foi \u003cbr/\u003e \u003cbr/\u003e quebrado duas vezes.\n```\n\nResultado:\n\nAqui o texto foi \u003cbr/\u003e \u003cbr/\u003e quebrado duas vezes.\n\n\u003e  Ao adicionarmos dois `\u003cbr/\u003e`, a primeira vez o texto pulou para nova linha, ao adicionar o segundo `\u003cbr/\u003e` é adicionada uma linha em branco.\n\n##\n\n\u003cdiv align='center'\u003e\n\n### \u003ca href='#introdu%C3%A7%C3%A3o'\u003eIr ao topo\u003c/a\u003e\n  \n\u003c/div\u003e\n\n##\n\n## 3. Como Adicionar Listas\n**a) Lista Normal**\n\nPara fazer a uma lista de ítens você pode usar os seguintes sinais: hífen `-` , asterisco  `*` ou sinal de mais `+`.\n\nEscrita:\n```\n- Hélio\n* Carlitos\n+ António\n```\n\nResultado:\n- Hélio\n* Carlitos\n+ António\n  \n**b) Lista Ordenada**\n\nPara ordenar a lista, coloque um número na frente de cada linha.\n\nEscrita:\n```\n1. Hélio\n1. Carlitos\n1. António\n```\n\nResultado:\n1. Hélio\n1. Carlitos\n1. António\n\n**c) Listas aninhadas**\n\nEscrita:\n```\n1. Nomes\n   - Hélio\n     - Carlitos\n       - António\n```\n\u003e [!NOTE]\n\u003e Respeitando as identções. Tecla Tab 1x.\n\nResultado:\n1. Nomes\n   - Hélio\n     - Carlitos\n       - António\n    \n**d) Lista de tarefas**\n\nPara 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].\n\nEscrita:\n```\n- [x] Pão\n- [ ] Alface\n- [ ] Tomate :tada:\n```\n\nResultado:\n- [x] Pão\n- [ ] Alface\n- [ ] Tomate :tada:\n\n\nSe a descrição de um item da lista de tarefas começar com parênteses (carater especial), você precisará fazer escape dele com \n\nEscrita:\n```\n- [ ] \\(Optional) Open a followup issue\n```\n\nResultado:\n\n- [ ] \\(Optional) Open a followup issue\n\n\n##\n\n\u003cdiv align='center'\u003e\n\n### \u003ca href='#introdu%C3%A7%C3%A3o'\u003eIr ao topo\u003c/a\u003e\n  \n\u003c/div\u003e\n\n##\n\n\u003cspan id='links'\u003e\u003c/span\u003e\n\n## 4. Como Adicionar Links\n\nPara adicionar um link você deve adicionar o texto do link entre parenteses rectos e o link entre parenteses curvos.\n\nEscrita:\n```\n[GitHub Hélio Carlitos](https://github.com/heliocarlitos/)\n```\n\nResulatado:\n\n[GitHub Hélio Carlitos](https://github.com/heliocarlitos/)\n\nVocê também pode adicionar um texto antes do texto do link.\n\nEscrita:\n```\nPara acessar o meu perfil, click [aqui](https://github.com/heliocarlitos/)\n```\n\nResultado:\n\nPara acessar o meu perfil, click [aqui](https://github.com/heliocarlitos/)\n\n\nSe deseja adicionar um link em uma imagem você deve usar a tag de links do HTML `\u003ca\u003e` e a taga de imagens `\u003cimg\u003e`\n\nEscrita:\n\n```\n\u003ca href=\"ADICIONA-SEU-LINK-AQUI\" target=\"_blank\"\u003e\u003cimg src='ADICIONA-O-LINK-DA-IMAGEM-AQUI'/\u003e\u003c/a\u003e\n```\n\nResultado:\n\n\u003ca href=\"javascript:void(0)\" target=\"_blank\"\u003e\u003cimg src='https://github.com/heliocarlitos/formatacao-e-sintaxe-basica-do-github/blob/main/Imagens/demo%20btn.png?raw=true'/\u003e\u003c/a\u003e\n\n\u003e Para o meu exemplo eu usei um link de uma imagem de um botão. Sem nenhum direccionamento para quando for clicado.\n\n##\n\n\u003cdiv align='center'\u003e\n\n### \u003ca href='#introdu%C3%A7%C3%A3o'\u003eIr ao topo\u003c/a\u003e\n  \n\u003c/div\u003e\n\n##\n\n## 5. Como Adicionar Uma Imagem Adequada Para os Visitantes\n\nVocê pode incluir imagens em sua comunicação no GitHub. Aqui, você adicionará uma imagem responsiva, como uma faixa, à parte superior do LEIAME do perfil.\n\nUsando o elemento HTML `\u003cpicture\u003e` 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.\n\nEscrita:\n\n```\n\u003cpicture\u003e\n     \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"YOUR-DARKMODE-IMAGE\"\u003e\n     \u003csource media=\"(prefers-color-scheme: light)\" srcset=\"YOUR-LIGHTMODE-IMAGE\"\u003e\n     \u003cimg alt=\"YOUR-ALT-TEXT\" src=\"YOUR-DEFAULT-IMAGE\"\u003e\n\u003c/picture\u003e\n```\n\nSubstitua 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.\n\n- Substitua `YOUR-DARKMODE-IMAGE` pela URL de uma imagem a ser exibida para visitantes que usam o modo escuro.\n- Substitua `YOUR-LIGHTMODE-IMAGE` pela URL de uma imagem a ser exibida para visitantes que usam o modo claro.\n- 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.\n- \nPara tornar a imagem acessível a visitantes que estejam usando um leitor de tela, substitua `YOUR-ALT-TEXT` por uma descrição da imagem.\n\nResultado:\n\n\u003cdiv align='center'\u003e\n  \n\u003cpicture\u003e\n    \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"[YOUR-DARKMODE-IMAGE](https://github.com/heliocarlitos/formatacao-e-sintaxe-basica-do-github/blob/main/Imagens/demo%20img%20pc.png?raw=true)\"\u003e\n    \u003csource media=\"(prefers-color-scheme: light)\" srcset=\"[YOUR-LIGHTMODE-IMAGE](https://github.com/heliocarlitos/formatacao-e-sintaxe-basica-do-github/blob/main/Imagens/demo%20img%20pc.png?raw=true)\"\u003e\n    \u003cimg alt=\"Imagem de PC\" src=\"https://github.com/heliocarlitos/formatacao-e-sintaxe-basica-do-github/blob/main/Imagens/demo%20img%20pc.png?raw=true\"\u003e\n\u003c/picture\u003e\n\n\u003c/div\u003e\n\n##\n\n\u003cdiv align='center'\u003e\n\n### \u003ca href='#introdu%C3%A7%C3%A3o'\u003eIr ao topo\u003c/a\u003e\n  \n\u003c/div\u003e\n\n##\n\n## 6. Como adicionar Texto de Referência\nVocê pode citar um texto com `\u003e` .\n\nEscrita:\n\n```\nIsso não é uma nota.\n\u003e Seu texto de citação aqui.\n```\n\nResultado:\n\nIsso não é uma nota.\n\u003e Seu texto de citação aqui.\n\n##\n\n\u003cdiv align='center'\u003e\n\n### \u003ca href='#introdu%C3%A7%C3%A3o'\u003eIr ao topo\u003c/a\u003e\n  \n\u003c/div\u003e\n\n##\n\n## 7. Como Citar Código\nPara citar um código você deve adicionar o código entre duas crases ( `` ).\n\nEscrita:\n\n```\nEste é um exemplo de um código citado `\u003cbody\u003e\u003c/body\u003e` essa é uma tag do HTML.\n```\nResultado:\n\nEste é um exemplo de um código citado `\u003cbody\u003e\u003c/body\u003e` essa é uma tag do HTML.\n\n##\n\n\u003cdiv align='center'\u003e\n\n### \u003ca href='#introdu%C3%A7%C3%A3o'\u003eIr ao topo\u003c/a\u003e\n  \n\u003c/div\u003e\n\n##\n\n## 8. Como Adicionar Código\n\nPara formatar código ou texto no próprio bloco distinto, use crases triplas ( ``` ).\n\nEscrita:\n\n````\n```\n\u003c!doctype html\u003e\n\u003chtml\u003e\n\u003chead\u003e\n    \u003cmeta charset=\"utf-8\" /\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width\" /\u003e\n    \u003ctitle\u003eMinha página de teste\u003c/title\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n    \u003cimg src=\"images/firefox-icon.png\" alt=\"minha página de teste\" /\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n````\n\nResultado:\n\n```\n\u003c!doctype html\u003e\n\u003chtml\u003e\n\u003chead\u003e\n    \u003cmeta charset=\"utf-8\" /\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width\" /\u003e\n    \u003ctitle\u003eMinha página de teste\u003c/title\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n    \u003cimg src=\"images/firefox-icon.png\" alt=\"minha página de teste\" /\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\nSe deseja colorir o seu código use o tema `ruby` ou a extensão da linguagem, depois das primeiras três crases:\n\nEscrita:\n\n````\n```html\n    \u003c!doctype html\u003e\n    \u003chtml\u003e\n    \u003chead\u003e\n        \u003cmeta charset=\"utf-8\" /\u003e\n        \u003cmeta name=\"viewport\" content=\"width=device-width\" /\u003e\n        \u003ctitle\u003eMinha página de teste\u003c/title\u003e\n    \u003c/head\u003e\n    \u003cbody\u003e\n        \u003cimg src=\"images/firefox-icon.png\" alt=\"minha página de teste\" /\u003e\n    \u003c/body\u003e\n    \u003c/html\u003e\n```\n````\n\nResultado:\n\n```html\n\u003c!doctype html\u003e\n\u003chtml\u003e\n\u003chead\u003e\n    \u003cmeta charset=\"utf-8\" /\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width\" /\u003e\n    \u003ctitle\u003eMinha página de teste\u003c/title\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n    \u003cimg src=\"images/firefox-icon.png\" alt=\"minha página de teste\" /\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n##\n\n\u003cdiv align='center'\u003e\n\n### \u003ca href='#introdu%C3%A7%C3%A3o'\u003eIr ao topo\u003c/a\u003e\n  \n\u003c/div\u003e\n\n##\n\n## 9. Como Adicionar Alertas ou Notas\n\nOs 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:\n\n- Discussões\n- Gists\n- Problemas\n- Arquivos Markdown\n- Solicitações pull\n- Versões\n\nO 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.\n\nHá 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.\n\nEscrita:\n\n```\n\u003e [!NOTE]\n\u003e Adiciona aqui o seu texto de aviso informando alguma coisa.\n\n\u003e [!IMPORTANT]\n\u003e Adiciona aqui o seu texto de aviso informando alguma coisa.\n\n\u003e [!WARNING]\n\u003e Adiciona aqui o seu texto de aviso informando alguma coisa.\n```\n\nResultado:\n\n\u003e [!NOTE]\n\u003e Adiciona aqui o seu texto de aviso informando alguma coisa.\n\n\u003e [!IMPORTANT]\n\u003e Adiciona aqui o seu texto de aviso informando alguma coisa.\n\n\u003e [!WARNING]\n\u003e Adiciona aqui o seu texto de aviso informando alguma coisa.\n\n##\n\n\u003cdiv align='center'\u003e\n\n### \u003ca href='#introdu%C3%A7%C3%A3o'\u003eIr ao topo\u003c/a\u003e\n  \n\u003c/div\u003e\n\n##\n\n## 10. Como Ocultar o conteúdo com comentários\n\nPara ocultar um conteúdo ou código você deve adiciona-lo entre esse sinais `\u003c!--` e `--\u003e`\n\nEscrita:\n\n```\nEsta palavra \u003c!-- não --\u003e será oculta o código \u003c!--- HTML --\u003e também será oculto.\n```\n\nResultado:\n\nEsta palavra \u003c!-- não --\u003e será oculta o código \u003c!--- HTML --\u003e também será oculto.\n\n\u003e Nota que a palavra \"não\" e \"HTML\" foram ocultos.\n\n##\n\n\u003cdiv align='center'\u003e\n\n### \u003ca href='#introdu%C3%A7%C3%A3o'\u003eIr ao topo\u003c/a\u003e\n  \n\u003c/div\u003e\n\n##\n\n## 11. Como Criar Uma Tabela\n\nVocê 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.\n\nEscrita:\n\n```\n| Cabeçalho | Cabeçalho |\n| --------- | --------- |\n|   Texto   |   Texto   |\n|   Texto   |   Texto   |\n```\n\nResultado:\n\n| Cabeçalho | Cabeçalho |\n| --------- | --------- |\n|   Texto   |   Texto   |\n|   Texto   |   Texto   |\n\nAs barras verticais em cada extremo da tabela são opcionais.\n\nAs 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.\n\nEscrita:\n\n```\n| Cabeçalho     | Cabeçalho |\n| ----- | ---\n|   Texto       |   Texto   \n|Texto   |   Texto   |\n```\n\nResultado:\n\n| Cabeçalho     | Cabeçalho |\n| ----- | --- \n|   Texto       |   Texto   \n|Texto   |   Texto   |\n\nVocê 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.\n\nEscrita:\n\n```\n| Texto Alinhanho à Esquerda | Texto Centralizado | Texto Alinhanho à Direita |\n|            :---            |         :---:      |            ---:           |\n|            Texto           |         Texto      |           Texto           |\n|            Texto           |         Texto      |           Texto           |\n|            Texto           |         Texto      |           Texto           |\n|            Texto           |         Texto      |           Texto           |\n```\n\nResultado:\n\n| Texto Alinhanho à Esquerda | Texto Centralizado | Texto Alinhanho à Direita |\n|            :---            |         :---:      |            ---:           |\n|            Texto           |         Texto      |           Texto           |\n|            Texto           |         Texto      |           Texto           |\n|            Texto           |         Texto      |           Texto           |\n|            Texto           |         Texto      |           Texto           |\n\n##\n\n\u003cdiv align='center'\u003e\n\n### \u003ca href='#introdu%C3%A7%C3%A3o'\u003eIr ao topo\u003c/a\u003e\n  \n\u003c/div\u003e\n\n##\n\n## 12. Como Adicionar Uma Secção Recolhida\n\nVocê 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.\n\nQualquer Markdown dentro do bloco `\u003cdetails\u003e` estará recolhido até que o leitor clique em  para expandir os detalhes.\n\nNo bloco `\u003cdetails\u003e`, use a marca `\u003csummary\u003e` para que os leitores saibam o que está dentro dele. O rótulo aparece à direita de ▶.\n\nEscrita:\n\n````\n\u003cdetails\u003e\n\n\u003csummary\u003eDicas para seções recolhidas\u003c/summary\u003e\n\n### Você pode adicionar um título\n\nVocê pode adicionar texto em uma seção recolhida.\n\nVocê também pode adicionar uma imagem ou um bloco de código.\n\n```ruby\n   print(\"Olá Mundo\")\n```\n\n\u003c/details\u003e\n````\n\nResultado:\n\n\u003cdetails\u003e\n\n\u003csummary\u003eDicas para seções recolhidas\u003c/summary\u003e\n\n### Você pode adicionar um título\n\nVocê pode adicionar texto em uma seção recolhida.\n\nVocê também pode adicionar uma imagem ou um bloco de código.\n\n```ruby\n   print(\"Olá Mundo\")\n```\n\n\u003c/details\u003e\n\n##\n\n\u003cdiv align='center'\u003e\n\n### \u003ca href='#introdu%C3%A7%C3%A3o'\u003eIr ao topo\u003c/a\u003e\n  \n\u003c/div\u003e\n\n##\n\n## 13. Como adicionar Botões de Linguagens\n\n**Asana**\n\nEscrita:\n\n```\n![Asana](https://img.shields.io/badge/asana-E44C30?style=for-the-badge\u0026logo=asana\u0026logoColor=white)\u0026nbsp;\n```\n\nResulatado:\n\n![Asana](https://img.shields.io/badge/asana-E44C30?style=for-the-badge\u0026logo=asana\u0026logoColor=white)\u0026nbsp;\n\n### [Ver todos markdown de badges...](https://github.com/heliocarlitos/markdown-badges/blob/main/README.md)\n\n\u003cp align='center'\u003e\n\u003ca href='https://docs.github.com/' taget='_blanck'\u003eFonte da Documentação\u003c/a\u003e\n\u003c/p\u003e\n\n\u003ca href='#' id='fundo'\u003e\u003c/a\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fheliocarlitos%2Fformatacao-e-sintaxe-basica-do-github","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fheliocarlitos%2Fformatacao-e-sintaxe-basica-do-github","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fheliocarlitos%2Fformatacao-e-sintaxe-basica-do-github/lists"}