Brug <code> til inline-kode og <pre class="prettyprint"> til kodeblokke. Syntaksfremhævningen fungerer godt for mange sprog, inklusive XML- og HTML-eksempler. Du kan udelade class="prettyprint" hvis syntaksfremhævningen ikke er passende for eksemplet, f.eks. for konsolkommandoer eller lange tjenesteslutpunkts-URL'er.
Overskrid ikke 100 tegn kode pr. linje i en <pre> -blok. I DevSite vil præcis 100 tegn kode passe på større skærme, før vandret rulning starter. På mindre skærme vil kodeblokke rulle horisontalt, når det er nødvendigt. 80 tegn passer på stort set enhver bærbar computer.
#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>
Du vil typisk udelade class="prettyprint" fra <pre> for konsolkommandoer. For eksempel:
dev_appserver.py -a $HOST --debug demos/getstarted
<pre>dev_appserver.py -a $HOST --debug demos/getstarted</pre>
Klik for at kopiere
En klik for at kopiere-knap vises automatisk på alle kodeblokke med klassen prettyprint .
For at bruge click-to-copy på en kodeblok eller andet element, der ikke har klassen prettyprint , skal du tilføje klassen 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>
Deaktivering af klik for at kopiere på en kodeblok
For at deaktivere klik for at kopiere på en prettyprint kodeblok skal du tilføje klassen 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>
For at deaktivere klik for at kopiere på en Markdown-kodeblok skal du bruge følgende syntaks, når du åbner kodehegnet for at anvende stilen devsite-disable-click-to-copy :
{:.devsite-disable-click-to-copy}
Deaktivering af klik for at kopiere på en del af en kodeblok
For at forhindre kopiering af en del af en kodeblok skal du tilføje et <span> -tag med en klasse no-select omkring den del, du ikke vil have kopieret:
<span class="no-select">C:\> </span>ping google.com
I eksemplet nedenfor ignorerer både manuel kopiering og klik for at kopiere-knappen den kommenterede del:
C:\\> ping google.comKlik for at kopiere analysehændelser
Indstil attributten data-copy-event-label for at gøre klik for at kopiere analysehændelser.
data-copy-event-label
<pre class="devsite-terminal devsite-click-to-copy" data-copy-event-label="unique_identifier"></pre>
Klik for at kopiere og tilgængelighed
Som standard har alle klik for at kopiere kodeeksempler den samme etiket for hver klik for at kopiere knap: "Kopiér kodeeksempel." På sider med flere kodeeksempler kan dette gøre det vanskeligt at navigere med en skærmlæser.
For tilgængelighed skal du forsyne hvert klik for at kopiere kodeeksempel med en data-label attribut, der kort og præcist angiver indholdet af hver kodeeksempel. Hver kodeeksempeletiket skal være unik i forhold til alle andre kodeeksempeletiketter på siden; denne etiket læses af skærmlæsere ud over "Kopiér kodeeksempel." {:.devsite-click-to-copy} <pre class="devsite-click-to-copy" data-label="Installation script"></pre>
Slå lys/mørke til/fra
For at deaktivere lys/mørke-skifteknappen på en kodeblok skal du tilføje klassen devsite-disable-code-toggle :
<pre class="prettyprint devsite-disable-code-toggle"></pre>
For at deaktivere lys/mørke-skifteknappen på en Markdown-kodeblok skal du bruge følgende syntaks, når du åbner kodehegnet for at anvende klassen devsite-disable-code-toggle :
``` {.devsite-disable-code-toggle}
Mørk kode som standard
For at få en kodeblok til at bruge mørk kodestil som standard, skal du tilføje klassen devsite-dark-code-default :
<pre class="prettyprint devsite-dark-code-default"></pre>
Tving linjeomvikling
Som standard tilføjes en vandret rullebjælke for linjer i en <pre> -blok, der overstiger 100 tegn.
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)
For at tilsidesætte denne adfærd og ombryde linjerne i stedet, skal du tilføje class="wrap-code" til <pre> -blokken.
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)
Kode:
<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>
Terminalkode
Når du demonstrerer kode til terminalen, anbefaler vi, at forfattere bruger $ til at angive en ny terminalkommando. For at tilføje $ til begyndelsen af indholdet af en <pre> -beholder uden at tilføje den til brugerens kopierede kode, skal du anvende class="devsite-terminal" på <pre> -elementet.
adb devices
Kode:
<pre class="devsite-terminal devsite-click-to-copy">
adb devices
</pre>
For at tilføje $ til begyndelsen af en enkelt linje med terminalkode, skal du anvende class="devsite-terminal" på <code> -elementet, der indeholder den linje. Brug denne taktik til sager med $ i flere linjer.
gradle init --type basicmkdir -p src/main/java src/main/resources
Kode:
<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
For at bruge et tilpasset præfiks skal du tilføje attributten data-terminal-prefix til <pre> eller <code> -elementet, hvor klassen blev anvendt.
Install-Package Google.Apis.Calendar.v3
Kode:
<pre class="devsite-terminal devsite-click-to-copy" data-terminal-prefix="PM> ">
Install-Package Google.Apis.Calendar.v3
</pre>
Alle forekomster af præfikset tilføjet ved hjælp af klassen "devsite-terminal" vil blive udelukket fra brugerens kopierede kode.
Fremhævelse
Brug <strong> til at gøre opmærksom på indhold i en <pre> -blok. Hvis du gør det, lysner det omgivende indhold for at understrege det afsnit, der er fremhævet af blokken <strong> . For eksempel:
// ...
// ...
// ...
for (i = 0; i < 10; i++) {
printf("Counting %d\n", i);
if (i % 3 == 0) {
someFunc(i);
}
}
// ...
// ...
// ...Kode:
<pre class="prettyprint">
// ...
// ...
// ...
for (i = 0; i < 10; i++) {
printf("Counting %d\n", i);
<strong>if (i % 3 == 0) {
someFunc(i);
}</strong>
}
// ...
// ...
// ...
</pre>
Udskiftelige variabler
Brug <var> og store bogstaver med understregninger til udskiftelig tekst i <pre> . For eksempel:
dev_appserver.py YOUR_APP_DIR.
Kode:
<pre>dev_appserver.py <var>YOUR_APP_DIR</var></pre>
I Markdown skal du omslutte <var> -taggene i anførselstegn og bruge Jinja-udtryksparenteser til at undslippe taggene, sådan her: VAR_NAME .
For eksempel:
Hello, my name is YOUR_NAME.
Kode:
```
Hello, my name is YOUR_NAME.
```
Markdown
Du kan også specificere kodeblokke ved at bruge Markdown med enten 4-mellemrums indrykning af koden eller indhegning med 3 backticks (```).
For eksempel:
```
print("hello world")
```
print("hello world")
begge bliver
<pre class="prettyprint notranslate" translate="no"><code>
print("hello world")
</code></pre>
Hvis du bruger indhegnede kodeblokke (og ikke indrykkede kodeblokke), kan du også angive sproget for prettyprint for at forstå det:
print("hello world")
bliver
<pre class="prettyprint notranslate lang-py" translate="no"><code>
print("hello world")
</code></pre>
Du kan finde listen over anerkendte sprog i Prettify-dokumentationen .
Alle kodeblokke lavet gennem Markdown vil have prettyprint-klassen anvendt på sig, medmindre sproget udtrykkeligt indstilles til ingen. Du kan tilføje yderligere klasser til kodeblokken ved at bruge brugerdefinerede attributter :
The program completed successfully.
bliver
<pre class="devsite-disable-click-to-copy"><code>The program completed successfully.
</code></pre>