Cod

Folosiți <code> pentru codul inline și <pre class="prettyprint"> pentru blocurile de cod. Evidențierea de sintaxă funcționează bine pentru multe limbi, inclusiv exemple XML și HTML. Puteți omite class="prettyprint" dacă evidențierea de sintaxă nu este adecvată pentru exemplu, cum ar fi pentru comenzile consolei sau adresele URL ale punctelor finale de serviciu lungi.

Nu depășiți 100 de caractere de cod pe linie într-un bloc <pre> . În DevSite, exact 100 de caractere de cod vor încadra pe ecranele mai mari înainte de a începe derularea orizontală. Pe ecranele mai mici, blocurile de cod vor derula orizontal atunci când este necesar. 80 de caractere se potrivesc pe aproape orice 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>

De obicei, ați omite class="prettyprint" din <pre> pentru comenzile consolei. De exemplu:

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

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

Faceți clic pentru a copia

Un buton de clic pentru a copia apare automat pe toate blocurile de cod cu clasa prettyprint .

Pentru a utiliza click-to-copy pe un bloc de cod sau alt element care nu are clasa prettyprint , adăugați clasa 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>

Dezactivarea clic-pentru-copiare pe un bloc de cod

Pentru a dezactiva clic-pentru-copiere pe un bloc de cod prettyprint , adăugați clasa 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>

Pentru a dezactiva clic-pentru-copiare pe un bloc de cod Markdown , utilizați următoarea sintaxă când deschideți gardul de cod pentru a aplica stilul devsite-disable-click-to-copy :

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

Dezactivarea clic-pentru-copiare pe o parte a unui bloc de cod

Pentru a preveni copierea unei părți a unui bloc de cod, adăugați o etichetă <span> cu o clasă de no-select în jurul părții pe care nu doriți să o copiați: 

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

În exemplul de mai jos, atât copiarea manuală, cât și butonul clic-pentru-copiare ignoră porțiunea adnotată:

C:\\> ping google.com

Evenimente de analiză cu clic pentru a copia

Pentru a dezambigua evenimentele de analiză clic pentru a copia, setați atributul data-copy-event-label . 

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

Click pentru a copia și accesibilitate

În mod prestabilit, toate mostrele de cod clic-pentru-copiare au aceeași etichetă pentru fiecare buton clic-pentru-copiare: „Copiați eșantionul de cod”. Pe paginile cu mai multe mostre de cod, acest lucru poate face dificilă navigarea cu un cititor de ecran.

Pentru accesibilitate, furnizați fiecărei mostre de cod clic pentru a copia un atribut data-label care etichetează pe scurt și concis conținutul fiecărui eșantion de cod. Fiecare etichetă de eșantion de cod ar trebui să fie unică în raport cu toate celelalte etichete de eșantion de cod de pe pagină; această etichetă este citită de cititoarele de ecran în plus față de „Copiați eșantionul de cod”. {:.devsite-click-to-copy} <pre class="devsite-click-to-copy" data-label="Installation script"></pre>

Dezactivarea comutatorului lumină/întuneric

Pentru a dezactiva butonul de comutare lumină/întuneric pe un bloc de cod, adăugați clasa devsite-disable-code-toggle : 

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

Pentru a dezactiva butonul de comutare lumină/întuneric pe un bloc de cod Markdown , utilizați următoarea sintaxă când deschideți gardul de cod pentru a aplica clasa devsite-disable-code-toggle : 

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

Cod întunecat în mod implicit

Pentru a face ca un bloc de cod să folosească stilul de cod întunecat în mod implicit, adăugați clasa devsite-dark-code-default : 

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

Împachetarea liniei de forță

În mod implicit, o bară de defilare orizontală este adăugată pentru liniile dintr-un bloc <pre> care depășesc 100 de caractere. 

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)

Pentru a suprascrie acest comportament și pentru a împacheta liniile, adăugați class="wrap-code" la blocul <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)

Cod: 

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

Cod terminal

Când demonstrăm codul pentru terminal, recomandăm autorilor să folosească $ pentru a indica o nouă comandă de terminal. Pentru a adăuga $ la începutul conținutului unui container <pre> fără a-l adăuga la codul copiat de utilizator, aplicați class="devsite-terminal" elementului <pre> .

adb devices

Cod: 

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

Pentru a adăuga $ la începutul unei singure linii de cod terminal, aplicați class="devsite-terminal" elementului <code> care conține acea linie. Utilizați această tactică pentru cazurile cu $ în mai multe rânduri. 

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

Cod: 

<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

Pentru a utiliza un prefix personalizat, adăugați atributul data-terminal-prefix la elementul <pre> sau <code> în care a fost aplicată clasa. 

Install-Package Google.Apis.Calendar.v3

Cod: 

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

Toate instanțele prefixului adăugat folosind clasa „devsite-terminal” vor fi excluse din codul copiat de utilizator.

Evidențierea

Utilizați <strong> pentru a atrage atenția asupra conținutului dintr-un bloc <pre> . Procedând astfel, conținutul din jur va lumina pentru a sublinia secțiunea evidențiată de blocul <strong> . De exemplu: 

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

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

Cod: 

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

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

Variabile înlocuibile

Utilizați <var> și majuscule cu caractere de subliniere pentru textul înlocuibil în <pre> . De exemplu: 

dev_appserver.py YOUR_APP_DIR.

Cod: 

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

În Markdown, includeți etichetele <var> între ghilimele și utilizați paranteze pentru expresii Jinja pentru a scăpa de etichete, astfel: VAR_NAME .

De exemplu: 

Hello, my name is YOUR_NAME.

Cod: 

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

Markdown

De asemenea, puteți specifica blocuri de cod folosind Markdown fie cu indentarea codului în 4 spații, fie îngrădindu-l cu 3 backtick-uri (```).

De exemplu: 

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

    print("hello world")

ambele devin 

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

Dacă utilizați blocuri de cod îngrădite (și nu blocuri de cod indentate), puteți specifica și limba pentru ca prettyprint să o înțeleagă: 

print("hello world")

devine 

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

Puteți găsi lista limbilor recunoscute în documentația Prettify .

Toate blocurile de cod realizate prin Markdown vor avea aplicată clasa prettyprint, cu excepția cazului în care setați explicit limba la niciunul. Puteți adăuga clase suplimentare la blocul de cod folosind atribute personalizate : 

The program completed successfully.

devine 

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