कोड

इनलाइन कोड के लिए <code> और कोड ब्लॉक के लिए <pre class="prettyprint"> का इस्तेमाल करें. सिंटैक्स हाइलाइट करने की सुविधा, कई भाषाओं के लिए अच्छी तरह से काम करती है. इनमें एक्सएमएल और एचटीएमएल के उदाहरण भी शामिल हैं. अगर सिंटैक्स हाइलाइट करने की सुविधा, उदाहरण के लिए, कंसोल कमांड या लंबे सेवा एंडपॉइंट यूआरएल के लिए सही नहीं है, तो class="prettyprint" को हटाया जा सकता है.

<pre> ब्लॉक में हर लाइन में 100 से ज़्यादा वर्ण का कोड न डालें. 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>

आम तौर पर, कंसोल कमांड के लिए <pre> से class="prettyprint" को हटा दिया जाता है. उदाहरण के लिए:

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}

कोड ब्लॉक के किसी हिस्से पर, क्लिक करके कॉपी करने की सुविधा बंद करना

किसी कोड ब्लॉक के हिस्से को कॉपी होने से रोकने के लिए, उस हिस्से के चारों ओर no-select क्लास वाला <span> टैग जोड़ें जिसे कॉपी नहीं करना है:

<span class="no-select">C:\> </span>ping google.com

नीचे दिए गए उदाहरण में, मैन्युअल कॉपी करने की सुविधा और 'कॉपी करने के लिए क्लिक करें' बटन, दोनों एनोटेट किए गए हिस्से को अनदेखा करते हैं:

C:\\> ping google.com

क्लिक करके कॉपी करने की सुविधा वाले आंकड़ों से जुड़े इवेंट

क्लिक करके कॉपी करने की सुविधा वाले Analytics इवेंट को अलग-अलग दिखाने के लिए, 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)

इस व्यवहार को बदलने और लाइन को रैप करने के लिए, <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 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> कंटेनर के कॉन्टेंट की शुरुआत में $ जोड़ने के लिए, <pre> एलिमेंट पर class="devsite-terminal" लागू करें.

adb devices

कोड:

<pre class="devsite-terminal devsite-click-to-copy">
adb devices
</pre>

टर्मिनल कोड की किसी एक लाइन की शुरुआत में $ जोड़ने के लिए, उस लाइन वाले <code> एलिमेंट में class="devsite-terminal" लागू करें. इस तरीके का इस्तेमाल उन मामलों के लिए करें जिनमें एक से ज़्यादा लाइनों में $ है.

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

कस्टम प्रीफ़िक्स का इस्तेमाल करने के लिए, उस <pre> या <code> एलिमेंट में data-terminal-prefix एट्रिब्यूट जोड़ें जहां क्लास लागू की गई थी.

Install-Package Google.Apis.Calendar.v3

कोड:

<pre class="devsite-terminal devsite-click-to-copy" data-terminal-prefix="PM&gt; ">
Install-Package Google.Apis.Calendar.v3
</pre>

"devsite-terminal" क्लास का इस्तेमाल करके जोड़े गए प्रीफ़िक्स के सभी इंस्टेंस, उपयोगकर्ता के कॉपी किए गए कोड से बाहर रखे जाएंगे.

हाइलाइट करने की सेवा

<pre> ब्लॉक में मौजूद कॉन्टेंट पर ध्यान खींचने के लिए, <strong> का इस्तेमाल करें. ऐसा करने पर, <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>

बदले जा सकने वाले वैरिएबल

<pre> में बदले जा सकने वाले टेक्स्ट के लिए, अंडरस्कोर के साथ <var> और बड़े अक्षरों का इस्तेमाल करें. उदाहरण के लिए:

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 का इस्तेमाल करके भी कोड ब्लॉक बनाए जा सकते हैं. इसके लिए, कोड को चार स्पेस इंडेंट करें या तीन बैकटिक (```) लगाएं.

उदाहरण के लिए:

    ```
    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 की मदद से बनाए गए सभी कोड ब्लॉक पर, प्रीटीप्रिंट क्लास लागू होगी. ऐसा तब तक होगा, जब तक भाषा को साफ़ तौर पर 'कोई नहीं' पर सेट नहीं किया जाता. कस्टम एट्रिब्यूट का इस्तेमाल करके, कोड ब्लॉक में अतिरिक्त क्लास जोड़ी जा सकती हैं:

The program completed successfully.

के बराबर

<pre class="devsite-disable-click-to-copy"><code>The program completed successfully.
</code></pre>