код

Използвайте <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

Събития за анализ с кликване за копиране

За да разграничите недвусмислените аналитични събития за копиране, задайте атрибута 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

Можете също така да посочите кодови блокове с помощта на 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>