Użyj <code> do kodu w tekście, a <pre class="prettyprint"> do bloków kodu. Podświetlanie składni działa dobrze w wielu językach, w tym w przypadku przykładów w XML i HTML. Możesz pominąć class="prettyprint", jeśli podświetlenie składni nie jest odpowiednie dla przykładu, np. w przypadku poleceń konsoli lub długich adresów URL punktów końcowych usług.
W bloku <pre> nie przekraczaj 100 znaków kodu na wiersz. Na większych ekranach w DevSite zmieści się dokładnie 100 znaków kodu, zanim zacznie się przewijanie poziome. Na mniejszych ekranach bloki kodu będą się przewijać poziomo w razie potrzeby. 80 znaków mieści się na prawie każdym laptopie.
#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>
W przypadku poleceń konsoli zwykle pomija się class="prettyprint" z poziomu <pre>. Na przykład:
dev_appserver.py -a $HOST --debug demos/getstarted
<pre>dev_appserver.py -a $HOST --debug demos/getstarted</pre>
Kliknij, aby skopiować
Przycisk kliknij, aby skopiować, pojawia się automatycznie we wszystkich blokach kodu z klasą prettyprint.
Aby korzystać z funkcji kliknij, aby skopiować w przypadku bloku kodu lub innego elementu, który nie ma klasy prettyprint, dodaj klasę 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>
Wyłączanie kopiowania po kliknięciu w blok kodu
Aby wyłączyć funkcję kliknij, aby skopiować w przypadku bloku kodu prettyprint, dodaj klasę 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>
Aby wyłączyć funkcję kliknij, aby skopiować w bloku kodu Markdown, użyj tej składni, gdy otworzysz nawias kwadratowy kodu, aby zastosować styl devsite-disable-click-to-copy:
{:.devsite-disable-click-to-copy}
Wyłączanie kopiowania po kliknięciu w części bloku kodu
Aby zablokować kopiowanie części bloku kodu, dodaj tag <span> z klasą no-select wokół części, której nie chcesz, aby można było kopiować:
<span class="no-select">C:\> </span>ping google.com
W poniższym przykładzie zarówno ręczne kopiowanie, jak i kliknięcie przycisku „Kopiuj” ignorują zaznaczony fragment:
C:\\> ping google.com
Zdarzenia analityczne kliknij, aby skopiować
Aby rozróżnić zdarzenia analityczne kliknięcia w celu skopiowania, ustaw atrybut data-copy-event-label.
data-copy-event-label
<pre class="devsite-terminal devsite-click-to-copy" data-copy-event-label="unique_identifier"></pre>
Kopiowanie kliknięciem i ułatwienia dostępu
Domyślnie wszystkie przykłady kodu do kliknięcia mają tę samą etykietę przycisku „Kliknij, aby skopiować”: „Skopiuj przykładowy kod”. Na stronach z wieloma przykładami kodu może to utrudniać poruszanie się za pomocą czytnika ekranu.
Ze względu na potrzeby dostępności w przypadku każdego przykładowego kodu z opcją kliknij, aby skopiować, dodaj atrybut data-label, który w zwięzły sposób opisze zawartość każdego przykładowego kodu. Każda etykieta przykładowego kodu powinna być niepowtarzalna w stosunku do wszystkich innych etykiet przykładowego kodu na stronie. Czytniki ekranu odczytują tę etykietę oprócz etykiety „Kopiuj przykładowy kod”.
{:.devsite-click-to-copy}
<pre class="devsite-click-to-copy" data-label="Installation script"></pre>
Wyłączanie przełącznika jasny/ciemny
Aby wyłączyć przełącznik jasny/ciemny w bloku kodu, dodaj klasę devsite-disable-code-toggle:
<pre class="prettyprint devsite-disable-code-toggle"></pre>
Aby wyłączyć przycisk przełączania jasnego i ciemnego trybu w bloku kodu Markdown, użyj tej składni, gdy otworzysz nawias kodu, aby zastosować klasę devsite-disable-code-toggle:
``` {.devsite-disable-code-toggle}
Ciemny kod domyślnie
Aby blok kodu używał domyślnie ciemnego motywu, dodaj klasę devsite-dark-code-default:
<pre class="prettyprint devsite-dark-code-default"></pre>
Wymuś zawijanie wierszy
Domyślnie w przypadku linii w bloku <pre>, które zawierają więcej niż 100 znaków, dodawany jest suwak poziomy.
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)
Aby zmienić to zachowanie i zamiast tego zawinąć wiersze, dodaj class="wrap-code" do bloku <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)
Kod:
<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>
Kod terminala
Podczas demonstrowania kodu w terminalu zalecamy, aby autorzy używali znaku $ do oznaczania nowych poleceń terminala. Aby dodać $ na początku zawartości kontenera <pre> bez dodawania go do skopiowanego kodu użytkownika, zastosuj element class="devsite-terminal" do elementu <pre>.
adb devices
Kod:
<pre class="devsite-terminal devsite-click-to-copy">
adb devices
</pre>
Aby dodać $ na początku pojedynczego wiersza kodu terminala, zastosuj class="devsite-terminal" do elementu <code> zawierającego ten wiersz. Stosuj tę taktykę w przypadku $ na kilku wierszach.
gradle init --type basicmkdir -p src/main/java src/main/resources
Kod:
<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
Aby użyć niestandardowego prefiksu, dodaj atrybut data-terminal-prefix do elementu <pre> lub <code>, w którym zastosowano klasę.
Install-Package Google.Apis.Calendar.v3
Kod:
<pre class="devsite-terminal devsite-click-to-copy" data-terminal-prefix="PM> ">
Install-Package Google.Apis.Calendar.v3
</pre>
Wszystkie wystąpienia prefiksu dodanego za pomocą klasy „devsite-terminal” zostaną wykluczone z skopiowanego kodu użytkownika.
Refleksy
Aby zwrócić uwagę na treści w bloku <pre>, użyj <strong>. Spowoduje to rozjaśnienie otaczających treści, aby podkreślić zaznaczony blok <strong>. Na przykład:
// ...
// ...
// ...
for (i = 0; i < 10; i++) {
printf("Counting %d\n", i);
if (i % 3 == 0) {
someFunc(i);
}
}
// ...
// ...
// ...
Kod:
<pre class="prettyprint">
// ...
// ...
// ...
for (i = 0; i < 10; i++) {
printf("Counting %d\n", i);
<strong>if (i % 3 == 0) {
someFunc(i);
}</strong>
}
// ...
// ...
// ...
</pre>
Zmienne zastępcze
W miejscu <var> użyj wielkich liter z podkreśleniami.<pre> Na przykład:
dev_appserver.py YOUR_APP_DIR.
Kod:
<pre>dev_appserver.py <var>YOUR_APP_DIR</var></pre>
W Markdownie użyj cudzysłowów do oznaczenia tagów <var> i użyj nawiasów wyrażenia Jinja, aby je znieczynnić, np. VAR_NAME.
Na przykład:
Hello, my name is YOUR_NAME.
Kod:
```
Hello, my name is YOUR_NAME.
```
Markdown
Bloki kodu możesz też określić za pomocą Markdowna, odstępując kod o 4 spacje lub otaczając go 3 lewymi apostrofachami (```).
Na przykład:
```
print("hello world")
```
print("hello world")
oba stają się
<pre class="prettyprint notranslate" translate="no"><code>
print("hello world")
</code></pre>
Jeśli używasz wydzielonych bloków kodu (a nie wcięte bloki kodu), możesz też określić język, który ma rozumieć polecenie prettyprint:
print("hello world")
zmienia się w
<pre class="prettyprint notranslate lang-py" translate="no"><code>
print("hello world")
</code></pre>
Listę rozpoznawanych języków znajdziesz w dokumentacji do Prettify.
Wszystkie bloki kodu utworzone za pomocą Markdown będą miały zastosowaną klasę prettyprint, chyba że język zostanie ustawiony na „none”. Możesz dodać dodatkowe klasy do bloku kodu, korzystając z atrybutów niestandardowych:
The program completed successfully.
zmienia się w
<pre class="devsite-disable-click-to-copy"><code>The program completed successfully.
</code></pre>