משתמשים ב-<code> לקוד בתוך השורה וב-<pre class="prettyprint"> לבלוקים של קוד. הדגשת התחביר פועלת היטב בשפות רבות, כולל דוגמאות ל-XML ול-HTML. אפשר להשמיט את class="prettyprint" אם הדגשת התחביר לא מתאימה לדוגמה, למשל בפקודות במסוף או בכתובות URL ארוכות של נקודות קצה לשירות.
אסור לחרוג מ-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 basicmkdir -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
אפשר גם לציין בלוקים של קוד באמצעות Markdown, על ידי הוספת 4 רווחים לפני הקוד או סימון שלו ב-3 גרשיים נטויים (```).
לדוגמה:
```
print("hello world")
```
print("hello world")
שניהם הופכים
<pre class="prettyprint notranslate" translate="no"><code>
print("hello world")
</code></pre>
אם אתם משתמשים בקטעי קוד מוקפים (ולא בקטעי קוד עם הכנסה), אתם יכולים גם לציין את השפה כדי ש-prettyprint יוכל להבין אותה:
print("hello world")
הופך ל-
<pre class="prettyprint notranslate lang-py" translate="no"><code>
print("hello world")
</code></pre>
רשימת השפות המוכרות מופיעה במסמכי התיעוד של Prettify.
כל בלוקים של קוד שנוצרו באמצעות Markdown ימולאו בכיתה prettyprint, אלא אם תגדירו את השפה כ-none באופן מפורש. אפשר להוסיף עוד כיתות לבלוק הקוד באמצעות מאפיינים מותאמים אישית:
The program completed successfully.
הופך ל-
<pre class="devsite-disable-click-to-copy"><code>The program completed successfully.
</code></pre>