استخدِم <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.
سيتم تطبيق فئة prettyprint على جميع مجموعات الرموز البرمجية التي تم إنشاؤها باستخدام Markdown، ما لم يتم ضبط اللغة صراحةً على none. يمكنك إضافة فئات إضافية إلى مجموعة الرموز البرمجية باستخدام السمات المخصّصة:
The program completed successfully.
يصبح
<pre class="devsite-disable-click-to-copy"><code>The program completed successfully.
</code></pre>