Se usó la API de Cloud Translation para traducir esta página.

Código

Usa <code> para el código intercalado y <pre class="prettyprint"> para los bloques de código. El resaltado de sintaxis funciona bien en muchos lenguajes, incluidos los ejemplos de XML y HTML. Puedes omitir class="prettyprint" si el resaltado de sintaxis no es adecuado para el ejemplo, como en el caso de los comandos de la consola o las URLs de extremos de servicio largos.

No excedas los 100 caracteres de código por línea en un bloque <pre>. En DevSite, exactamente 100 caracteres de código caben en pantallas más grandes antes de que se active el desplazamiento horizontal. En pantallas más pequeñas, los bloques de código se desplazarán horizontalmente cuando sea necesario. 80 caracteres caben en casi cualquier 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>

Por lo general, omites class="prettyprint" de <pre> para los comandos de la consola. Por ejemplo:

dev_appserver.py -a $HOST --debug demos/getstarted

<pre>dev_appserver.py -a $HOST --debug demos/getstarted</pre>

Haz clic para copiar

Aparecerá automáticamente un botón para hacer clic y copiar en todos los bloques de código con la clase prettyprint.

Para usar la función de hacer clic para copiar en un bloque de código o en otro elemento que no tenga la clase prettyprint, agrega la clase 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>

Cómo inhabilitar la función de hacer clic para copiar en un bloque de código

Para inhabilitar la función de hacer clic para copiar en un bloque de código prettyprint, agrega la clase 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>

Para inhabilitar el clic para copiar en un bloque de código de Markdown, usa la siguiente sintaxis cuando abras el corchete de código para aplicar el estilo devsite-disable-click-to-copy:

{:.devsite-disable-click-to-copy}

Cómo inhabilitar la función de hacer clic para copiar en parte de un bloque de código

Para evitar copiar parte de un bloque de código, agrega una etiqueta <span> con una clase de no-select alrededor de la parte que no deseas copiar:

<span class="no-select">C:\> </span>ping google.com

En el siguiente ejemplo, tanto la copia manual como el botón para hacer clic y copiar omiten la parte con anotaciones:

C:\\> ping google.com

Eventos de estadísticas de clic para copiar

Para desambiguar los eventos de estadísticas de clic para copiar, establece el atributo data-copy-event-label.

data-copy-event-label

<pre class="devsite-terminal devsite-click-to-copy" data-copy-event-label="unique_identifier"></pre>

Haz clic para copiar y accesibilidad

De forma predeterminada, todas las muestras de código que se pueden copiar con un clic tienen la misma etiqueta para cada botón: "Copiar muestra de código". En las páginas con varias muestras de código, esto puede dificultar la navegación con un lector de pantalla.

Para mejorar la accesibilidad, proporciona a cada muestra de código que se pueda copiar con un clic un atributo data-label que etiquete de forma breve y concisa el contenido de cada muestra de código. Cada etiqueta de ejemplo de código debe ser única en relación con todas las demás etiquetas de ejemplo de código de la página. Los lectores de pantalla leen esta etiqueta, además de "Copiar ejemplo de código". {:.devsite-click-to-copy} <pre class="devsite-click-to-copy" data-label="Installation script"></pre>

Inhabilita el botón de activación de modo claro/oscuro

Para inhabilitar el botón de activación de modo claro/oscuro en un bloque de código, agrega la clase devsite-disable-code-toggle:

<pre class="prettyprint devsite-disable-code-toggle"></pre>

Para inhabilitar el botón de activación de modo oscuro/claro en un bloque de código de Markdown, usa la siguiente sintaxis cuando abras el código para aplicar la clase devsite-disable-code-toggle:

``` {.devsite-disable-code-toggle}

Código oscuro de forma predeterminada

Para que un bloque de código use el diseño de código oscuro de forma predeterminada, agrega la clase devsite-dark-code-default:

<pre class="prettyprint devsite-dark-code-default"></pre>

Cómo forzar el ajuste de líneas

De forma predeterminada, se agrega una barra de desplazamiento horizontal para las líneas de un bloque <pre> que superen los 100 caracteres.

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)

Para anular este comportamiento y unir las líneas, agrega class="wrap-code" al bloque <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)

Código:

<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>

Código de la terminal

Cuando se muestra código para la terminal, recomendamos que los autores usen $ para indicar un nuevo comando de la terminal. Para agregar $ al principio del contenido de un contenedor <pre> sin agregarlo al código copiado del usuario, aplica class="devsite-terminal" al elemento <pre>.

adb devices

Código:

<pre class="devsite-terminal devsite-click-to-copy">
adb devices
</pre>

Para agregar $ al principio de una sola línea de código de la terminal, aplica class="devsite-terminal" al elemento <code> que contiene esa línea. Usa esta táctica para los casos con $ en varias líneas.

gradle init --type basic
mkdir -p src/main/java src/main/resources

Código:

<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

Para usar un prefijo personalizado, agrega el atributo data-terminal-prefix al elemento <pre> o <code> en el que se aplicó la clase.

Install-Package Google.Apis.Calendar.v3

Código:

<pre class="devsite-terminal devsite-click-to-copy" data-terminal-prefix="PM&gt; ">
Install-Package Google.Apis.Calendar.v3
</pre>

Todas las instancias del prefijo agregadas con la clase "devsite-terminal" se excluirán del código copiado del usuario.

Iluminación

Usa <strong> para llamar la atención sobre el contenido dentro de un bloque <pre>. De esta manera, se aclarará el contenido circundante para enfatizar la sección destacada por el bloque <strong>. Por ejemplo:

// ...
// ...
// ...
for (i = 0; i < 10; i++) {
    printf("Counting %d\n", i);

    if (i % 3 == 0) {
        someFunc(i);
    }
}
// ...
// ...
// ...

Código:

<pre class="prettyprint">
// ...
// ...
// ...
for (i = 0; i < 10; i++) {
    printf("Counting %d\n", i);

    <strong>if (i % 3 == 0) {
        someFunc(i);
    }</strong>
}
// ...
// ...
// ...
</pre>

Variables reemplazables

Usa <var> y mayúsculas con guiones bajos para el texto reemplazable dentro de <pre>. Por ejemplo:

dev_appserver.py YOUR_APP_DIR.

Código:

<pre>dev_appserver.py <var>YOUR_APP_DIR</var></pre>

En Markdown, encierra las etiquetas <var> entre comillas y usa corchetes de expresión de Jinja para escapar las etiquetas, como esta: VAR_NAME.

Por ejemplo:

Hello, my name is YOUR_NAME.

Código:

    ```
    Hello, my name is YOUR_NAME.
    ```

Markdown

También puedes especificar bloques de código con Markdown con sangría de 4 espacios o con 3 acentos graves (```).

Por ejemplo:

    ```
    print("hello world")
    ```

    print("hello world")

ambos se convierten en

<pre class="prettyprint notranslate" translate="no"><code>
print("hello world")
</code></pre>

Si usas bloques de código delimitados (y no bloques de código con sangría), también puedes especificar el idioma para que el formato de texto enriquecido lo comprenda:

print("hello world")

se convierte en

<pre class="prettyprint notranslate lang-py" translate="no"><code>
print("hello world")
</code></pre>

Puedes encontrar la lista de idiomas reconocidos en la documentación de Prettify.

A todos los bloques de código creados a través de Markdown se les aplicará la clase prettyprint, a menos que se establezca explícitamente el lenguaje como ninguno. Puedes agregar clases adicionales al bloque de código con atributos personalizados:

The program completed successfully.

se convierte en

<pre class="devsite-disable-click-to-copy"><code>The program completed successfully.
</code></pre>