از <code>
برای کد درون خطی و <pre class="prettyprint">
برای بلوک های کد استفاده کنید. برجستهسازی نحو برای بسیاری از زبانها، از جمله مثالهای XML و HTML، به خوبی کار میکند. اگر برجسته سازی نحو برای مثال مناسب نیست، مانند دستورات کنسول یا URL های نقطه پایانی خدمات طولانی، می توانید class="prettyprint"
حذف کنید.
از 100 کاراکتر کد در هر خط در بلوک <pre>
تجاوز نکنید. در 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>
شما معمولاً class="prettyprint"
از <pre>
برای دستورات کنسول حذف می کنید. به عنوان مثال:
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}
غیرفعال کردن کلیک برای کپی در بخشی از بلوک کد
برای جلوگیری از کپی بخشی از یک بلوک کد، یک تگ <span>
با یک کلاس no-select
در اطراف قسمتی که نمی خواهید کپی شود اضافه کنید:
<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>
بدون افزودن آن به کد کپی شده کاربر، class="devsite-terminal"
را به عنصر <pre>
اعمال کنید.
adb devices
کد:
<pre class="devsite-terminal devsite-click-to-copy">
adb devices
</pre>
برای افزودن $
به ابتدای یک خط کد ترمینال، class="devsite-terminal"
را به عنصر <code>
حاوی آن خط اعمال کنید. از این تاکتیک برای موارد با $
در چندین خط استفاده کنید.
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>
متغیرهای قابل تعویض
از <var>
و حروف بزرگ با زیرخط برای متن قابل تعویض در <pre>
استفاده کنید. به عنوان مثال:
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>
اگر از بلوکهای کد حصاردار (و نه بلوکهای کد تورفتگی) استفاده میکنید، میتوانید زبان زیبایی چاپ را برای درک آن نیز مشخص کنید:
print("hello world")
تبدیل می شود
<pre class="prettyprint notranslate lang-py" translate="no"><code>
print("hello world")
</code></pre>
می توانید لیست زبان های شناخته شده را در مستندات Prettify بیابید.
تمام بلوکهای کد ساخته شده از طریق Markdown دارای کلاس زیبایی پرینت هستند، مگر اینکه به صراحت زبان را روی None تنظیم کنید. با استفاده از ویژگی های سفارشی می توانید کلاس های اضافی را به بلوک کد اضافه کنید:
The program completed successfully.
تبدیل می شود
<pre class="devsite-disable-click-to-copy"><code>The program completed successfully.
</code></pre>