Kodirati

Koristite <code> za ugrađeni kod i <pre class="prettyprint"> za blokove koda. Označavanje sintakse dobro funkcionira za mnoge jezike, uključujući XML i HTML primjere. Možete izostaviti class="prettyprint" ako isticanje sintakse nije prikladno za primjer, kao što su naredbe konzole ili dugotrajni URL-ovi krajnjih točaka usluge.

Nemojte premašiti 100 znakova koda po retku u bloku <pre> . U DevSite-u će točno 100 znakova koda stati na veće zaslone prije nego što počne vodoravno pomicanje. Na manjim zaslonima, blokovi koda će se po potrebi pomicati vodoravno. 80 znakova stane na gotovo svako prijenosno računalo.

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

Obično biste izostavili class="prettyprint" iz <pre> za naredbe konzole. Na primjer:

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

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

Kliknite za kopiranje

Gumb "klikni za kopiranje" automatski se pojavljuje na svim blokovima koda s klasom prettyprint .

Da biste koristili click-to-copy na bloku koda ili drugom elementu koji nema klasu prettyprint , dodajte klasu 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>

Onemogućavanje klikni za kopiranje na bloku koda

Da biste onemogućili klikni za kopiranje na prettyprint kodnom bloku, dodajte klasu 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>

Da biste onemogućili klikni za kopiranje na bloku Markdown koda , upotrijebite sljedeću sintaksu kada otvorite ogradu koda za primjenu stila devsite-disable-click-to-copy :

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

Onemogućavanje klikni za kopiranje na dijelu bloka koda

Kako biste spriječili kopiranje dijela bloka koda, dodajte oznaku <span> s klasom no-select oko dijela koji ne želite kopirati: 

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

U donjem primjeru, i ručno kopiranje i gumb za kopiranje klikni zanemaruju dio s komentarima:

C:\\> ping google.com

Klikni za kopiranje analitičkih događaja

Da biste razjasnili analitičke događaje klikni za kopiranje, postavite atribut data-copy-event-label . 

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

Klikni za kopiranje i pristupačnost

Prema zadanim postavkama, svi uzorci koda klikni za kopiranje imaju istu oznaku za svaki gumb klikni za kopiranje: "Kopiraj uzorak koda". Na stranicama s višestrukim uzorcima koda to može otežati navigaciju pomoću čitača zaslona.

Radi pristupačnosti, osigurajte svaki uzorak koda za kopiranje klikom s atributom data-label koji kratko i sažeto označava sadržaj svakog uzorka koda. Svaka oznaka uzorka koda treba biti jedinstvena u odnosu na sve ostale oznake uzorka koda na stranici; ovu oznaku čitaju čitači zaslona uz "Kopiraj uzorak koda". {:.devsite-click-to-copy} <pre class="devsite-click-to-copy" data-label="Installation script"></pre>

Onemogućivanje prekidača svijetlo/tamno

Da biste onemogućili gumb za prebacivanje svijetlo/tamno na blok koda, dodajte klasu devsite-disable-code-toggle : 

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

Da biste onemogućili gumb za prebacivanje svijetlo/tamno na Markdown blok koda , upotrijebite sljedeću sintaksu kada otvorite ogradu koda za primjenu klase devsite-disable-code-toggle : 

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

Tamni kod prema zadanim postavkama

Kako bi blok koda prema zadanim postavkama koristio tamni stil koda, dodajte klasu devsite-dark-code-default : 

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

Prisilno omatanje linije

Prema zadanim postavkama, vodoravna traka za pomicanje dodaje se za retke u bloku <pre> koji premašuju 100 znakova. 

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)

Da biste nadjačali ovo ponašanje i umjesto toga prelomili retke, dodajte class="wrap-code" bloku <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)

Kodirati: 

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

Kod terminala

Prilikom demonstracije koda za terminal, preporučujemo da autori koriste $ za označavanje nove naredbe terminala. Za dodavanje $ na početak sadržaja spremnika <pre> bez dodavanja u korisnički kopirani kod, primijenite class="devsite-terminal" na element <pre> .

adb devices

Kodirati: 

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

Da biste dodali $ na početak jednog retka koda terminala, primijenite class="devsite-terminal" na element <code> koji sadrži taj redak. Koristite ovu taktiku za slučajeve s $ u više redaka. 

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

Kodirati: 

<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

Za korištenje prilagođenog prefiksa dodajte atribut data-terminal-prefix elementu <pre> ili <code> gdje je primijenjena klasa. 

Install-Package Google.Apis.Calendar.v3

Kodirati: 

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

Sve instance prefiksa dodane pomoću klase "devsite-terminal" bit će isključene iz korisničkog kopiranog koda.

Isticanje

Koristite <strong> da biste skrenuli pozornost na sadržaj unutar bloka <pre> . Time ćete osvijetliti okolni sadržaj kako biste naglasili odjeljak označen blokom <strong> . Na primjer: 

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

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

Kodirati: 

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

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

Zamjenjive varijable

Koristite <var> i velika slova s ​​podvlakama za zamjenjivi tekst unutar <pre> . Na primjer: 

dev_appserver.py YOUR_APP_DIR.

Kodirati: 

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

U Markdownu stavite <var> oznake u navodnike i koristite Jinja izrazne zagrade za izbjegavanje oznaka, ovako: VAR_NAME .

Na primjer: 

Hello, my name is YOUR_NAME.

Kodirati: 

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

Smanjenje

Također možete odrediti blokove koda koristeći Markdown s uvlačenjem koda s 4 razmaka ili ograđivanjem s 3 povratne kvačice (```).

Na primjer: 

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

    print("hello world")

oboje postaju 

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

Ako koristite ograđene blokove koda (a ne uvučene blokove koda), također možete odrediti jezik za prettyprint da biste ga razumjeli: 

print("hello world")

postaje 

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

Popis priznatih jezika možete pronaći u Prettify dokumentaciji .

Svi blokovi koda izrađeni putem Markdowna imat će primijenjenu klasu prettyprint, osim ako izričito ne postavite jezik na none. Možete dodati dodatne klase u blok koda korištenjem prilagođenih atributa : 

The program completed successfully.

postaje 

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