Skip to main content
We publish frequent updates to our documentation, and translation of this page may still be in progress. For the most current information, please visit the English documentation.

Quickstart for writing on GitHub

Learn advanced formatting features by creating a README for your GitHub profile.

Guia de início rápido de gravação no GitHub

Conheça os recursos avançados de formatação criando um LEIAME para seu perfil do GitHub. Início Rápido Introdução

O Markdown é uma linguagem fácil de ler e de gravar para formatar texto sem formatação.

Você pode usar a sintaxe Markdown, juntamente com algumas tags HTML adicionais, para formatar a escrita no GitHub, em locais como LEIAMEs do repositório e comentários sobre solicitações de pull e problemas.

Neste guia, você aprenderá alguns recursos avançados de formatação criando ou editando um LEIAME do seu perfil do GitHub. Se você é novo em Markdown, pode começar com o curso "Sintaxe básica de escrita e formatação" ou com o curso Comunicar usando Markdown do GitHub Skills.

Se você já tiver um LEIAME do perfil, poderá seguir este guia adicionando alguns recursos ao LEIAME existente ou criando um gist com um arquivo Markdown nomeado de modo semelhante a about-me.md.

Para obter mais informações, confira "Como criar gists".

Como criar ou editar o perfil LEIAME

  1. O LEIAME do perfil permite compartilhar informações sobre si mesmo com a comunidade em GitHub.com. O LEIAME é exibido na parte superior da página de perfil.
  2. Se você ainda não tem um LEIAME de perfil, adicione-o.

Crie um repositório com o mesmo nome que o do usuário do GitHub, inicializando o repositório com um arquivo README.md.

Para obter mais informações, confira "Como gerenciar o LEIAME do seu perfil".

  1. Edite o arquivo README.md e exclua o texto do modelo (começando com ### Hi there) que é adicionado automaticamente quando você cria o arquivo.

    Se você já tem um LEIAME de perfil, edite-o na página de perfil.

  2. No canto superior direito de qualquer página do GitHub, clique na foto do seu perfil e clique em Seu perfil.

Clique no ao lado do LEIAME do perfil.

Captura de tela de uma página de perfil, com o ícone de lápis realçado ao lado do LEIAME do perfil

Como adicionar uma imagem adequada para os visitantes Você pode incluir imagens em sua comunicação no GitHub.

  1. Aqui, você adicionará uma imagem responsiva, como uma faixa, à parte superior do LEIAME do perfil.

    HTML
    <picture>
     <source media="(prefers-color-scheme: dark)" srcset="YOUR-DARKMODE-IMAGE">
     <source media="(prefers-color-scheme: light)" srcset="YOUR-LIGHTMODE-IMAGE">
     <img alt="YOUR-ALT-TEXT" src="YOUR-DEFAULT-IMAGE">
    </picture>
  2. Usando o elemento HTML <picture> 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, confira "Como gerenciar suas configurações de tema".

    • Copie e cole a marcação a seguir no arquivo README.md.
    • 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.
  3. Substitua YOUR-DARKMODE-IMAGE pela URL de uma imagem a ser exibida para visitantes que usam o modo escuro.

  4. 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.

Para verificar se a imagem foi renderizada corretamente, clique na guia Visualização.

Para obter mais informações sobre o uso de imagens em Markdown, confira "Sintaxe básica de escrita e formatação".

Exemplo de uma imagem responsiva

```HTML

Shows an illustrated sun in light mode and a moon with stars in dark mode. ```

A aparência da imagem Captura de tela da guia Visualização no modo claro, com a imagem de um sol sorridente exibida Como adicionar uma tabela

  1. Você pode usar tabelas Markdown para organizar informações.

  2. Aqui, você usará uma tabela para se apresentar classificando algo, como as linguagens ou as estruturas de programação que você mais usa, o que está aprendendo no momento ou seus hobbies favoritos.

    ## About me
    
    Hi, I'm Mona. You might recognize me as GitHub's mascot.
    
  3. Quando uma coluna de tabela contém números, é bom alinhar a coluna à direita usando a sintaxe --: abaixo da linha de cabeçalho.

    Markdown
    | Rank | THING-TO-RANK |
    |-----:|---------------|
    |     1|               |
    |     2|               |
    |     3|               |
  4. Retorne à guia Editar arquivo.

  5. Para se apresentar, duas linhas abaixo da tag </picture>, adicione um cabeçalho ## About me e um parágrafo curto sobre você, como o seguinte.

Duas linhas abaixo desse parágrafo, insira uma tabela copiando e colando a marcação a seguir.

Na coluna à direita, substitua THING-TO-RANK por "Idiomas", "Hobbies" ou qualquer outra coisa, e preencha a coluna com sua lista de itens.

## About me

Hi, I'm Mona. You might recognize me as GitHub's mascot.

| Rank | Languages |
|-----:|-----------|
|     1| Javascript|
|     2| Python    |
|     3| SQL       |

Para verificar se a tabela foi renderizada corretamente, clique na guia Visualização.

Para obter mais informações, confira "[Como organizar informações com tabelas](/get-started/writing-on-github/working-with-advanced-formatting/organizing-information-with-tables)".

Exemplo de uma tabela

Aparência da tabela

  1. Captura de tela da guia Visualização, mostrando um título "Sobre mim" e uma tabela renderizada com uma lista de idiomas

    HTML
    <details>
    <summary>My top THINGS-TO-RANK</summary>
    
    YOUR TABLE
    
    </details>
  2. Com adicionar uma seção recolhida

  3. Para manter o conteúdo organizado, você pode usar a tag <details> para criar uma seção recolhida expansível.

    <details open>
    
  4. Para criar uma seção recolhida na tabela que você criou, coloque-a entre tags <details>, como no exemplo a seguir.

Entre as tags <summary>, substitua THINGS-TO-RANK pelo que você classificou na tabela.

<details>
<summary>My top languages</summary>

| Rank | Languages |
|-----:|-----------|
|     1| Javascript|
|     2| Python    |
|     3| SQL       |

</details>

Opcionalmente, para que a seção seja exibida como aberta por padrão, adicione o atributo open à tag <details>.

Para verificar se a seção recolhida foi renderizada corretamente, clique na guia **Visualização**.

Exemplo de uma seção recolhida

Aparência da seção recolhida Captura de tela da guia Visualização, com uma seção recolhida chamada "Meus idiomas principais" marcada por uma seta suspensa

  1. Como adicionar uma citação

    ---
    
  2. O Markdown tem muitas outras opções para formatar o conteúdo.

    > QUOTE
    

    Aqui, você adicionará uma regra horizontal para dividir a página e um blockquote para formatar sua cotação favorita. Na parte inferior do arquivo, duas linhas abaixo da tag </details>, adicione uma regra horizontal digitando três ou mais traços.

  3. Abaixo da linha ---, adicione uma citação digitando a marcação como a seguir.

Substitua QUOTE por uma citação da sua escolha.

---
> If we pull together and commit ourselves, then we can push through anything.

— Mona the Octocat

Como alternativa, copie a citação do exemplo abaixo.

Para verificar se tudo foi renderizado corretamente, clique na guia **Visualização**.

Exemplo de uma citação

Aparência da citação Captura de tela da guia Visualização, com uma citação recuada abaixo de uma linha horizontal grossa

  1. Como adicionar um comentário

    <!-- COMMENT -->
    

    Você pode usar a sintaxe de comentário HTML para adicionar um comentário que ficará oculto na saída.

  2. Aqui, você adicionará um comentário para se lembrar de atualizar o LEIAME mais tarde.

Duas linhas abaixo do cabeçalho ## About me, insira um comentário usando a marcação a seguir.

## About me

<!-- TO DO: add more details about me later -->

Substitua COMMENT por um item "pendente" que você quer se lembrar de fazer mais tarde (por exemplo, adicionar mais itens à tabela).

Para verificar se o comentário está oculto na saída, clique na guia Visualização.

  • Exemplo de um comentário
  • Salvando seu trabalho

Quando estiver satisfeito com as alterações, salve o LEIAME do perfil clicando em Fazer commit de alterações.](/assets/images/help/profile/readme-commit-changes.png)

Com a confirmação direta no branch main, suas alterações ficarão visíveis a qualquer visitante no perfil.

Se você quiser salvar o trabalho, mas ainda não quiser deixá-lo visível no perfil, selecione Criar um branch para esse commit e iniciar uma solicitação de pull.

  • Captura de tela da seção "Fazer commit de alterações"
  • Próximas etapas Continue a aprender sobre os recursos de formatação avançada.