Код

Користите <code> за инлине код и <pre class="prettyprint"> за блокове кода. Истицање синтаксе добро функционише за многе језике, укључујући КСМЛ и ХТМЛ примере. Можете да изоставите class="prettyprint" ако истицање синтаксе није прикладно за пример, на пример за команде конзоле или УРЛ-ове крајњих тачака дугих услуга.

Немојте прекорачити 100 знакова кода по реду у блоку <pre> . У ДевСите-у, тачно 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>

Да бисте онемогућили клик за копирање на блок кода Маркдовн , користите следећу синтаксу када отворите ограду кода да бисте применили стил 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>

Да бисте онемогућили дугме за пребацивање светло/тамно на блок кода Маркдовн , користите следећу синтаксу када отворите ограду кода да бисте применили класу 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>

Све инстанце префикса додате помоћу класе „девсите-терминал“ биће искључене из копираног кода корисника.

Истицање

Користите <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>

У Маркдовну, ставите ознаке <var> у наводнике и користите заграде Јиња израза да бисте избегли ознаке, на пример: VAR_NAME .

на пример: 

Hello, my name is YOUR_NAME.

код: 

    ```
    Hello, my name is YOUR_NAME.
    ```

Маркдовн

Такође можете да наведете блокове кода помоћу Маркдовн -а са увлачењем кода од 4 размака или ограђивањем са 3 квачица (```).

на пример: 

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

Листу признатих језика можете пронаћи у Преттифи документацији .

Сви блокови кода направљени преко Маркдовн-а ће имати примењену класу преттипринт, осим ако се изричито не постави језик на ниједан. Можете додати додатне класе у блок кода користећи прилагођене атрибуте : 

The program completed successfully.

постаје 

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