код

Використовуйте <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 .

Щоб використовувати функцію Click-to-Copy для блоку коду чи іншого елемента, який не має класу 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

Події аналітики Click-to-Copy

Щоб усунути неоднозначність аналітичних подій копіювання клацанням, установіть атрибут 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&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 або з 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>