Questa pagina è stata tradotta dall'API Cloud Translation.

Codice

Utilizza <code> per il codice in linea e <pre class="prettyprint"> per i blocchi di codice. L'evidenziazione della sintassi funziona bene per molti linguaggi, inclusi gli esempi XML e HTML. Puoi omettere class="prettyprint" se l'evidenziazione della sintassi non è appropriata per l'esempio, ad esempio per i comandi della console o gli URL endpoint dei servizi lunghi.

Non superare i 100 caratteri di codice per riga in un blocco <pre>. In DevSite, su schermi più grandi possono essere visualizzati esattamente 100 caratteri di codice prima dell'attivazione dello scorrimento orizzontale. Su schermi più piccoli, i blocchi di codice scorrono orizzontalmente, se necessario. 80 caratteri si adattano a quasi tutti i 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>

In genere, per i comandi della console, omettiamo class="prettyprint" da <pre>. Ad esempio:

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

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

Fai clic per copiare

Un pulsante di copia tramite clic viene visualizzato automaticamente su tutti i blocchi di codice con la classe prettyprint.

Per utilizzare la funzionalità di copia tramite clic su un blocco di codice o su un altro elemento che non ha la classe prettyprint, aggiungi 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>

Disattivare il clic per copiare in un blocco di codice

Per disattivare la funzionalità di copia tramite clic su un blocco di codice prettyprint, aggiungi 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>

Per disattivare il clic per copiare in un blocco di codice Markdown, utilizza la seguente sintassi quando apri le parentesi graffe del codice per applicare lo stile devsite-disable-click-to-copy:

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

Disattivare la funzionalità di copia tramite clic su parte di un blocco di codice

Per impedire la copia di parte di un blocco di codice, aggiungi un tag <span> con una classe no-select intorno alla parte che non vuoi che venga copiata:

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

Nell'esempio riportato di seguito, sia la copia manuale sia il pulsante di copia al clic ignorano la parte annotata:

C:\\> ping google.com

Eventi di analisi di Clicca per copiare

Per distinguere gli eventi di analisi dei clic per copiare, imposta l'attributo data-copy-event-label.

data-copy-event-label

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

Clicca per copiare e accessibilità

Per impostazione predefinita, tutti gli esempi di codice con clic per copiare hanno la stessa etichetta per ogni pulsante: "Copia esempio di codice". Nelle pagine con più esempi di codice, la navigazione con uno screen reader può essere complicata.

Per motivi di accessibilità, fornisci a ogni esempio di codice da copiare con un clic un attributo data-label che etichetti in modo breve e conciso i contenuti di ogni esempio di codice. Ogni etichetta di esempio di codice deve essere univoca rispetto a tutte le altre etichette di esempio di codice presenti nella pagina. Questa etichetta viene letta dagli screen reader, oltre a "Copia esempio di codice". {:.devsite-click-to-copy} <pre class="devsite-click-to-copy" data-label="Installation script"></pre>

Disattivare l'opzione di attivazione/disattivazione della modalità chiara/scura

Per disattivare il pulsante di attivazione/disattivazione modalità chiara/scura in un blocco di codice, aggiungi la classe devsite-disable-code-toggle:

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

Per disattivare il pulsante di attivazione/disattivazione della modalità chiara/scura in un blocco di codice Markdown, utilizza la seguente sintassi quando apri la griglia di codice per applicare la classe devsite-disable-code-toggle:

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

Codice scuro per impostazione predefinita

Per fare in modo che un blocco di codice utilizzi lo stile di codice scuro per impostazione predefinita, aggiungi la classe devsite-dark-code-default:

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

Forzare il ritorno a capo automatico

Per impostazione predefinita, viene aggiunta una barra di scorrimento orizzontale per le righe di un blocco <pre> che superano i 100 caratteri.

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)

Per eseguire l'override di questo comportamento e troncare le righe, aggiungi class="wrap-code" al blocco <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)

Codice:

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

Codice terminale

Quando dimostri il codice per il terminale, consigliamo agli autori di utilizzare $ per indicare un nuovo comando del terminale. Per aggiungere $ all'inizio dei contenuti di un contenitore <pre> senza aggiungerlo al codice copiato dall'utente, applica class="devsite-terminal" all'elemento <pre>.

adb devices

Codice:

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

Per aggiungere $ all'inizio di una singola riga di codice del terminale, applica class="devsite-terminal" all'elemento <code> contenente la riga. Utilizza questa tattica per i casi con $ in più righe.

gradle init --type basic
mkdir -p src/main/java src/main/resources

Codice:

<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

Per utilizzare un prefisso personalizzato, aggiungi l'attributo data-terminal-prefix all'elemento <pre> o <code> in cui è stata applicata la classe.

Install-Package Google.Apis.Calendar.v3

Codice:

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

Tutte le istanze del prefisso aggiunte utilizzando la classe "devsite-terminal" verranno escluse dal codice copiato dell'utente.

Trattamento illuminante

Utilizza <strong> per attirare l'attenzione sui contenuti all'interno di un blocco <pre>. In questo modo, i contenuti circostanti verranno schiariti per mettere in evidenza la sezione evidenziata dal blocco <strong>. Ad esempio:

// ...
// ...
// ...
for (i = 0; i < 10; i++) {
    printf("Counting %d\n", i);

    if (i % 3 == 0) {
        someFunc(i);
    }
}
// ...
// ...
// ...

Codice:

<pre class="prettyprint">
// ...
// ...
// ...
for (i = 0; i < 10; i++) {
    printf("Counting %d\n", i);

    <strong>if (i % 3 == 0) {
        someFunc(i);
    }</strong>
}
// ...
// ...
// ...
</pre>

Variabili sostituibili

Utilizza <var> e maiuscole con trattini bassi per il testo sostituibile all'interno di <pre>. Ad esempio:

dev_appserver.py YOUR_APP_DIR.

Codice:

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

In Markdown, racchiudi i tag <var> tra virgolette e utilizza le parentesi delle espressioni Jinja per eseguire l'escapismo dei tag, ad esempio: VAR_NAME.

Ad esempio:

Hello, my name is YOUR_NAME.

Codice:

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

Markdown

Puoi anche specificare i blocchi di codice utilizzando Markdown con rientro di 4 spazi nel codice o racchiudendolo tra tre accenti gravi (```).

Ad esempio:

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

    print("hello world")

entrambi diventano

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

Se utilizzi blocchi di codice delimitati (e non blocchi di codice con rientro), puoi anche specificare la lingua che prettyprint deve comprendere:

print("hello world")

diventa

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

Puoi trovare l'elenco delle lingue riconosciute nella documentazione di Prettify.

A tutti i blocchi di codice creati tramite Markdown verrà applicata la classe prettyprint, a meno che non venga impostata esplicitamente la lingua su none. Puoi aggiungere altre classi al blocco di codice utilizzando gli attributi personalizzati:

The program completed successfully.

diventa

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