Cette page a été traduite par l'API Cloud Translation.

Code

Utilisez <code> pour le code intégré et <pre class="prettyprint"> pour les blocs de code. La mise en surbrillance de la syntaxe fonctionne bien pour de nombreux langages, y compris les exemples XML et HTML. Vous pouvez omettre class="prettyprint" si la mise en surbrillance de la syntaxe n'est pas adaptée à l'exemple, par exemple pour les commandes de console ou les longues URL de point de terminaison de service.

Ne dépassez pas 100 caractères de code par ligne dans un bloc <pre>. Dans DevSite, exactement 100 caractères de code peuvent tenir sur les écrans plus grands avant que le défilement horizontal ne s'active. Sur les petits écrans, les blocs de code défilent horizontalement si nécessaire. 80 caractères tiennent sur presque tous les ordinateurs portables.

#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>

En règle générale, vous omettez class="prettyprint" de <pre> pour les commandes de console. Exemple :

dev_appserver.py -a $HOST --debug demos/getstarted

<pre>dev_appserver.py -a $HOST --debug demos/getstarted</pre>

Cliquer pour copier

Un bouton permettant de cliquer pour copier apparaît automatiquement sur tous les blocs de code avec la classe prettyprint.

Pour utiliser la fonctionnalité de clic pour copier sur un bloc de code ou un autre élément qui ne comporte pas la classe prettyprint, ajoutez la 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>

Désactiver le clic pour copier sur un bloc de code

Pour désactiver la fonctionnalité de clic pour copier sur un bloc de code prettyprint, ajoutez la 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>

Pour désactiver la fonctionnalité de clic pour copier sur un bloc de code Markdown, utilisez la syntaxe suivante lorsque vous ouvrez la balise de code pour appliquer le style devsite-disable-click-to-copy:

{:.devsite-disable-click-to-copy}

Désactiver la fonctionnalité "Cliquer pour copier" sur une partie d'un bloc de code

Pour empêcher la copie d'une partie d'un bloc de code, ajoutez une balise <span> avec une classe no-select autour de la partie que vous ne souhaitez pas copier:

<span class="no-select">C:\> </span>ping google.com

Dans l'exemple ci-dessous, la copie manuelle et le bouton "Cliquer pour copier" ignorent la partie annotée:

C:\\> ping google.com

Événements d'analyse "Cliquer pour copier"

Pour distinguer les événements d'analyse de clic pour copier, définissez l'attribut data-copy-event-label.

data-copy-event-label

<pre class="devsite-terminal devsite-click-to-copy" data-copy-event-label="unique_identifier"></pre>

Cliquer pour copier et accessibilité

Par défaut, tous les exemples de code à copier ont le même libellé pour chaque bouton à cliquer pour copier: "Copier l'exemple de code". Sur les pages contenant plusieurs exemples de code, cela peut compliquer la navigation avec un lecteur d'écran.

Pour des raisons d'accessibilité, attribuez à chaque exemple de code à copier un attribut data-label qui indique brièvement et de manière concise le contenu de chaque exemple de code. Chaque étiquette d'exemple de code doit être unique par rapport à toutes les autres étiquettes d'exemple de code de la page. Cette étiquette est lue par les lecteurs d'écran en plus de "Copier l'exemple de code". {:.devsite-click-to-copy} <pre class="devsite-click-to-copy" data-label="Installation script"></pre>

Désactivation du bouton bascule clair/sombre

Pour désactiver le bouton d'activation/de désactivation du thème clair/sombre sur un bloc de code, ajoutez la classe devsite-disable-code-toggle:

<pre class="prettyprint devsite-disable-code-toggle"></pre>

Pour désactiver le bouton d'activation/de désactivation du mode clair/sombre sur un bloc de code Markdown, utilisez la syntaxe suivante lorsque vous ouvrez le code pour appliquer la classe devsite-disable-code-toggle:

``` {.devsite-disable-code-toggle}

Code sombre par défaut

Pour qu'un bloc de code utilise le style de code sombre par défaut, ajoutez la classe devsite-dark-code-default:

<pre class="prettyprint devsite-dark-code-default"></pre>

Forcer le renvoi à la ligne

Par défaut, une barre de défilement horizontale est ajoutée pour les lignes d'un bloc <pre> qui dépassent 100 caractères.

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)

Pour remplacer ce comportement et encapsuler les lignes à la place, ajoutez class="wrap-code" au bloc <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>

Code du terminal

Lorsque vous présentez du code pour le terminal, nous vous recommandons d'utiliser $ pour indiquer une nouvelle commande de terminal. Pour ajouter $ au début du contenu d'un conteneur <pre> sans l'ajouter au code copié de l'utilisateur, appliquez class="devsite-terminal" à l'élément <pre>.

adb devices

Code :

<pre class="devsite-terminal devsite-click-to-copy">
adb devices
</pre>

Pour ajouter $ au début d'une seule ligne de code de terminal, appliquez class="devsite-terminal" à l'élément <code> contenant cette ligne. Utilisez cette stratégie pour les cas avec $ sur plusieurs lignes.

gradle init --type basic
mkdir -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

Pour utiliser un préfixe personnalisé, ajoutez l'attribut data-terminal-prefix à l'élément <pre> ou <code> où la classe a été appliquée.

Install-Package Google.Apis.Calendar.v3

Code :

<pre class="devsite-terminal devsite-click-to-copy" data-terminal-prefix="PM&gt; ">
Install-Package Google.Apis.Calendar.v3
</pre>

Toutes les instances du préfixe ajoutées à l'aide de la classe "devsite-terminal" seront exclues du code copié de l'utilisateur.

Mèches

Utilisez <strong> pour attirer l'attention sur le contenu d'un bloc <pre>. Cela éclaircit le contenu environnant pour mettre en avant la section mise en surbrillance par le bloc <strong>. Exemple :

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

Variables remplaçables

Utilisez <var> et des majuscules avec des traits de soulignement pour le texte remplaçable dans <pre>. Exemple :

dev_appserver.py YOUR_APP_DIR.

Code :

<pre>dev_appserver.py <var>YOUR_APP_DIR</var></pre>

En Markdown, placez les balises <var> entre guillemets et utilisez les crochets d'expression Jinja pour échapper les balises, comme suit: VAR_NAME.

Exemple :

Hello, my name is YOUR_NAME.

Code :

    ```
    Hello, my name is YOUR_NAME.
    ```

Markdown

Vous pouvez également spécifier des blocs de code à l'aide de Markdown en ajoutant un retrait de quatre espaces au code ou en l'encadrant avec trois accents graves (```).

Exemple :

    ```
    print("hello world")
    ```

    print("hello world")

les deux deviennent

<pre class="prettyprint notranslate" translate="no"><code>
print("hello world")
</code></pre>

Si vous utilisez des blocs de code délimités (et non des blocs de code mis en retrait), vous pouvez également spécifier la langue pour que la mise en forme de texte puisse la comprendre:

print("hello world")

devient

<pre class="prettyprint notranslate lang-py" translate="no"><code>
print("hello world")
</code></pre>

Vous trouverez la liste des langues reconnues dans la documentation Prettify.

La classe prettyprint est appliquée à tous les blocs de code créés via Markdown, sauf si vous définissez explicitement la langue sur "none". Vous pouvez ajouter des classes supplémentaires au bloc de code à l'aide d'attributs personnalisés:

The program completed successfully.

devient

<pre class="devsite-disable-click-to-copy"><code>The program completed successfully.
</code></pre>