Kode

Bruk <code> for innebygd kode, og <pre class="prettyprint"> for kodeblokker. Syntaksuthevingen fungerer bra for mange språk, inkludert XML- og HTML-eksempler. Du kan utelate class="prettyprint" hvis syntaksuthevingen ikke passer for eksempelet, for eksempel for konsollkommandoer eller lange tjenesteendepunkt-URLer.

Ikke overskrid 100 tegn med kode per linje i en <pre> -blokk. I DevSite vil nøyaktig 100 tegn kode passe på større skjermer før horisontal rulling starter. På mindre skjermer vil kodeblokker rulle horisontalt når det er nødvendig. 80 tegn passer på stort sett alle bærbare datamaskiner.

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

Du vil vanligvis utelate class="prettyprint" fra <pre> for konsollkommandoer. For eksempel:

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

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

Klikk for å kopiere

En klikk for å kopiere-knapp vises automatisk på alle kodeblokker med klassen prettyprint .

For å bruke click-to-copy på en kodeblokk eller annet element som ikke har klassen prettyprint , legg til klassen 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>

Deaktivering av klikk for å kopiere på en kodeblokk

For å deaktivere klikk for å kopiere på en prettyprint -kodeblokk, legg til klassen 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>

For å deaktivere klikk for å kopiere på en Markdown-kodeblokk , bruk følgende syntaks når du åpner kodegjerdet for å bruke stilen devsite-disable-click-to-copy :

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

Deaktivering av klikk for å kopiere på en del av en kodeblokk

For å forhindre kopiering av deler av en kodeblokk, legg til en <span> -tag med klassen no-select rundt delen du ikke vil kopiere: 

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

I eksemplet nedenfor ignorerer både manuell kopiering og klikk-for-kopier-knappen den kommenterte delen:

C:\\> ping google.com

Klikk for å kopiere analysehendelser

For å gjøre klikk-for-kopi-analysehendelser utydelig, angi data-copy-event-label attributtet. 

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

Klikk for å kopiere og tilgjengelighet

Som standard har alle klikk for å kopiere kodeeksempler den samme etiketten for hver klikk for å kopiere-knapp: "Kopier kodeeksempel." På sider med flere kodeeksempler kan dette gjøre navigering med en skjermleser vanskelig.

For tilgjengelighet, gi hvert klikk for å kopiere kodeeksempel med et data-label som kort og konsist merker innholdet i hvert kodeeksempel. Hver kodeeksempeletikett skal være unik i forhold til alle andre kodeeksempeletiketter på siden; denne etiketten leses av skjermlesere i tillegg til "Kopier kodeeksempel." {:.devsite-click-to-copy} <pre class="devsite-click-to-copy" data-label="Installation script"></pre>

Deaktiverer lys/mørke-veksling

For å deaktivere lys/mørke-veksleknappen på en kodeblokk, legg til klassen devsite-disable-code-toggle : 

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

For å deaktivere lys/mørke-veksleknappen på en Markdown-kodeblokk , bruk følgende syntaks når du åpner kodegjerdet for å bruke devsite-disable-code-toggle klassen: 

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

Mørk kode som standard

For å lage en kodeblokk bruke mørk kodestil som standard, legg til klassen devsite-dark-code-default : 

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

Tving linjeinnpakning

Som standard legges det til et horisontalt rullefelt for linjer i en <pre> -blokk som overstiger 100 tegn. 

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)

For å overstyre denne virkemåten og bryte linjene i stedet, legg til class="wrap-code" i <pre> -blokken. 

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)

Kode: 

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

Terminalkode

Når du demonstrerer kode for terminalen, anbefaler vi at forfattere bruker $ for å indikere en ny terminalkommando. For å legge til $ i begynnelsen av innholdet i en <pre> -beholder uten å legge den til i brukerens kopierte kode, bruk class="devsite-terminal" på <pre> -elementet.

adb devices

Kode: 

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

For å legge til $ på begynnelsen av en enkelt linje med terminalkode, bruk class="devsite-terminal" på <code> -elementet som inneholder den linjen. Bruk denne taktikken for saker med $ på flere linjer. 

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

Kode: 

<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

For å bruke et tilpasset prefiks, legg til attributtet data-terminal-prefix til <pre> eller <code> -elementet der klassen ble brukt. 

Install-Package Google.Apis.Calendar.v3

Kode: 

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

Alle forekomster av prefikset lagt til ved bruk av "devsite-terminal"-klassen vil bli ekskludert fra brukerens kopierte kode.

Utheving

Bruk <strong> for å gjøre oppmerksom på innhold i en <pre> -blokk. Hvis du gjør det, blir det omkringliggende innholdet lysere for å fremheve delen som er fremhevet av <strong> -blokken. For eksempel: 

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

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

Kode: 

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

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

Utskiftbare variabler

Bruk <var> og store bokstaver med understreking for utskiftbar tekst i <pre> . For eksempel: 

dev_appserver.py YOUR_APP_DIR.

Kode: 

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

I Markdown, omslutt <var> -taggene i anførselstegn og bruk Jinja-uttrykksparenteser for å unnslippe taggene, slik: VAR_NAME .

For eksempel: 

Hello, my name is YOUR_NAME.

Kode: 

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

Markdown

Du kan også spesifisere kodeblokker ved å bruke Markdown med enten 4-mellomrom som rykker inn koden eller gjerder den med 3 bakmerker (```).

For eksempel: 

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

    print("hello world")

begge blir 

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

Hvis du bruker inngjerdede kodeblokker (og ikke innrykkede kodeblokker), kan du også spesifisere språket for prettyprint for å forstå det: 

print("hello world")

blir 

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

Du finner listen over anerkjente språk i Prettify-dokumentasjonen .

Alle kodeblokker laget gjennom Markdown vil ha prettyprint-klassen brukt på seg, med mindre språket eksplisitt er satt til ingen. Du kan legge til flere klasser i kodeblokken ved å bruke egendefinerte attributter : 

The program completed successfully.

blir 

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