Satır içi kod için <code>, kod blokları için <pre class="prettyprint"> kullanın. Söz dizimi vurgulama, XML ve HTML örnekleri dahil olmak üzere birçok dilde iyi çalışır. Söz dizimi vurgulama, örnek için uygun değilse (ör. konsol komutları veya uzun hizmet uç noktası URL'leri) class="prettyprint" öğesini atlayabilirsiniz.
<pre> bloğunda satır başına 100 karakterden fazla kod kullanmayın. DevSite'te, yatay kaydırma etkinleşmeden önce daha büyük ekranlara tam olarak 100 karakterlik kod sığdırılır. Küçük ekranlarda, kod blokları gerektiğinde yatay olarak kaydırılır. 80 karakter hemen hemen her dizüstü bilgisayara sığar.
#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>
Konsol komutları için genellikle <pre>'ten class="prettyprint"'yi çıkarırsınız. Örneğin:
dev_appserver.py -a $HOST --debug demos/getstarted
<pre>dev_appserver.py -a $HOST --debug demos/getstarted</pre>
Kopyalamak için tıklama
prettyprint sınıfına sahip tüm kod bloklarında tıklayarak kopyalama düğmesi otomatik olarak görünür.
prettyprint sınıfına sahip olmayan bir kod bloğunda veya başka bir öğede tıkla ve kopyala özelliğini kullanmak için devsite-click-to-copy sınıfını ekleyin:
some_terminal_command.py --users_should_copy
<pre class="devsite-click-to-copy">some_terminal_command.py --users_should_copy</pre>
Kod bloğunda tıkla ve kopyala özelliğini devre dışı bırakma
prettyprint kod bloğunda tıkla-kopyala özelliğini devre dışı bırakmak için devsite-disable-click-to-copy sınıfını ekleyin:
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>
Markdown kod bloğunda tıkla-kopyala özelliğini devre dışı bırakmak için kod çitlerini açtığınızda devsite-disable-click-to-copy stilini uygulamak üzere aşağıdaki söz dizimini kullanın:
{:.devsite-disable-click-to-copy}
Kod bloğunun bir kısmında tıkla-kopyala özelliğini devre dışı bırakma
Bir kod bloğunun bir kısmının kopyalanmasını önlemek için, kopyalanmasını istemediğiniz kısmın etrafına no-select sınıfına sahip bir <span> etiketi ekleyin:
<span class="no-select">C:\> </span>ping google.com
Aşağıdaki örnekte hem manuel kopyalama hem de tıkla-kopyala düğmesi, ek açıklamalı kısmı yoksayar:
C:\\> ping google.com
Tıkla ve kopyala analiz etkinlikleri
Tıkla ve kopyala analiz etkinliklerinin anlamını açıklığa kavuşturmak için data-copy-event-label özelliğini ayarlayın.
data-copy-event-label
<pre class="devsite-terminal devsite-click-to-copy" data-copy-event-label="unique_identifier"></pre>
Kopyalamak için tıklama ve erişilebilirlik
Varsayılan olarak, tıkla ve kopyala kod örneklerinin her biri için tıkla ve kopyala düğmesinde aynı etiket bulunur: "Kod örneğini kopyala." Bu durum, birden fazla kod örneğinin bulunduğu sayfalarda ekran okuyucuyla gezinmeyi zorlaştırabilir.
Erişilebilirlik için, tıklayıp kopyalanacak her kod örneğine, her kod örneğinin içeriğini kısa ve öz bir şekilde etiketleyen bir data-label özelliği ekleyin. Her kod örneği etiketi, sayfadaki diğer tüm kod örneği etiketlerine göre benzersiz olmalıdır. Bu etiket, "Kod örneğini kopyala" ifadesinin yanı sıra ekran okuyucular tarafından da okunur.
{:.devsite-click-to-copy}
<pre class="devsite-click-to-copy" data-label="Installation script"></pre>
Açık/koyu açma/kapatma düğmesini devre dışı bırakma
Bir kod bloğundaki açık/koyu açma/kapatma düğmesini devre dışı bırakmak için devsite-disable-code-toggle sınıfını ekleyin:
<pre class="prettyprint devsite-disable-code-toggle"></pre>
Markdown kod bloğundaki açık/koyu açma/kapatma düğmesini devre dışı bırakmak için kod çitlerini açtığınızda devsite-disable-code-toggle sınıfını uygulamak üzere aşağıdaki söz dizimini kullanın:
``` {.devsite-disable-code-toggle}
Varsayılan olarak koyu kod
Bir kod bloğunun varsayılan olarak koyu kod stilini kullanmasını sağlamak için devsite-dark-code-default sınıfını ekleyin:
<pre class="prettyprint devsite-dark-code-default"></pre>
Satır kaydırmayı zorlama
Varsayılan olarak, <pre> bloğundaki 100 karakteri aşan satırlar için yatay kaydırma çubuğu eklenir.
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)
Bu davranışı geçersiz kılmak ve satırları sarmalamak için <pre> bloğuna class="wrap-code" ekleyin.
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>
Terminal kodu
Terminal kodunu gösterirken yazarların yeni bir terminal komutunu belirtmek için $ simgesini kullanmasını öneririz. $ öğesini kullanıcının kopyalanan koduna eklemeden bir <pre> kapsayıcısının içeriğinin başına eklemek için <pre> öğesine class="devsite-terminal" uygulayın.
adb devices
Kod:
<pre class="devsite-terminal devsite-click-to-copy">
adb devices
</pre>
Tek bir terminal kodu satırının başına $ eklemek için, söz konusu satırı içeren <code> öğesine class="devsite-terminal" uygulayın. Bu taktiği, birden fazla satırda $ bulunan durumlar için kullanın.
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
Özel bir ön ek kullanmak için sınıfın uygulandığı <pre> veya <code> öğesine data-terminal-prefix özelliğini ekleyin.
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>
"devsite-terminal" sınıfı kullanılarak eklenen öneklerin tüm örnekleri, kullanıcının kopyalanan kodundan hariç tutulur.
Vurgulama
<pre> bloğu içindeki içeriğe dikkat çekmek için <strong> simgesini kullanın. Bunu yaptığınızda, <strong> bloğu tarafından vurgulanan bölümü vurgulamak için çevredeki içerikler daha açık bir renge döner. Örneğin:
// ...
// ...
// ...
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>
Değiştirilebilir değişkenler
<pre> içindeki değiştirilebilir metinler için <var> ve alt çizgiyle büyük harf kullanın. Örneğin:
dev_appserver.py YOUR_APP_DIR.
Kod:
<pre>dev_appserver.py <var>YOUR_APP_DIR</var></pre>
Markdown'da <var> etiketlerini tırnak içine alın ve etiketleri kaçırmak için Jinja ifade parantezlerini kullanın. Örneğin: VAR_NAME.
Örneğin:
Hello, my name is YOUR_NAME.
Kod:
```
Hello, my name is YOUR_NAME.
```
Markdown
Kod bloklarını Markdown kullanarak da belirtebilirsiniz. Bunun için kodu 4 boşluk girintili hale getirebilir veya 3 ters tırnak işaretiyle (```) çevreleyebilirsiniz.
Örneğin:
```
print("hello world")
```
print("hello world")
her ikisi de
<pre class="prettyprint notranslate" translate="no"><code>
print("hello world")
</code></pre>
Girintili kod blokları yerine çitle çevrili kod blokları kullanıyorsanız güzelleştirmenin anlayacağı dili de belirtebilirsiniz:
print("hello world")
şu olur:
<pre class="prettyprint notranslate lang-py" translate="no"><code>
print("hello world")
</code></pre>
Tanınan dillerin listesini Prettify dokümanlarında bulabilirsiniz.
Dil açıkça none olarak ayarlanmazsa Markdown aracılığıyla oluşturulan tüm kod bloklarına güzel yazdırma sınıfı uygulanır. Özel özellikleri kullanarak kod bloğuna ek sınıflar ekleyebilirsiniz:
The program completed successfully.
şu olur:
<pre class="devsite-disable-click-to-copy"><code>The program completed successfully.
</code></pre>