Koodi

Käytä <code> inline-koodille ja <pre class="prettyprint"> koodilohkoille. Syntaksin korostus toimii hyvin monilla kielillä, mukaan lukien XML- ja HTML-esimerkit. Voit jättää class="prettyprint" pois, jos syntaksin korostus ei sovellu esimerkille, kuten konsolikomentoille tai pitkille palvelun päätepisteiden URL-osoitteille.

Älä ylitä 100 merkkiä koodia riviä kohden <pre> -lohkossa. DevSitessa täsmälleen 100 merkkiä koodia mahtuu isommille näytöille ennen kuin vaakasuuntainen vieritys käynnistyy. Pienemmillä näytöillä koodilohkot rullaavat vaakasuunnassa tarvittaessa. 80 merkkiä mahtuu melkein mihin tahansa kannettavaan tietokoneeseen.

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

Yleensä class="prettyprint" jätetään pois kohdasta <pre> konsolikomentoja varten. Esimerkiksi:

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

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

Kopioi napsauttamalla

Kopioi napsauttamalla -painike näkyy automaattisesti kaikissa koodilohkoissa, joissa on luokka prettyprint .

Jos haluat käyttää click-to-copy-toimintoa koodilohkossa tai muussa elementissä, jolla ei ole luokkaa prettyprint , lisää luokka 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>

Kopioi napsauttamalla -toiminto poistetaan käytöstä koodilohkossa

Voit poistaa click-to-copy-toiminnon käytöstä prettyprint -koodilohkossa lisäämällä luokka 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>

Jos haluat poistaa kopioinnin napsauttamalla Markdown-koodilohkon käytöstä, käytä seuraavaa syntaksia, kun avaat koodiaidan soveltaaksesi devsite-disable-click-to-copy -tyyliä:

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

Kopioi napsauttamalla poistetaan käytöstä osa koodilohkoa

Voit estää koodilohkon osan kopioimisen lisäämällä <span> -tunnisteen, jossa on no-select luokka sen osan ympärille, jota et halua kopioida: 

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

Alla olevassa esimerkissä sekä manuaalinen kopiointi että Kopioi napsauttamalla -painike jättävät huomioimatta merkinnän:

C:\\> ping google.com

Napsauta ja kopioi analytiikkatapahtumat

Määritä data-copy-event-label attribuutti, jotta voit tehdä selväksi click-to-copy-analytiikkatapahtumat. 

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

Kopioi napsauttamalla ja saavutettavuus

Oletuksena kaikissa kopioita napsauttamalla -koodinäytteissä on sama tunniste jokaiselle Kopioi napsauttamalla -painikkeelle: "Kopioi koodinäyte". Sivuilla, joilla on useita koodinäytteitä, tämä voi vaikeuttaa navigoimista näytönlukuohjelman avulla.

Käytä helppokäyttöisyyttä lisäämällä jokaiseen napsauttamalla kopioitavaan koodinäytteeseen data-label -attribuutti, joka merkitsee lyhyesti ja ytimekkäästi kunkin koodinäytteen sisällön. Jokaisen koodinäytetunnisteen tulee olla ainutlaatuinen suhteessa kaikkiin sivun muihin koodinäytetarroihin. näytönlukuohjelmat lukevat tämän tarran "Kopioi koodinäyte" -toiminnon lisäksi. {:.devsite-click-to-copy} <pre class="devsite-click-to-copy" data-label="Installation script"></pre>

Valo/tumma vaihteen poistaminen käytöstä

Poistaaksesi valo/tumma vaihtopainikkeen käytöstä koodilohkossa lisäämällä luokka devsite-disable-code-toggle : 

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

Jos haluat poistaa vaalean/tumman vaihtopainikkeen käytöstä Markdown-koodilohkossa , käytä seuraavaa syntaksia, kun avaat koodiaidan soveltaaksesi luokkaa devsite-disable-code-toggle : 

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

Tumma koodi oletuksena

Jos haluat saada koodilohkon käyttämään oletusarvoisesti tummaa koodityyliä, lisää luokka devsite-dark-code-default : 

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

Pakota rivien käärintä

Oletuksena vaakasuuntainen vierityspalkki lisätään <pre> -lohkon riveille, jotka ovat yli 100 merkkiä. 

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)

Voit ohittaa tämän toiminnan ja rivittää rivit lisäämällä class="wrap-code" <pre> -lohkoon. 

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)

Koodi: 

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

Päätekoodi

Esitettäessä päätteen koodia suosittelemme, että kirjoittajat käyttävät $ ilmaisemaan uuden päätekomennon. Jos haluat lisätä $ <pre> -säilön sisällön alkuun lisäämättä sitä käyttäjän kopioimaan koodiin, lisää <pre> -elementtiin class="devsite-terminal" .

adb devices

Koodi: 

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

Jos haluat lisätä $ yhden päätekoodirivin alkuun, lisää class="devsite-terminal" kyseisen rivin sisältävään <code> -elementtiin. Käytä tätä taktiikkaa tapauksissa, joissa $ on useilla riveillä. 

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

Koodi: 

<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

Jos haluat käyttää mukautettua etuliitettä, lisää attribuutti data-terminal-prefix <pre> tai <code> -elementtiin, jossa luokkaa käytettiin. 

Install-Package Google.Apis.Calendar.v3

Koodi: 

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

Kaikki "devsite-terminal"-luokan avulla lisätyt etuliitteet suljetaan pois käyttäjän kopioimasta koodista.

Korostaminen

Käytä <strong> kiinnittääksesi huomion <pre> -lohkon sisältöön. Tämä vaalentaa ympäröivää sisältöä ja korostaa <strong> -lohkon korostettua osaa. Esimerkiksi: 

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

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

Koodi: 

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

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

Vaihdettavat muuttujat

Käytä <var> ja isoja kirjaimia alaviivojen kanssa korvattavissa olevaan tekstiin <pre> -kentässä. Esimerkiksi: 

dev_appserver.py YOUR_APP_DIR.

Koodi: 

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

Merkitse Markdownissa <var> -tunnisteet lainausmerkkeihin ja käytä Jinja-lausekesulkeja tagien välttämiseksi, kuten tämä: VAR_NAME .

Esimerkiksi: 

Hello, my name is YOUR_NAME.

Koodi: 

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

Markdown

Voit myös määrittää koodilohkoja käyttämällä Markdownia joko neljän välilyönnin sisennyskoodilla tai kolmella backtickillä (```).

Esimerkiksi: 

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

    print("hello world")

molemmista tulee 

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

Jos käytät aidattuja koodilohkoja (eikä sisennettyjä koodilohkoja), voit myös määrittää prettyprintin kielen ymmärtääksesi sen: 

print("hello world")

tulee 

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

Löydät luettelon tunnistetuista kielistä Prettifyn dokumentaatiosta .

Kaikkiin Markdownin kautta tehtyihin koodilohkoihin sovelletaan prettyprint-luokkaa, ellei kieleksi ole nimenomaisesti asetettu none. Voit lisätä muita luokkia koodilohkoon käyttämällä mukautettuja määritteitä : 

The program completed successfully.

tulee 

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