Criar e realçar blocos de código

Blocos de código cercados

Você pode criar blocos de código isolados colocando acentos graves triplos ``` antes e depois do bloco de código. É recomendável colocar uma linha em branco antes e depois dos blocos de código para facilitar a leitura da formação bruta.

```
function test() {
  console.log("notice the blank line before this function?");
}
```

Captura de tela do GitHub Markdown renderizado mostrando o uso de aspas triplas para criar blocos de código. O bloco começa com "function test() {."

Dica

Para preservar a formatação dentro de uma lista, certifique-se de recuar os blocos de código não delimitados em oito espaços.

Para mostrar aspas tripas em um bloco de código isolado, envolva-os dentro de aspas quádruplas.

````
```
Look! You can see my backticks.
```
````

Captura de tela do Markdown renderizado mostrando que, quando você escreve três aspas invertidas entre aspas quádruplas, elas ficam visíveis no conteúdo renderizado.

Se você editar tabelas e snippets de código com frequência, poderá se beneficiar da habilitação de uma fonte de largura fixa em todos os campos de comentário no GitHub. Para saber mais, confira Sobre como escrever e formatar em GitHub.

Realce de sintaxe

Você pode adicionar um identificador de idioma opcional para habilitar o destaque de sintaxe no bloco de código delimitado.

O realce da sintaxe altera a cor e o estilo do código-fonte para facilitar a leitura.

Por exemplo, para realçar a sintaxe do código Ruby:

```ruby
require 'redcarpet'
markdown = Redcarpet.new("Hello World!")
puts markdown.to_html
```

Isso exibirá o bloco de código com o realce de sintaxe:

Captura de tela de três linhas de código Ruby, conforme exibidas no GitHub. Os elementos do código são exibidos em tipos púrpura, azul e vermelho, para facilitar a escaneabilidade.

Dica

Ao criar um bloco de código delimitado que você também deseja destacar a sintaxe em um site do GitHub Pages, use identificadores de idioma em minúsculas. Para saber mais, confira Sobre GitHub Pages e Jekyll.

Usamos o Linguist para executar a detecção de linguagem e selecionar gramáticas de terceiros para realce da sintaxe. Descubra as palavras-chave válidas no arquivo YAML de linguagens.

Criando diagramas

Você também pode usar blocos de código para criar diagramas em Markdown. GitHub dá suporte à sintaxe Mermaid, GeoJSON, TopoJSON e ASCII STL. Para saber mais, confira Criando diagramas.

Leitura adicional

          [Especificações do GitHub Flavored Markdown](https://github.github.com/gfm/)

        [AUTOTITLE](/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax)

Quem pode usar esse recurso?

Neste artigo

Blocos de código cercados

Realce de sintaxe

Criando diagramas

Leitura adicional