このページは Cloud Translation API によって翻訳されました。

コード

インラインコードには <code> を使用し、コードブロックには <pre class="prettyprint"> を使用します。構文のハイライト表示は、XML や HTML のサンプルなど、多くの言語で適切に機能します。コンソールコマンドや長いサービスエンドポイント URL など、構文のハイライト表示が例に適していない場合は、class="prettyprint" を省略できます。

<pre> ブロック内の 1 行あたりのコードは 100 文字以内にしてください。DevSite では、横方向のスクロールが開始される前に、大きな画面にちょうど 100 文字のコードを表示できます。小さい画面では、必要に応じてコードブロックが横方向にスクロールされます。80 文字であれば、ほとんどのノートパソコンに収まります。

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

通常、コンソールコマンドでは <pre> から class="prettyprint" を省略します。次に例を示します。

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

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

クリックしてコピー

クラス prettyprint のすべてのコードブロックに、クリックしてコピーするボタンが自動的に表示されます。

クラス prettyprint を持たないコードブロックなどの要素でクリックしてコピーを使用するには、クラス 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>

コードブロックのクリックしてコピーを無効にする

prettyprint コードブロックでクリックしてコピーを無効にするには、クラス 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>

Markdown コードブロックでクリックしてコピーを無効にするには、コードフェンスを開いて devsite-disable-click-to-copy スタイルを適用するときに、次の構文を使用します。

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

コードブロックの一部でクリックしてコピーを無効にする

コードブロックの一部のコピーを防ぐには、コピーしたくない部分の周囲に、no-select クラスの <span> タグを追加します。

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

以下の例では、手動コピーとクリックしてコピーボタンの両方で、アノテーション付きの部分は無視されます。

C:\\> ping google.com

クリックしてコピーのアナリティクスイベント

クリックしてコピーするアナリティクスイベントの曖昧さを解消するには、data-copy-event-label 属性を設定します。

data-copy-event-label

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

クリックしてコピーとユーザー補助

デフォルトでは、すべてのクリックしてコピーコードサンプルのクリックしてコピーボタンに同じラベル（「コードサンプルをコピー」）が付けられます。複数のコードサンプルがあるページでは、スクリーンリーダーでのナビゲーションが難しくなる可能性があります。

ユーザー補助のため、クリックしてコピーできる各コードサンプルに data-label 属性を指定し、各コードサンプルの内容を簡潔にラベル付けします。各コードサンプルのラベルは、ページ上の他のコードサンプルのラベルと比較して一意である必要があります。このラベルは、「コードサンプルをコピー」に加えて、スクリーンリーダーによって読み上げられます。 {:.devsite-click-to-copy} <pre class="devsite-click-to-copy" data-label="Installation script"></pre>

ライトモード/ダークモードの切り替えを無効にする

コードブロックのライトモード/ダークモード切り替えボタンを無効にするには、クラス devsite-disable-code-toggle を追加します。

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

Markdown コードブロックの明るい/暗い切り替えボタンを無効にするには、コードフェンスを開いて devsite-disable-code-toggle クラスを適用するときに、次の構文を使用します。

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

デフォルトでダークコード

コードブロックでデフォルトでダークコードスタイルを使用するようにするには、クラス devsite-dark-code-default を追加します。

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

行の折り返しを強制する

デフォルトでは、<pre> ブロック内の 100 文字を超える行に水平スクロールバーが追加されます。

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> ブロックに 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 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>

ターミナルコード

ターミナルのコードを紹介する場合は、$ を使用して新しいターミナルコマンドを示すことをお勧めします。ユーザーがコピーしたコードに追加せずに、<pre> コンテナの内容の先頭に $ を追加するには、<pre> 要素に class="devsite-terminal" を適用します。

adb devices

コード:

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

ターミナルコードの 1 行の先頭に $ を追加するには、その行を含む <code> 要素に class="devsite-terminal" を適用します。この方法は、複数行に $ があるケースに使用します。

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

コード:

<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

カスタム接頭辞を使用するには、クラスが適用された <pre> 要素または <code> 要素に data-terminal-prefix 属性を追加します。

Install-Package Google.Apis.Calendar.v3

コード:

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

「devsite-terminal」クラスを使用して追加された接頭辞のインスタンスはすべて、ユーザーがコピーしたコードから除外されます。

ハイライト

<strong> を使用すると、<pre> ブロック内のコンテンツに注意を喚起できます。これにより、周囲のコンテンツが明るくなり、<strong> ブロックでハイライト表示されたセクションが強調されます。次に例を示します。

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

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

コード:

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

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

置換可能な変数

<pre> 内の置換テキストには、<var> と大文字のアンダースコアを使用します。次に例を示します。

dev_appserver.py YOUR_APP_DIR.

コード:

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

Markdown では、<var> タグを引用符で囲み、Jinja 式の角かっこを使用してタグをエスケープします（例: VAR_NAME）。

次に例を示します。

Hello, my name is YOUR_NAME.

コード:

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

マークダウン

Markdown を使用してコードブロックを指定することもできます。コードを 4 スペースインデントするか、3 つのバッククォート（```）で囲みます。

次に例を示します。

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

    print("hello world")

両方とも

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

インデントされたコードブロックではなく、フェンス付きコードブロックを使用している場合は、prettyprint が認識する言語を指定することもできます。

print("hello world")

以下のようになります。

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

認識される言語のリストについては、Prettify のドキュメントをご覧ください。

Markdown で作成されたコードブロックにはすべて、言語を none に明示的に設定しない限り、prettyprint クラスが適用されます。カスタム属性を使用して、コードブロックにクラスを追加できます。

The program completed successfully.

以下のようになります。

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

コード

クリックしてコピー

コードブロックのクリックしてコピーを無効にする

コードブロックの一部でクリックしてコピーを無効にする

クリックしてコピーのアナリティクス イベント

クリックしてコピーとユーザー補助

ライトモード/ダークモードの切り替えを無効にする

デフォルトでダークコード

行の折り返しを強制する

ターミナル コード

ハイライト

置換可能な変数

マークダウン

クリックしてコピーのアナリティクスイベント

ターミナルコード