Utilitzeu <code>
per al codi en línia i <pre class="prettyprint">
per als blocs de codi. El ressaltat de sintaxi funciona bé per a molts idiomes, inclosos exemples XML i HTML. Podeu ometre class="prettyprint"
si el ressaltat de sintaxi no és adequat per a l'exemple, com ara per a ordres de consola o URL de punt final de servei llarg.
No supereu els 100 caràcters de codi per línia en un bloc <pre>
. A DevSite, exactament 100 caràcters de codi cabran a les pantalles més grans abans que s'iniciï el desplaçament horitzontal. A les pantalles més petites, els blocs de codi es desplaçaran horitzontalment quan sigui necessari. 80 caràcters encaixen en gairebé qualsevol ordinador portàtil.
#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>
Normalment ometríeu class="prettyprint"
de <pre>
per a les ordres de la consola. Per exemple:
dev_appserver.py -a $HOST --debug demos/getstarted
<pre>dev_appserver.py -a $HOST --debug demos/getstarted</pre>
Feu clic per copiar
Un botó de clic per copiar apareix automàticament a tots els blocs de codi amb la classe prettyprint
.
Per utilitzar el clic per copiar en un bloc de codi o un altre element que no tingui la classe prettyprint
, afegiu la classe 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>
Desactivació del clic per copiar en un bloc de codi
Per desactivar el clic per copiar en un bloc de codi prettyprint
, afegiu la classe 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>
Per desactivar el clic per copiar en un bloc de codi Markdown , utilitzeu la sintaxi següent quan obriu la tanca de codi per aplicar l'estil devsite-disable-click-to-copy
:
{:.devsite-disable-click-to-copy}
Desactivació del clic per copiar en part d'un bloc de codi
Per evitar copiar part d'un bloc de codi, afegiu una etiqueta <span>
amb una classe de no-select
al voltant de la part que no voleu copiar:
<span class="no-select">C:\> </span>ping google.com
A l'exemple següent, tant la còpia manual com el botó de clic per copiar ignoren la part anotada:
C:\\> ping google.com
Esdeveniments d'anàlisi de clic per copiar
Per desambiguar els esdeveniments d'anàlisi de clic per copiar, definiu l'atribut data-copy-event-label
.
data-copy-event-label
<pre class="devsite-terminal devsite-click-to-copy" data-copy-event-label="unique_identifier"></pre>
Clic per copiar i accessibilitat
De manera predeterminada, totes les mostres de codi de clic per copiar tenen la mateixa etiqueta per a cada botó de clic per copiar: "Copia de mostra de codi". A les pàgines amb diverses mostres de codi, això pot dificultar la navegació amb un lector de pantalla.
Per a l'accessibilitat, proporcioneu a cada mostra de codi de clic per copiar un atribut data-label
que etiqueti de manera breu i concisa el contingut de cada mostra de codi. Cada etiqueta de mostra de codi ha de ser única en relació amb totes les altres etiquetes de mostra de codi de la pàgina; Els lectors de pantalla llegeixen aquesta etiqueta a més de "Copiar la mostra de codi". {:.devsite-click-to-copy} <pre class="devsite-click-to-copy" data-label="Installation script"></pre>
Desactivació de la commutació llum/fosc
Per desactivar el botó de commutació clar/fosc en un bloc de codi, afegiu la classe devsite-disable-code-toggle
:
<pre class="prettyprint devsite-disable-code-toggle"></pre>
Per desactivar el botó de commutació clar/fosc en un bloc de codi Markdown , utilitzeu la sintaxi següent quan obriu la tanca de codi per aplicar la classe devsite-disable-code-toggle
:
``` {.devsite-disable-code-toggle}
Codi fosc per defecte
Per fer que un bloc de codi utilitzi l'estil de codi fosc de manera predeterminada, afegiu la classe devsite-dark-code-default
:
<pre class="prettyprint devsite-dark-code-default"></pre>
Embolcall de la línia de força
Per defecte, s'afegeix una barra de desplaçament horitzontal per a les línies d'un bloc <pre>
que superin els 100 caràcters.
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)
Per anul·lar aquest comportament i embolicar les línies, afegiu class="wrap-code"
al bloc <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)
Codi:
<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>
Codi terminal
Quan demostreu el codi del terminal, recomanem que els autors utilitzin $
per indicar una nova ordre del terminal. Per afegir $
al començament del contingut d'un contenidor <pre>
sense afegir-lo al codi copiat de l'usuari, apliqueu class="devsite-terminal"
a l'element <pre>
.
adb devices
Codi:
<pre class="devsite-terminal devsite-click-to-copy">
adb devices
</pre>
Per afegir $
al començament d'una única línia de codi de terminal, apliqueu class="devsite-terminal"
a l'element <code>
que conté aquesta línia. Utilitzeu aquesta tàctica per als casos amb $
en diverses línies.
gradle init --type basic
mkdir -p src/main/java src/main/resources
Codi:
<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
Per utilitzar un prefix personalitzat, afegiu l'atribut data-terminal-prefix
a l'element <pre>
o <code>
on s'ha aplicat la classe.
Install-Package Google.Apis.Calendar.v3
Codi:
<pre class="devsite-terminal devsite-click-to-copy" data-terminal-prefix="PM> ">
Install-Package Google.Apis.Calendar.v3
</pre>
Totes les instàncies del prefix afegit mitjançant la classe "devsite-terminal" s'exclouran del codi copiat de l'usuari.
Destacant
Utilitzeu <strong>
per cridar l'atenció sobre el contingut d'un bloc <pre>
. Si ho feu, s'aclareix el contingut que l'envolta per emfatitzar la secció destacada pel bloc <strong>
. Per exemple:
// ... // ... // ... for (i = 0; i < 10; i++) { printf("Counting %d\n", i); if (i % 3 == 0) { someFunc(i); } } // ... // ... // ...
Codi:
<pre class="prettyprint">
// ...
// ...
// ...
for (i = 0; i < 10; i++) {
printf("Counting %d\n", i);
<strong>if (i % 3 == 0) {
someFunc(i);
}</strong>
}
// ...
// ...
// ...
</pre>
Variables substituïbles
Utilitzeu <var>
i majúscules amb guions baixos per al text substituïble dins de <pre>
. Per exemple:
dev_appserver.py YOUR_APP_DIR.
Codi:
<pre>dev_appserver.py <var>YOUR_APP_DIR</var></pre>
A Markdown, introduïu les etiquetes <var>
entre cometes i utilitzeu els claudàtors d'expressió Jinja per escapar de les etiquetes, com aquesta: VAR_NAME
.
Per exemple:
Hello, my name is YOUR_NAME.
Codi:
```
Hello, my name is YOUR_NAME.
```
Reducció
També podeu especificar blocs de codi mitjançant Markdown amb 4 espais sagnant el codi o tancant-lo amb 3 backticks (```).
Per exemple:
```
print("hello world")
```
print("hello world")
tots dos esdevenen
<pre class="prettyprint notranslate" translate="no"><code>
print("hello world")
</code></pre>
Si utilitzeu blocs de codi tancats (i no blocs de codi sagnats), també podeu especificar l'idioma perquè prettyprint ho entengui:
print("hello world")
esdevé
<pre class="prettyprint notranslate lang-py" translate="no"><code>
print("hello world")
</code></pre>
Podeu trobar la llista d'idiomes reconeguts a la documentació de Prettify .
Tots els blocs de codi fets mitjançant Markdown tindran la classe prettyprint aplicada, tret que no s'estableixi explícitament l'idioma a cap. Podeu afegir classes addicionals al bloc de codi mitjançant atributs personalitzats :
The program completed successfully.
esdevé
<pre class="devsite-disable-click-to-copy"><code>The program completed successfully.
</code></pre>