Skip to main content

Criar e realçar blocos de código

Compartilhe amostras de código com blocos de código protegidos e habilite o realce de sintaxe.

Blocos de código isolados

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 como as aspas invertidas triplas fazem com que um bloco de código seja renderizado na formatação bruta. O bloco começa com "function test() {."

Dica: para preservar sua formatação em uma lista, recue os blocos de código não isolados 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 GitHub Markdown renderizado mostrando como as aspas invertidas quádruplas fazem com que as aspas invertidas triplas ao redor de um bloco de código permaneçam visíveis. O bloco diz: "Olha só! É possível ver minhas aspas invertidas”.

Se você estiver editando 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 obter mais informações, confira "Sobre gravação e formatação no GitHub".

Realce de sintaxe

Você pode adicionar um identificador de linguagem opcional para habilitar o realce de sintaxe no bloco de código isolado.

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

Por exemplo, para código Ruby do realce de sintaxe:

```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 com os tipos roxo, azul e vermelho, o que torna as linhas mais visualmente verificáveis.

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. O GitHub dá suporte às sintaxes Mermaid, GeoJSON, TopoJSON e ASCII STL. Para obter mais informações, confira "Criando diagramas".

Leitura adicional