Kód

Inline kódhoz használja <code> , kódblokkokhoz pedig <pre class="prettyprint"> . A szintaktikai kiemelés számos nyelven jól működik, beleértve az XML- és HTML-példákat is. Kihagyhatja class="prettyprint" ha a szintaxis kiemelése nem megfelelő a példához, például konzolparancsok vagy hosszú szolgáltatásvégpont URL-ek esetén.

Egy <pre> blokkban ne haladja meg a 100 karakteres kódot soronként. A DevSite-ban pontosan 100 karakternyi kód fér el a nagyobb képernyőkön, mielőtt beindul a vízszintes görgetés. Kisebb képernyőkön a kódblokkok vízszintesen gördülnek, ha szükséges. 80 karakter szinte bármilyen laptopon elfér.

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

A konzolparancsoknál általában ki kell hagyni class="prettyprint" <pre> -ből. Például:

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

Kattintson a másoláshoz

Egy kattintásra másolás gomb automatikusan megjelenik minden kódblokkon a prettyprint osztályú kóddal.

Ha a click-to-copy funkciót olyan kódblokkon vagy más elemen szeretné használni, amely nem rendelkezik a prettyprint osztálysal, adja hozzá a devsite-click-to-copy osztályt: some_terminal_command.py --users_should_copy <pre class="devsite-click-to-copy">some_terminal_command.py --users_should_copy</pre>

A kattintással történő másolás letiltása egy kódblokkon

A Click-to-Copy letiltásához egy prettyprint kódblokkon, adja hozzá a devsite-disable-click-to-copy osztályt:

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>

Ha le szeretné tiltani a kattintásra másolást egy Markdown kódblokkon , használja a következő szintaxist a kódkerítés megnyitásakor a devsite-disable-click-to-copy stílus alkalmazásához:

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

A kattintással történő másolás letiltása egy kódblokk egy részén

A kódblokk egy részének másolásának megakadályozása érdekében adjon hozzá egy <span> címkét a no-select osztályhoz azon rész köré, amelyet nem szeretne másolni:

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

Az alábbi példában mind a kézi másolás, mind a kattintással másolás gomb figyelmen kívül hagyja a megjegyzésekkel ellátott részt:

C:\\> ping google.com

Kattintással másolható elemzési események

A kattintással másolható elemzési események egyértelművé tételéhez állítsa be a data-copy-event-label attribútumot.

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

Kattintással másolható és hozzáférhetőség

Alapértelmezés szerint az összes kattintással másolható kódminta ugyanazzal a címkével rendelkezik minden kattintásra másolás gombhoz: „Kódminta másolása”. A több kódmintát tartalmazó oldalakon ez megnehezítheti a képernyőolvasóval történő navigálást.

A hozzáférhetőség érdekében minden kattintással másolható kódmintát biztosítson egy data-label attribútummal, amely röviden és tömören felcímkézi az egyes kódminták tartalmát. Minden kódminta címkének egyedinek kell lennie az oldalon található összes többi kódminta címkéhez képest; ezt a címkét a képernyőolvasók olvassák a „Kódminta másolása” mellett. {:.devsite-click-to-copy} <pre class="devsite-click-to-copy" data-label="Installation script"></pre>

Világos/sötét váltás letiltása

A világos/sötét váltógomb kódblokkon letiltásához adja hozzá a devsite-disable-code-toggle osztályt:

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

Ha le szeretné tiltani a világos/sötét váltógombot egy Markdown kódblokkon , használja a következő szintaxist a kódkerítés megnyitásakor a devsite-disable-code-toggle osztály alkalmazásához:

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

Alapértelmezés szerint sötét kód

Ahhoz, hogy egy kódblokk alapértelmezés szerint sötét kódstílust használjon, adja hozzá a devsite-dark-code-default osztályt:

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

Force vonal tekercselés

Alapértelmezés szerint egy vízszintes görgetősáv kerül hozzáadásra az <pre> blokk 100 karakternél hosszabb soraihoz.

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)

Ennek a viselkedésnek a felülírásához és a sorok tördeléséhez adja hozzá class="wrap-code" a <pre> blokkhoz.

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)

Kód:

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

Terminál kód

A terminál kódjának bemutatásakor azt javasoljuk, hogy a szerzők $ használják az új terminálparancs jelzésére. Ha $ hozzá szeretné adni egy <pre> tároló tartalmának elejéhez anélkül, hogy hozzáadná a felhasználó másolt kódjához, alkalmazza class="devsite-terminal" a <pre> elemre.

adb devices

Kód:

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

Ha $ szeretne hozzáadni a terminálkód egyetlen sorának elejéhez, alkalmazza class="devsite-terminal" az adott sort tartalmazó <code> elemre. Használja ezt a taktikát olyan esetekben, amikor $ több sorban van.

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

Kód:

<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

Egyéni előtag használatához adja hozzá a data-terminal-prefix attribútumot ahhoz a <pre> vagy <code> elemhez, ahol az osztályt alkalmazták.

Install-Package Google.Apis.Calendar.v3

Kód:

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

A "devsite-terminal" osztály használatával hozzáadott előtag minden példánya ki lesz zárva a felhasználó másolt kódjából.

Kiemelés

<strong> használatával hívja fel a figyelmet egy <pre> blokkon belüli tartalomra. Ezzel világosabbá válik a környező tartalom, és kiemeli a <strong> blokk által kiemelt részt. Például:

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

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

Kód:

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

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

Cserélhető változók

Használja <var> és a nagybetűket aláhúzással <pre> -en belüli cserélhető szöveghez. Például:

dev_appserver.py YOUR_APP_DIR.

Kód:

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

A Markdown alkalmazásban tegye idézőjelek közé a <var> címkéket, és használja a Jinja kifejezési zárójeleket a címkék kihagyásához, például: VAR_NAME .

Például:

Hello, my name is YOUR_NAME.

Kód:

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

Árleszállítás

Kódblokkokat is megadhat a Markdown használatával, 4 szóközzel behúzva a kódot, vagy elkerítve 3 backtick-el (```).

Például:

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

mindketten válnak

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

Ha elkerített kódblokkokat (és nem behúzott kódblokkokat) használ, megadhatja a prettyprint nyelvét is, hogy megértse:

print("hello world")

válik

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

Az elismert nyelvek listája a Prettify dokumentációjában található.

A Markdownon keresztül készített összes kódblokkra a prettyprint osztály kerül alkalmazásra, kivéve, ha kifejezetten a None-ra állítja a nyelvet. További osztályokat adhat hozzá a kódblokkhoz egyéni attribútumok használatával:

The program completed successfully.

válik

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