Gunakan <code> untuk kode inline, dan <pre class="prettyprint"> untuk blok kode. Sorotan sintaksis berfungsi dengan baik untuk banyak bahasa, termasuk contoh XML dan HTML. Anda dapat menghilangkan class="prettyprint" jika sorotan sintaksis tidak sesuai untuk contoh, seperti untuk perintah konsol atau URL endpoint layanan yang panjang.
Jangan melebihi 100 karakter kode per baris dalam blok <pre>. Di DevSite, tepat 100 karakter kode akan muat di layar yang lebih besar sebelum scroll horizontal dimulai. Pada layar yang lebih kecil, blok kode akan di-scroll secara horizontal jika diperlukan. 80 karakter dapat ditampilkan di hampir semua laptop.
#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>
Anda biasanya akan menghapus class="prettyprint" dari <pre> untuk perintah konsol. Contoh:
dev_appserver.py -a $HOST --debug demos/getstarted
<pre>dev_appserver.py -a $HOST --debug demos/getstarted</pre>
Klik untuk menyalin
Tombol klik untuk menyalin akan otomatis muncul di semua blok kode dengan class prettyprint.
Untuk menggunakan klik untuk menyalin pada blok kode atau elemen lain yang tidak memiliki class prettyprint, tambahkan class 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>
Menonaktifkan klik untuk menyalin di blok kode
Untuk menonaktifkan klik untuk menyalin di blok kode prettyprint, tambahkan class 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>
Untuk menonaktifkan klik untuk menyalin di blok kode Markdown, gunakan sintaksis berikut saat Anda membuka pagar kode untuk menerapkan gaya devsite-disable-click-to-copy:
{:.devsite-disable-click-to-copy}
Menonaktifkan klik untuk menyalin pada bagian blok kode
Untuk mencegah penyalinan bagian blok kode, tambahkan tag <span> dengan class no-select di sekitar bagian yang tidak ingin Anda salin:
<span class="no-select">C:\> </span>ping google.com
Pada contoh di bawah, penyalinan manual serta tombol klik untuk menyalin akan mengabaikan bagian yang dianotasi:
C:\\> ping google.com
Peristiwa analisis klik untuk menyalin
Untuk membedakan peristiwa analisis klik untuk menyalin, tetapkan atribut data-copy-event-label.
data-copy-event-label
<pre class="devsite-terminal devsite-click-to-copy" data-copy-event-label="unique_identifier"></pre>
Klik untuk menyalin dan aksesibilitas
Secara default, semua contoh kode klik-untuk-menyalin memiliki label yang sama untuk setiap tombol klik-untuk-menyalin: "Salin contoh kode". Pada halaman dengan beberapa contoh kode, hal ini dapat mempersulit navigasi dengan pembaca layar.
Untuk aksesibilitas, berikan setiap contoh kode klik-untuk-menyalin dengan atribut data-label yang memberi label konten setiap contoh kode secara singkat dan ringkas. Setiap label contoh kode harus unik dibandingkan dengan semua label contoh kode lainnya di halaman; label ini dibaca oleh pembaca layar selain "Salin contoh kode".
{:.devsite-click-to-copy}
<pre class="devsite-click-to-copy" data-label="Installation script"></pre>
Menonaktifkan tombol terang/gelap
Untuk menonaktifkan tombol tombol terang/gelap pada blok kode, tambahkan class devsite-disable-code-toggle:
<pre class="prettyprint devsite-disable-code-toggle"></pre>
Untuk menonaktifkan tombol tombol terang/gelap pada blok kode Markdown, gunakan sintaksis berikut saat Anda membuka pagar kode untuk menerapkan class devsite-disable-code-toggle:
``` {.devsite-disable-code-toggle}
Kode gelap secara default
Agar blok kode menggunakan gaya kode gelap secara default, tambahkan class devsite-dark-code-default:
<pre class="prettyprint devsite-dark-code-default"></pre>
Memaksa penggabungan baris
Secara default, scrollbar horizontal ditambahkan untuk baris dalam blok <pre> yang melebihi 100 karakter.
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)
Untuk mengganti perilaku ini dan menggabungkan baris, tambahkan class="wrap-code" ke blok <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)
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>
Kode terminal
Saat mendemonstrasikan kode untuk terminal, sebaiknya penulis menggunakan $ untuk menunjukkan perintah terminal baru. Untuk menambahkan $ ke awal konten penampung <pre> tanpa menambahkannya ke kode yang disalin pengguna, terapkan class="devsite-terminal" ke elemen <pre>.
adb devices
Kode:
<pre class="devsite-terminal devsite-click-to-copy">
adb devices
</pre>
Untuk menambahkan $ ke awal satu baris kode terminal, terapkan class="devsite-terminal" ke elemen <code> yang berisi baris tersebut. Gunakan taktik ini untuk kasus dengan $ di beberapa baris.
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
Untuk menggunakan awalan kustom, tambahkan atribut data-terminal-prefix ke elemen <pre> atau <code> tempat class diterapkan.
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>
Semua instance awalan yang ditambahkan menggunakan class "devsite-terminal" akan dikecualikan dari kode yang disalin pengguna.
Highlight
Gunakan <strong> untuk menarik perhatian ke konten dalam blok <pre>. Tindakan ini
akan mempercerah konten di sekitarnya untuk menekankan bagian yang ditandai oleh
blok <strong>. Contoh:
// ...
// ...
// ...
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>
Variabel yang dapat diganti
Gunakan <var> dan huruf besar dengan garis bawah untuk teks yang dapat diganti dalam <pre>. Contoh:
dev_appserver.py YOUR_APP_DIR.
Kode:
<pre>dev_appserver.py <var>YOUR_APP_DIR</var></pre>
Di Markdown, sertakan tag <var> dalam tanda kutip dan gunakan tanda kurung ekspresi Jinja untuk meng-escape tag, seperti ini: VAR_NAME.
Contoh:
Hello, my name is YOUR_NAME.
Kode:
```
Hello, my name is YOUR_NAME.
```
Markdown
Anda juga dapat menentukan blok kode menggunakan Markdown dengan indentasi 4 spasi pada kode atau membatasinya dengan 3 tanda kutip terbalik (```).
Contoh:
```
print("hello world")
```
print("hello world")
keduanya menjadi
<pre class="prettyprint notranslate" translate="no"><code>
print("hello world")
</code></pre>
Jika menggunakan blok kode berpagar (dan bukan blok kode yang diindentasi), Anda juga dapat menentukan bahasa agar prettyprint dapat memahaminya:
print("hello world")
menjadi
<pre class="prettyprint notranslate lang-py" translate="no"><code>
print("hello world")
</code></pre>
Anda dapat menemukan daftar bahasa yang dikenali di dokumentasi Prettify.
Semua blok kode yang dibuat melalui Markdown akan memiliki class prettyprint yang diterapkan, kecuali jika bahasa ditetapkan secara eksplisit ke none. Anda dapat menambahkan class tambahan ke blok kode menggunakan atribut khusus:
The program completed successfully.
menjadi
<pre class="devsite-disable-click-to-copy"><code>The program completed successfully.
</code></pre>