Код

Используйте <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 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 пробела, либо с помощью трех обратных кавычек (```).

Например: 

    ```
    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>