Code

Gebruik <code> voor inline code en <pre class="prettyprint"> voor codeblokken. De syntaxisaccentuering werkt goed voor veel talen, inclusief XML- en HTML-voorbeelden. U kunt class="prettyprint" weglaten als de syntaxisaccentuering niet geschikt is voor het voorbeeld, zoals voor consoleopdrachten of URL's van lange service-eindpunten.

Gebruik niet meer dan 100 tekens code per regel in een <pre> -blok. In DevSite passen precies 100 tekens code op grotere schermen voordat horizontaal scrollen in werking treedt. Op kleinere schermen scrollen codeblokken indien nodig horizontaal. 80 tekens passen op vrijwel elke 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>

Normaal gesproken laat u class="prettyprint" weg uit <pre> voor consoleopdrachten. Bijvoorbeeld:

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

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

Klik om te kopiëren

Er verschijnt automatisch een click-to-copy-knop op alle codeblokken met de klasse prettyprint .

Om click-to-copy te gebruiken op een codeblok of ander element dat niet de klasse prettyprint heeft, voegt u de klasse devsite-click-to-copy toe: some_terminal_command.py --users_should_copy <pre class="devsite-click-to-copy">some_terminal_command.py --users_should_copy</pre>

Click-to-copy uitschakelen voor een codeblok

Om click-to-copy op een prettyprint codeblok uit te schakelen, voegt u de klasse devsite-disable-click-to-copy toe:

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>

Om click-to-copy op een Markdown-codeblok uit te schakelen, gebruikt u de volgende syntaxis wanneer u de codeomheining opent om de devsite-disable-click-to-copy -stijl toe te passen:

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

Click-to-copy uitschakelen voor een deel van een codeblok

Om te voorkomen dat een deel van een codeblok wordt gekopieerd, voegt u een <span> -tag toe met de klasse no-select rond het deel dat u niet wilt kopiëren: 

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

In het onderstaande voorbeeld negeren zowel handmatig kopiëren als de klik-om-kopie-knop het geannoteerde gedeelte:

C:\\> ping google.com

Click-to-copy-analysegebeurtenissen

Om click-to-copy-analysegebeurtenissen ondubbelzinnig te maken, stelt u het kenmerk data-copy-event-label in. 

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

Click-to-copy en toegankelijkheid

Standaard hebben alle click-to-copy-codevoorbeelden hetzelfde label voor elke click-to-copy-knop: 'Codevoorbeeld kopiëren'. Op pagina's met meerdere codevoorbeelden kan dit het navigeren met een schermlezer lastig maken.

Voor toegankelijkheid kunt u elk click-to-copy-codevoorbeeld voorzien van een data-label attribuut dat de inhoud van elk codevoorbeeld kort en bondig labelt. Elk codevoorbeeldlabel moet uniek zijn ten opzichte van alle andere codevoorbeeldlabels op de pagina; dit label wordt gelezen door schermlezers naast 'Codevoorbeeld kopiëren'. {:.devsite-click-to-copy} <pre class="devsite-click-to-copy" data-label="Installation script"></pre>

Licht/donker-schakelaar uitschakelen

Om de licht/donker-schakelknop op een codeblok uit te schakelen, voegt u de klasse devsite-disable-code-toggle toe: 

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

Om de licht/donker-schakelknop op een Markdown-codeblok uit te schakelen, gebruikt u de volgende syntaxis wanneer u de codeomheining opent om de klasse devsite-disable-code-toggle toe te passen: 

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

Standaard donkere code

Om ervoor te zorgen dat een codeblok standaard de stijl van donkere code gebruikt, voegt u de klasse devsite-dark-code-default toe: 

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

Forceer lijnwikkeling

Standaard wordt een horizontale schuifbalk toegevoegd voor regels in een <pre> -blok die langer zijn dan 100 tekens. 

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)

Om dit gedrag te overschrijven en in plaats daarvan de regels terug te laten lopen, voegt u class="wrap-code" toe aan het <pre> blok. 

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)

Code: 

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

Terminalcode

Bij het demonstreren van code voor de terminal raden we auteurs aan $ te gebruiken om een ​​nieuw terminalcommando aan te geven. Om $ toe te voegen aan het begin van de inhoud van een <pre> container zonder deze toe te voegen aan de gekopieerde code van de gebruiker, past u class="devsite-terminal" toe op het <pre> element.

adb devices

Code: 

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

Om $ toe te voegen aan het begin van een enkele regel terminalcode, past class="devsite-terminal" toe op het <code> element dat die regel bevat. Gebruik deze tactiek voor gevallen met $ in meerdere regels. 

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

Code: 

<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

Om een ​​aangepast voorvoegsel te gebruiken, voegt u het attribuut data-terminal-prefix toe aan het <pre> of <code> -element waarop de klasse is toegepast. 

Install-Package Google.Apis.Calendar.v3

Code: 

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

Alle exemplaren van het voorvoegsel dat is toegevoegd met behulp van de klasse "devsite-terminal" worden uitgesloten van de gekopieerde code van de gebruiker.

Markering

Gebruik <strong> om de aandacht te vestigen op inhoud binnen een <pre> blok. Als u dit doet, wordt de omringende inhoud lichter en wordt de sectie benadrukt die wordt gemarkeerd door het <strong> -blok. Bijvoorbeeld: 

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

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

Code: 

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

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

Vervangbare variabelen

Gebruik <var> en hoofdletters met onderstrepingstekens voor vervangbare tekst binnen <pre> . Bijvoorbeeld: 

dev_appserver.py YOUR_APP_DIR.

Code: 

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

Plaats in Markdown de tags <var> tussen aanhalingstekens en gebruik haakjes voor de Jinja-expressie om aan de tags te ontsnappen, zoals dit: VAR_NAME .

Bijvoorbeeld: 

Hello, my name is YOUR_NAME.

Code: 

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

Afwaardering

Je kunt ook codeblokken specificeren met behulp van Markdown, waarbij de code met 4 spaties wordt ingesprongen of wordt afgeschermd met 3 backticks (```).

Bijvoorbeeld: 

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

    print("hello world")

beide worden 

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

Als u afgeschermde codeblokken gebruikt (en geen ingesprongen codeblokken), kunt u ook de taal opgeven waarin Prettyprint deze begrijpt: 

print("hello world")

wordt 

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

U vindt de lijst met erkende talen in de Prettify-documentatie .

Op alle codeblokken die via Markdown zijn gemaakt, wordt de klasse prettyprint toegepast, tenzij de taal expliciet op geen wordt ingesteld. U kunt extra klassen aan het codeblok toevoegen door aangepaste attributen te gebruiken: 

The program completed successfully.

wordt 

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