หน้านี้ได้รับการแปลโดย Cloud Translation API

รหัส

ใช้ <code> สำหรับโค้ดแบบแทรกในบรรทัด และ <pre class="prettyprint"> สำหรับบล็อกโค้ด ฟีเจอร์ไฮไลต์ไวยากรณ์ใช้งานได้ดีกับหลายภาษา รวมถึงตัวอย่าง XML และ HTML คุณละเว้น class="prettyprint" ได้หากการไฮไลต์ไวยากรณ์ไม่เหมาะกับตัวอย่าง เช่น สําหรับคําสั่งคอนโซลหรือ URL ปลายทางของบริการที่ยาว

โค้ดต่อบรรทัดในบล็อก <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>

โดยปกติแล้วคุณจะละเว้น 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

เหตุการณ์ Analytics แบบคลิกเพื่อคัดลอก

หากต้องการแยกแยะเหตุการณ์ 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)

หากต้องการลบล้างลักษณะการทำงานนี้และตัดบรรทัดแทน ให้เพิ่ม 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>

หากต้องการเพิ่ม $ ไว้ที่จุดเริ่มต้นของโค้ดเทอร์มินัล 1 บรรทัด ให้ใช้ 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&gt; ">
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")

ทั้ง 2 รายการกลายเป็น

<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 เว้นแต่จะมีการตั้งค่าภาษาเป็น "ไม่มี" อย่างชัดเจน คุณสามารถเพิ่มคลาสอื่นๆ ลงในบล็อกโค้ดได้โดยใช้แอตทริบิวต์ที่กำหนดเอง ดังนี้

The program completed successfully.

กลายเป็น

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