Use <code> for inline code, and <pre class="prettyprint"> for code blocks. The syntax highlighting works well for many languages, including XML and HTML examples. You can omit class="prettyprint" if the syntax highlighting is not appropriate for the example, such as for console commands or long service endpoint URLs.
Do not exceed 100 characters of code per line in a <pre> block. In DevSite, exactly 100 characters of code will fit on larger screens before horizontal scrolling kicks in. On smaller screens, code blocks will scroll horizontally when necessary. 80 characters fit on pretty much any 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>
You would typically omit class="prettyprint" from <pre> for console commands. For example:
dev_appserver.py -a $HOST --debug demos/getstarted
<pre>dev_appserver.py -a $HOST --debug demos/getstarted</pre>
Click-to-copy
A click-to-copy button appears automatically on all code blocks with the class prettyprint.
To use click-to-copy on a code block or other element that does not have the class prettyprint, add the class 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>
Disabling click-to-copy on a code block
To disable click-to-copy on a prettyprint code block, add the class 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>
To disable click-to-copy on a Markdown code block, use the following syntax when you open the code fence to apply the devsite-disable-click-to-copy style:
{:.devsite-disable-click-to-copy}
Disabling click-to-copy on part of a code block
To prevent copying part of a code block, add a <span> tag with a class of no-select around the part that you don't want copied:
<span class="no-select">C:\> </span>ping google.com
In the example below, both manual copying as well as the click-to-copy button ignore the annotated portion:
C:\\> ping google.comClick-to-copy analytics events
To disambiguate click-to-copy analytics events, set the data-copy-event-label attribute.
data-copy-event-label
<pre class="devsite-terminal devsite-click-to-copy" data-copy-event-label="unique_identifier"></pre>
Click-to-copy and accessibility
By default, all click-to-copy code samples have the same label for each click-to-copy button: "Copy code sample." On pages with multiple code samples, this can make navigating with a screen reader difficult.
For accessibility, provide each click-to-copy code sample with a data-label attribute that briefly and concisely labels the content of each code sample. Each code sample label should be unique relative to all other code sample labels on the page; this label is read by screen readers in addition to "Copy code sample."
{:.devsite-click-to-copy}
<pre class="devsite-click-to-copy" data-label="Installation script"></pre>
Disabling light/dark toggle
To disable the light/dark toggle button on a code block, add the class devsite-disable-code-toggle:
<pre class="prettyprint devsite-disable-code-toggle"></pre>
To disable the light/dark toggle button on a Markdown code block, use the following syntax when you open the code fence to apply the devsite-disable-code-toggle class:
``` {.devsite-disable-code-toggle}
Dark code by default
To make a code block use dark code styling by default, add the class devsite-dark-code-default:
<pre class="prettyprint devsite-dark-code-default"></pre>
Force line wrapping
By default, a horizontal scroll bar is added for lines in a <pre> block that exceed 100 characters.
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)
To override this behavior and wrap the lines instead, add class="wrap-code" to the <pre> block.
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
When demonstrating code for the terminal, we recommend that authors use $ to indicate a new terminal command. To add $ to the beginning of the contents of a <pre> container without adding it to the user's copied code, apply class="devsite-terminal" to the <pre> element.
adb devices
Code:
<pre class="devsite-terminal devsite-click-to-copy">
adb devices
</pre>
To add $ to the beginning of a single line of terminal code, apply class="devsite-terminal" to the <code> element containing that line. Use this tactic for cases with $ in multiple lines.
gradle init --type basicmkdir -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
To use a custom prefix, add the attribute data-terminal-prefix to the <pre> or <code> element where the class was applied.
Install-Package Google.Apis.Calendar.v3
Code:
<pre class="devsite-terminal devsite-click-to-copy" data-terminal-prefix="PM> ">
Install-Package Google.Apis.Calendar.v3
</pre>
All instances of the prefix added using the "devsite-terminal" class will be excluded from the user's copied code.
Highlighting
Use <strong> to call attention to content within a <pre> block. Doing so
will lighten the surrounding content to emphasize the section highlighted by
the <strong> block. For example:
// ...
// ...
// ...
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>
Replaceable variables
Use <var> and uppercase with underscores for replaceable text within <pre>. For example:
dev_appserver.py YOUR_APP_DIR.
Code:
<pre>dev_appserver.py <var>YOUR_APP_DIR</var></pre>
In Markdown, enclose the <var> tags in quotation marks and use Jinja expression brackets to escape the tags, like this: VAR_NAME.
For example:
Hello, my name is YOUR_NAME.
Code:
```
Hello, my name is YOUR_NAME.
```
Markdown
You can also specify code blocks using Markdown with either 4-space indenting the code or fencing it with 3 backticks (```).
For example:
```
print("hello world")
```
print("hello world")
both become
<pre class="prettyprint notranslate" translate="no"><code>
print("hello world")
</code></pre>
If you're using fenced code blocks (and not indented code blocks), you can also specify the language for prettyprint to understand it:
print("hello world")
becomes
<pre class="prettyprint notranslate lang-py" translate="no"><code>
print("hello world")
</code></pre>
You can find the list of recognized languages in the Prettify documentation.
All code blocks made through Markdown will have the prettyprint class applied to it, unless explicitly setting the language to none. You can add additional classes to the code block by using custom attributes:
The program completed successfully.
becomes
<pre class="devsite-disable-click-to-copy"><code>The program completed successfully.
</code></pre>