Diese Seite wurde von der Cloud Translation API übersetzt.

Code

Verwenden Sie <code> für Inline-Code und <pre class="prettyprint"> für Codeblöcke. Die Syntaxhervorhebung funktioniert gut für viele Sprachen, einschließlich XML- und HTML-Beispiele. Sie können class="prettyprint" weglassen, wenn die Syntaxhervorhebung für das Beispiel nicht geeignet ist, z. B. bei Konsolenbefehlen oder langen Dienstendpunkt-URLs.

In einem <pre>-Block darf der Code nicht mehr als 100 Zeichen pro Zeile enthalten. Auf größeren Bildschirmen passen in DevSite genau 100 Codezeichen, bevor das horizontale Scrollen aktiviert wird. Auf kleineren Bildschirmen werden Codeblöcke bei Bedarf horizontal gescrollt. 80 Zeichen passen auf fast jeden 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>

Für Befehle in der Befehlszeile wird normalerweise class="prettyprint" aus <pre> weggelassen. Beispiel:

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

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

Zum Kopieren klicken

In allen Codeblöcken mit der Klasse prettyprint wird automatisch eine Schaltfläche zum Kopieren angezeigt.

Wenn Sie die Funktion „Zum Kopieren klicken“ für einen Codeblock oder ein anderes Element verwenden möchten, das nicht die Klasse prettyprint hat, fügen Sie die Klasse devsite-click-to-copy hinzu: some_terminal_command.py --users_should_copy <pre class="devsite-click-to-copy">some_terminal_command.py --users_should_copy</pre>

„Zum Kopieren anklicken“ für einen Codeblock deaktivieren

Wenn Sie die Funktion „Zum Kopieren anklicken“ für einen prettyprint-Codeblock deaktivieren möchten, fügen Sie die Klasse devsite-disable-click-to-copy hinzu:

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>

Wenn Sie die Funktion „Zum Kopieren anklicken“ für einen Markdown-Codeblock deaktivieren möchten, verwenden Sie beim Öffnen des Code-Elements die folgende Syntax, um den Stil devsite-disable-click-to-copy anzuwenden:

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

„Zum Kopieren anklicken“ für einen Teil eines Codeblocks deaktivieren

Wenn Sie verhindern möchten, dass ein Teil eines Codeblocks kopiert wird, fügen Sie den Teil, den Sie nicht kopieren möchten, in ein <span>-Tag mit der Klasse no-select ein:

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

Im folgenden Beispiel wird der mit Anmerkungen versehene Teil sowohl beim manuellen Kopieren als auch über die Schaltfläche „Zum Kopieren anklicken“ ignoriert:

C:\\> ping google.com

Analyseereignisse vom Typ „Zum Kopieren klicken“

Legen Sie das Attribut data-copy-event-label fest, um Analyseereignisse vom Typ „Zum Kopieren klicken“ eindeutig zu identifizieren.

data-copy-event-label

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

„Zum Kopieren klicken“ und Barrierefreiheit

Standardmäßig haben alle Codebeispiele mit Klick zum Kopieren dieselbe Bezeichnung für jede Schaltfläche zum Kopieren: „Codebeispiel kopieren“. Auf Seiten mit mehreren Codebeispielen kann dies die Navigation mit einem Screenreader erschweren.

Aus Gründen der Barrierefreiheit sollten Sie jedem Codebeispiel, das per Klick kopiert werden kann, ein data-label-Attribut hinzufügen, das den Inhalt des jeweiligen Codebeispiels kurz und prägnant beschreibt. Jedes Codebeispiel-Label muss im Vergleich zu allen anderen Codebeispiel-Labels auf der Seite eindeutig sein. Dieses Label wird von Screenreadern zusätzlich zu „Codebeispiel kopieren“ vorgelesen. {:.devsite-click-to-copy} <pre class="devsite-click-to-copy" data-label="Installation script"></pre>

Umschalten zwischen hellem und dunklem Design deaktivieren

Wenn Sie die Schaltfläche zum Umschalten zwischen hellem und dunklem Design für einen Codeblock deaktivieren möchten, fügen Sie die Klasse devsite-disable-code-toggle hinzu:

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

Wenn Sie die Schaltfläche zum Umschalten zwischen hellem und dunklem Modus in einem Markdown-Codeblock deaktivieren möchten, verwenden Sie beim Öffnen des Code-Fences die folgende Syntax, um die Klasse devsite-disable-code-toggle anzuwenden:

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

Dunkler Code standardmäßig

Wenn für einen Codeblock standardmäßig ein dunkler Codestil verwendet werden soll, fügen Sie die Klasse devsite-dark-code-default hinzu:

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

Zeilenumbruch erzwingen

Standardmäßig wird für Zeilen in einem <pre>-Block, die mehr als 100 Zeichen lang sind, eine horizontale Bildlaufleiste hinzugefügt.

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)

Wenn Sie dieses Verhalten überschreiben und die Zeilen stattdessen umbrechen möchten, fügen Sie dem Block <pre> die Zeichenfolge class="wrap-code" hinzu.

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>

Terminal code

Wenn Code für das Terminal demonstriert wird, empfehlen wir Autoren, $ zu verwenden, um einen neuen Terminalbefehl anzugeben. Wenn du $ am Anfang des Inhalts eines <pre>-Containers einfügen möchtest, ohne es dem kopierten Code des Nutzers hinzuzufügen, musst du class="devsite-terminal" auf das <pre>-Element anwenden.

adb devices

Code:

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

Wenn Sie $ am Anfang einer einzelnen Zeile mit Terminalcode einfügen möchten, wenden Sie class="devsite-terminal" auf das <code>-Element an, das diese Zeile enthält. Verwende diese Taktik für Fälle mit $ in mehreren Zeilen.

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

Wenn Sie ein benutzerdefiniertes Präfix verwenden möchten, fügen Sie dem <pre>- oder <code>-Element, auf das die Klasse angewendet wurde, das Attribut data-terminal-prefix hinzu.

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 Instanzen des Präfixes, die mit der Klasse „devsite-terminal“ hinzugefügt wurden, werden aus dem kopierten Code des Nutzers ausgeschlossen.

Strähnchen

Mit <strong> kannst du die Aufmerksamkeit auf Inhalte innerhalb eines <pre>-Blocks lenken. Dadurch wird der umgebende Inhalt aufgehellt, um den Bereich hervorzuheben, der durch den Block <strong> markiert ist. Beispiel:

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

Austauschbare Variablen

Verwenden Sie <var> und Großbuchstaben mit Unterstrichen für austauschbaren Text innerhalb von <pre>. Beispiel:

dev_appserver.py YOUR_APP_DIR.

Code:

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

Setzen Sie die <var>-Tags in Markdown in Anführungszeichen und verwenden Sie Jinja-Ausdrucksklammern, um die Tags zu maskieren, z. B. so: VAR_NAME.

Beispiel:

Hello, my name is YOUR_NAME.

Code:

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

Markdown

Sie können Codeblöcke auch mit Markdown angeben, indem Sie den Code entweder um vier Leerzeichen einrücken oder ihn mit drei Graviszeichen (```) umschließen.

Beispiel:

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

    print("hello world")

werden beide

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

Wenn Sie Codeblöcke mit Einrückungen verwenden, können Sie auch die Sprache angeben, die für die Funktion „Schönformatieren“ verwendet werden soll:

print("hello world")

wird

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

Eine Liste der unterstützten Sprachen finden Sie in der Dokumentation zu Prettify.

Auf alle Codeblöcke, die über Markdown erstellt wurden, wird die Klasse „prettyprint“ angewendet, es sei denn, die Sprache wird explizit auf „none“ gesetzt. Mithilfe von benutzerdefinierten Attributen können Sie dem Codeblock weitere Klassen hinzufügen:

The program completed successfully.

wird

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