Sử dụng <code>
cho mã cùng dòng và <pre class="prettyprint">
cho khối mã. Tính năng làm nổi bật cú pháp hoạt động tốt với nhiều ngôn ngữ, bao gồm cả ví dụ về XML và HTML. Bạn có thể bỏ qua class="prettyprint"
nếu tính năng làm nổi bật cú pháp không phù hợp với ví dụ, chẳng hạn như đối với các lệnh trong bảng điều khiển hoặc URL điểm cuối dịch vụ dài.
Mỗi dòng trong khối <pre>
không được vượt quá 100 ký tự mã. Trong DevSite, chính xác 100 ký tự mã sẽ vừa với màn hình lớn hơn trước khi tính năng cuộn theo chiều ngang bắt đầu hoạt động. Trên màn hình nhỏ hơn, các khối mã sẽ cuộn theo chiều ngang khi cần. 80 ký tự vừa với hầu hết các máy tính xách tay.
#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>
Thông thường, bạn sẽ bỏ qua class="prettyprint"
khỏi <pre>
cho các lệnh trong bảng điều khiển. Ví dụ:
dev_appserver.py -a $HOST --debug demos/getstarted
<pre>dev_appserver.py -a $HOST --debug demos/getstarted</pre>
Nhấp để sao chép
Nút nhấp để sao chép sẽ tự động xuất hiện trên tất cả các khối mã có lớp prettyprint
.
Để sử dụng tính năng nhấp để sao chép trên một khối mã hoặc phần tử khác không có lớp prettyprint
, hãy thêm lớp 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>
Tắt tính năng nhấp để sao chép trên một khối mã
Để tắt tính năng nhấp để sao chép trên khối mã prettyprint
, hãy thêm lớp 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>
Để tắt tính năng nhấp để sao chép trên khối mã Markdown, hãy sử dụng cú pháp sau khi bạn mở hàng rào mã để áp dụng kiểu devsite-disable-click-to-copy
:
{:.devsite-disable-click-to-copy}
Tắt tính năng nhấp để sao chép trên một phần của khối mã
Để ngăn việc sao chép một phần của khối mã, hãy thêm thẻ <span>
có lớp no-select
xung quanh phần mà bạn không muốn sao chép:
<span class="no-select">C:\> </span>ping google.com
Trong ví dụ dưới đây, cả tính năng sao chép thủ công và nút nhấp để sao chép đều bỏ qua phần được chú thích:
C:\\> ping google.com
Sự kiện phân tích lượt nhấp để sao chép
Để phân biệt các sự kiện phân tích nhấp để sao chép, hãy đặt thuộc tính data-copy-event-label
.
data-copy-event-label
<pre class="devsite-terminal devsite-click-to-copy" data-copy-event-label="unique_identifier"></pre>
Tính năng nhấp để sao chép và hỗ trợ tiếp cận
Theo mặc định, tất cả mẫu mã nhấp để sao chép đều có cùng một nhãn cho mỗi nút nhấp để sao chép: "Sao chép mẫu mã". Trên các trang có nhiều mẫu mã, điều này có thể gây khó khăn cho việc điều hướng bằng trình đọc màn hình.
Để hỗ trợ tiếp cận, hãy cung cấp cho mỗi mẫu mã nhấp để sao chép một thuộc tính data-label
giúp gắn nhãn nội dung của mỗi mẫu mã một cách ngắn gọn và súc tích. Mỗi nhãn mã mẫu phải là duy nhất so với tất cả nhãn mã mẫu khác trên trang; nhãn này được trình đọc màn hình đọc cùng với "Sao chép mã mẫu".
{:.devsite-click-to-copy}
<pre class="devsite-click-to-copy" data-label="Installation script"></pre>
Tắt nút bật/tắt chế độ sáng/tối
Để tắt nút bật/tắt chế độ sáng/tối trên một khối mã, hãy thêm lớp devsite-disable-code-toggle
:
<pre class="prettyprint devsite-disable-code-toggle"></pre>
Để tắt nút bật/tắt chế độ sáng/tối trên khối mã Markdown, hãy sử dụng cú pháp sau khi bạn mở hàng rào mã để áp dụng lớp devsite-disable-code-toggle
:
``` {.devsite-disable-code-toggle}
Mã tối theo mặc định
Để đặt mặc định cho một khối mã sử dụng kiểu mã tối, hãy thêm lớp devsite-dark-code-default
:
<pre class="prettyprint devsite-dark-code-default"></pre>
Buộc xuống dòng
Theo mặc định, thanh cuộn ngang sẽ được thêm cho các dòng trong khối <pre>
vượt quá 100 ký tự.
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)
Để ghi đè hành vi này và gói các dòng, hãy thêm class="wrap-code"
vào khối <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)
Mã:
<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>
Mã thiết bị đầu cuối
Khi minh hoạ mã cho dòng lệnh, tác giả nên sử dụng $
để chỉ báo một lệnh dòng lệnh mới. Để thêm $
vào đầu nội dung của vùng chứa <pre>
mà không thêm vào mã đã sao chép của người dùng, hãy áp dụng class="devsite-terminal"
cho phần tử <pre>
.
adb devices
Mã:
<pre class="devsite-terminal devsite-click-to-copy">
adb devices
</pre>
Để thêm $
vào đầu một dòng mã dòng lệnh, hãy áp dụng class="devsite-terminal"
cho phần tử <code>
chứa dòng đó. Sử dụng chiến thuật này cho các trường hợp có $
trong nhiều dòng.
gradle init --type basic
mkdir -p src/main/java src/main/resources
Mã:
<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
Để sử dụng tiền tố tuỳ chỉnh, hãy thêm thuộc tính data-terminal-prefix
vào phần tử <pre>
hoặc <code>
nơi lớp được áp dụng.
Install-Package Google.Apis.Calendar.v3
Mã:
<pre class="devsite-terminal devsite-click-to-copy" data-terminal-prefix="PM> ">
Install-Package Google.Apis.Calendar.v3
</pre>
Tất cả các thực thể của tiền tố được thêm bằng lớp "devsite-terminal" sẽ bị loại trừ khỏi mã đã sao chép của người dùng.
Nhuộm highlight
Sử dụng <strong>
để thu hút sự chú ý đến nội dung trong khối <pre>
. Thao tác này sẽ làm sáng nội dung xung quanh để làm nổi bật phần được đánh dấu bằng khối <strong>
. Ví dụ:
// ... // ... // ... for (i = 0; i < 10; i++) { printf("Counting %d\n", i); if (i % 3 == 0) { someFunc(i); } } // ... // ... // ...
Mã:
<pre class="prettyprint">
// ...
// ...
// ...
for (i = 0; i < 10; i++) {
printf("Counting %d\n", i);
<strong>if (i % 3 == 0) {
someFunc(i);
}</strong>
}
// ...
// ...
// ...
</pre>
Biến có thể thay thế
Sử dụng <var>
và chữ in hoa có dấu gạch dưới cho văn bản có thể thay thế trong <pre>
. Ví dụ:
dev_appserver.py YOUR_APP_DIR.
Mã:
<pre>dev_appserver.py <var>YOUR_APP_DIR</var></pre>
Trong Markdown, hãy đặt thẻ <var>
trong dấu ngoặc kép và sử dụng dấu ngoặc biểu thức Jinja để thoát khỏi thẻ, như sau: VAR_NAME
.
Ví dụ:
Hello, my name is YOUR_NAME.
Mã:
```
Hello, my name is YOUR_NAME.
```
Markdown
Bạn cũng có thể chỉ định các khối mã bằng Markdown bằng cách thụt lề 4 dấu cách cho mã hoặc bao quanh mã bằng 3 dấu phẩy ngược (```).
Ví dụ:
```
print("hello world")
```
print("hello world")
cả hai đều trở thành
<pre class="prettyprint notranslate" translate="no"><code>
print("hello world")
</code></pre>
Nếu đang sử dụng các khối mã có hàng rào (và không phải các khối mã có thụt lề), bạn cũng có thể chỉ định ngôn ngữ để prettyprint hiểu được:
print("hello world")
trở thành
<pre class="prettyprint notranslate lang-py" translate="no"><code>
print("hello world")
</code></pre>
Bạn có thể tìm thấy danh sách ngôn ngữ được nhận dạng trong tài liệu về Prettify.
Tất cả các khối mã được tạo thông qua Markdown sẽ được áp dụng lớp prettyprint, trừ phi bạn đặt ngôn ngữ thành không rõ ràng. Bạn có thể thêm các lớp khác vào khối mã bằng cách sử dụng thuộc tính tuỳ chỉnh:
The program completed successfully.
trở thành
<pre class="devsite-disable-click-to-copy"><code>The program completed successfully.
</code></pre>