Use <code> para código inline e <pre class="prettyprint"> para blocos de código. O realce de sintaxe funciona bem para muitos idiomas, incluindo exemplos de XML e HTML. O class="prettyprint" pode ser omitido se o destaque de sintaxe não for adequado para o exemplo, como em comandos de console ou URLs de endpoint de serviço longos.
Não exceda 100 caracteres de código por linha em um bloco <pre>. No DevSite, exatamente 100 caracteres de código cabem em telas maiores antes que a rolagem horizontal seja ativada. Em telas menores, os blocos de código rolam horizontalmente quando necessário. 80 caracteres cabem em praticamente qualquer laptop.
#include <stdio.h>
/* Counting example */
int main(int argc, char** argv) {
int i;
// This counts from 0 to 9.
for (i = 0; i < 10; i++) {
printf("Counting %d\n", i);
}
}
<pre class="prettyprint">
#include <stdio.h>
/* Counting example */
int main(int argc, char** argv) {
int i;
// This counts from 0 to 9.
for (i = 0; i < 10; i++) {
printf("Counting %d\n", i);
}
}
</pre>
Normalmente, você omite class="prettyprint" de <pre> para comandos de console. Exemplo:
dev_appserver.py -a $HOST --debug demos/getstarted
<pre>dev_appserver.py -a $HOST --debug demos/getstarted</pre>
Clique para copiar
Um botão de clique para copiar aparece automaticamente em todos os blocos de código com a classe prettyprint.
Para usar o recurso "clique para copiar" em um bloco de código ou outro elemento que não tenha a classe prettyprint, adicione a classe devsite-click-to-copy:
some_terminal_command.py --users_should_copy
<pre class="devsite-click-to-copy">some_terminal_command.py --users_should_copy</pre>
Como desativar a opção "Clique para copiar" em um bloco de código
Para desativar o recurso "Clique para copiar" em um bloco de código prettyprint, adicione a classe devsite-disable-click-to-copy:
www.example-url-that-does-not-make-sense-to-copy.com
<pre class="prettyprint devsite-disable-click-to-copy">www.example-url-that-does-not-make-sense-to-copy.com</pre>
Para desativar o clique para copiar em um bloco de código Markdown, use a seguinte sintaxe ao abrir a cerca de código para aplicar o estilo devsite-disable-click-to-copy:
{:.devsite-disable-click-to-copy}
Como desativar a opção "Clique para copiar" em parte de um bloco de código
Para evitar que parte de um bloco de código seja copiada, adicione uma tag <span> com uma classe no-select em torno da parte que você não quer que seja copiada:
<span class="no-select">C:\> </span>ping google.com
No exemplo abaixo, a cópia manual e o botão de clique para copiar ignoram a parte anotada:
C:\\> ping google.com
Eventos de análise de clique para copiar
Para eliminar a ambiguidade dos eventos de análise de clique para copiar, defina o atributo data-copy-event-label.
data-copy-event-label
<pre class="devsite-terminal devsite-click-to-copy" data-copy-event-label="unique_identifier"></pre>
Clique para copiar e acessibilidade
Por padrão, todos os exemplos de código de clique para copiar têm o mesmo rótulo para cada botão: "Exemplo de código para copiar". Em páginas com vários exemplos de código, isso pode dificultar a navegação com um leitor de tela.
Para garantir a acessibilidade, forneça a cada exemplo de código de clique para copiar um atributo data-label que identifique de forma breve e concisa o conteúdo de cada exemplo. Cada rótulo de exemplo de código precisa ser exclusivo em relação a todos os outros rótulos de exemplo de código na página. Esse rótulo é lido por leitores de tela, além de "Copiar exemplo de código".
{:.devsite-click-to-copy}
<pre class="devsite-click-to-copy" data-label="Installation script"></pre>
Como desativar a alternância entre claro e escuro
Para desativar o botão de alternância claro/escuro em um bloco de código, adicione a classe devsite-disable-code-toggle:
<pre class="prettyprint devsite-disable-code-toggle"></pre>
Para desativar o botão de alternância claro/escuro em um bloco de código Markdown, use a seguinte sintaxe ao abrir a cerca de código para aplicar a classe devsite-disable-code-toggle:
``` {.devsite-disable-code-toggle}
Dark code por padrão
Para fazer com que um bloco de código use o estilo de código escuro por padrão, adicione a classe devsite-dark-code-default:
<pre class="prettyprint devsite-dark-code-default"></pre>
Forçar quebra de linha
Por padrão, uma barra de rolagem horizontal é adicionada para linhas em um bloco <pre> com mais de 100 caracteres.
run(dataset: google.cloud.aiplatform.datasets.time_series_dataset.TimeSeriesDataset, target_column: str, time_column: str, time_series_identifier_column: str, unavailable_at_forecast_columns: List[str], available_at_forecast_columns: List[str], forecast_horizon: int, data_granularity_unit: str, data_granularity_count: int, training_fraction_split: Optional[float] = None, validation_fraction_split: Optional[float] = None, test_fraction_split: Optional[float] = None, predefined_split_column_name: Optional[str] = None, weight_column: Optional[str] = None, time_series_attribute_columns: Optional[List[str]] = None, context_window: Optional[int] = None, export_evaluated_data_items: bool = False, export_evaluated_data_items_bigquery_destination_uri: Optional[str] = None, export_evaluated_data_items_override_destination: bool = False, quantiles: Optional[List[float]] = None, validation_options: Optional[str] = None, budget_milli_node_hours: int = 1000, model_display_name: Optional[str] = None, model_labels: Optional[Dict[str, str]] = None, sync: bool = True)
Para substituir esse comportamento e agrupar as linhas, adicione class="wrap-code" ao bloco <pre>.
run(dataset: google.cloud.aiplatform.datasets.time_series_dataset.TimeSeriesDataset, target_column: str, time_column: str, time_series_identifier_column: str, unavailable_at_forecast_columns: List[str], available_at_forecast_columns: List[str], forecast_horizon: int, data_granularity_unit: str, data_granularity_count: int, training_fraction_split: Optional[float] = None, validation_fraction_split: Optional[float] = None, test_fraction_split: Optional[float] = None, predefined_split_column_name: Optional[str] = None, weight_column: Optional[str] = None, time_series_attribute_columns: Optional[List[str]] = None, context_window: Optional[int] = None, export_evaluated_data_items: bool = False, export_evaluated_data_items_bigquery_destination_uri: Optional[str] = None, export_evaluated_data_items_override_destination: bool = False, quantiles: Optional[List[float]] = None, validation_options: Optional[str] = None, budget_milli_node_hours: int = 1000, model_display_name: Optional[str] = None, model_labels: Optional[Dict[str, str]] = None, sync: bool = True)
Code:
<pre class="wrap-code">
run(dataset: google.cloud.aiplatform.datasets.time_series_dataset.TimeSeriesDataset, target_column: str, time_column: str, time_series_identifier_column: str, unavailable_at_forecast_columns: List[str], available_at_forecast_columns: List[str], forecast_horizon: int, data_granularity_unit: str, data_granularity_count: int, training_fraction_split: Optional[float] = None, validation_fraction_split: Optional[float] = None, test_fraction_split: Optional[float] = None, predefined_split_column_name: Optional[str] = None, weight_column: Optional[str] = None, time_series_attribute_columns: Optional[List[str]] = None, context_window: Optional[int] = None, export_evaluated_data_items: bool = False, export_evaluated_data_items_bigquery_destination_uri: Optional[str] = None, export_evaluated_data_items_override_destination: bool = False, quantiles: Optional[List[float]] = None, validation_options: Optional[str] = None, budget_milli_node_hours: int = 1000, model_display_name: Optional[str] = None, model_labels: Optional[Dict[str, str]] = None, sync: bool = True)
</pre>
Código do terminal
Ao demonstrar o código do terminal, recomendamos que os autores usem $ para indicar um novo comando do terminal. Para adicionar $ ao início do conteúdo de um contêiner <pre> sem adicionar ao código copiado do usuário, aplique class="devsite-terminal" ao elemento <pre>.
adb devices
Code:
<pre class="devsite-terminal devsite-click-to-copy">
adb devices
</pre>
Para adicionar $ ao início de uma única linha de código do terminal, aplique class="devsite-terminal" ao elemento <code> que contém essa linha. Use essa tática para casos com $ em várias linhas.
gradle init --type basicmkdir -p src/main/java src/main/resources
Code:
<pre class="prettyprint">
<code class="devsite-terminal">gradle init --type basic</code>
<code class="devsite-terminal">mkdir -p src/main/java src/main/resources</code>
</pre
Para usar um prefixo personalizado, adicione o atributo data-terminal-prefix ao elemento <pre> ou <code> em que a classe foi aplicada.
Install-Package Google.Apis.Calendar.v3
Code:
<pre class="devsite-terminal devsite-click-to-copy" data-terminal-prefix="PM> ">
Install-Package Google.Apis.Calendar.v3
</pre>
Todas as instâncias do prefixo adicionadas usando a classe "devsite-terminal" serão excluídas do código copiado do usuário.
Luzes
Use <strong> para chamar a atenção para o conteúdo em um bloco <pre>. Isso
ilumina o conteúdo ao redor para enfatizar a seção destacada pelo
bloco <strong>. Exemplo:
// ...
// ...
// ...
for (i = 0; i < 10; i++) {
printf("Counting %d\n", i);
if (i % 3 == 0) {
someFunc(i);
}
}
// ...
// ...
// ...
Code:
<pre class="prettyprint">
// ...
// ...
// ...
for (i = 0; i < 10; i++) {
printf("Counting %d\n", i);
<strong>if (i % 3 == 0) {
someFunc(i);
}</strong>
}
// ...
// ...
// ...
</pre>
Variáveis substituíveis
Use <var> e letras maiúsculas com sublinhados para o texto substituível em <pre>. Exemplo:
dev_appserver.py YOUR_APP_DIR.
Code:
<pre>dev_appserver.py <var>YOUR_APP_DIR</var></pre>
No Markdown, inclua as tags <var> entre aspas e use colchetes de expressão Jinja para escapar das tags, como esta: VAR_NAME.
Exemplo:
Hello, my name is YOUR_NAME.
Code:
```
Hello, my name is YOUR_NAME.
```
Markdown
Também é possível especificar blocos de código usando Markdown com recuo de quatro espaços ou com três crases (```).
Exemplo:
```
print("hello world")
```
print("hello world")
ambos se tornam
<pre class="prettyprint notranslate" translate="no"><code>
print("hello world")
</code></pre>
Se você estiver usando blocos de código cercados (e não blocos de código recuados), também poderá especificar o idioma para que a impressão bonita seja entendida:
print("hello world")
se torna
<pre class="prettyprint notranslate lang-py" translate="no"><code>
print("hello world")
</code></pre>
Confira a lista de idiomas reconhecidos na documentação do Prettify.
Todos os blocos de código feitos com Markdown terão a classe prettyprint aplicada, a menos que a linguagem seja definida explicitamente como nenhuma. É possível adicionar outras classes ao bloco de código usando atributos personalizados:
The program completed successfully.
se torna
<pre class="devsite-disable-click-to-copy"><code>The program completed successfully.
</code></pre>