代码

使用 <code> 表示内嵌代码,使用 <pre class="prettyprint"> 表示代码块。语法突出显示功能适用于多种语言,包括 XML 和 HTML 示例。如果语法突出显示不适合示例(例如控制台命令或长服务端点网址),您可以省略 class="prettyprint"

<pre> 块中每行代码不得超过 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)

如需替换此行为并改为换行,请将 class="wrap-code" 添加到 <pre> 代码块。

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>

如需向单行终端代码的开头添加 $,请对包含该行的 <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

如需使用自定义前缀,请将属性 data-terminal-prefix 添加到应用了类的 <pre><code> 元素。

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

您还可以使用 Markdown 指定代码块,方法是用 4 个空格缩进代码或用 3 个反引号 (```) 将其括起来。

例如:

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

都变为

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

如果您使用的是带有大括号的代码块(而不是缩进的代码块),还可以指定语言,以便美化工具能够理解代码:

print("hello world")

可改为

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

您可以在 Prettify 文档中找到可识别的语言列表。

除非将语言明确设置为“none”,否则系统会对通过 Markdown 创建的所有代码块应用“prettyprint”类。您可以使用自定义属性向代码块添加其他类:

The program completed successfully.

可改为

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