使用 <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> ">
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>