이 페이지는 Cloud Translation API를 통해 번역되었습니다.

코드

인라인 코드에는 <code>를 사용하고 코드 블록에는 <pre class="prettyprint">를 사용하세요. 구문 강조 표시는 XML 및 HTML 예시를 비롯한 다양한 언어에 적합합니다. 콘솔 명령어 또는 긴 서비스 엔드포인트 URL과 같이 예시에서 구문 강조 표시가 적절하지 않은 경우 class="prettyprint"를 생략할 수 있습니다.

<pre> 블록의 한 줄당 코드가 100자(영문 기준)를 초과하지 않도록 합니다. DevSite에서는 가로 스크롤이 시작되기 전에 정확히 100자 길이의 코드가 더 큰 화면에 표시됩니다. 작은 화면에서는 필요한 경우 코드 블록이 가로로 스크롤됩니다. 80자(영문 기준)는 거의 모든 노트북에 표시됩니다.

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

일반적으로 콘솔 명령어의 경우 <pre>에서 class="prettyprint"를 생략합니다. 예를 들면 다음과 같습니다.

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

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

클릭하여 복사

클릭하여 복사 버튼은 prettyprint 클래스가 있는 모든 코드 블록에 자동으로 표시됩니다.

클래스 prettyprint가 없는 코드 블록이나 다른 요소에서 클릭 투 복사를 사용하려면 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>

코드 블록에서 클릭하여 복사 사용 중지

prettyprint 코드 블록에서 클릭 투 복사를 사용 중지하려면 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>

Markdown 코드 블록에서 클릭 투 복사를 사용 중지하려면 코드 울타리를 열어 devsite-disable-click-to-copy 스타일을 적용할 때 다음 구문을 사용하세요.

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

코드 블록 일부에서 클릭하여 복사 사용 중지

코드 블록의 일부가 복사되지 않도록 하려면 복사하지 않을 부분 주위에 no-select 클래스가 있는 <span> 태그를 추가합니다.

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

아래 예에서는 수동 복사와 클릭 투 복사 버튼 모두 주석이 달린 부분을 무시합니다.

C:\\> ping google.com

클릭 투 복사 애널리틱스 이벤트

클릭 투 복사 분석 이벤트의 모호성을 해소하려면 data-copy-event-label 속성을 설정하세요.

data-copy-event-label

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

클릭하여 복사 및 접근성

기본적으로 모든 클릭 투 복사 코드 샘플에는 클릭 투 복사 버튼마다 동일한 라벨인 '코드 샘플 복사'가 지정됩니다. 코드 샘플이 여러 개 있는 페이지에서는 스크린 리더로 탐색하기가 어려울 수 있습니다.

접근성을 위해 클릭하여 복사할 수 있는 각 코드 샘플에 각 코드 샘플의 콘텐츠를 간단하고 간결하게 라벨링하는 data-label 속성을 제공합니다. 각 코드 샘플 라벨은 페이지의 다른 모든 코드 샘플 라벨과 비교하여 고유해야 합니다. 이 라벨은 '코드 샘플 복사' 외에도 화면 리더에서 읽습니다. {:.devsite-click-to-copy} <pre class="devsite-click-to-copy" data-label="Installation script"></pre>

밝은 모드/어두운 모드 전환 사용 중지

코드 블록에서 밝은 모드/어두운 모드 전환 버튼을 사용 중지하려면 devsite-disable-code-toggle 클래스를 추가합니다.

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

Markdown 코드 블록에서 밝은 모드/어두운 모드 전환 버튼을 사용 중지하려면 코드 울타리를 열어 devsite-disable-code-toggle 클래스를 적용할 때 다음 구문을 사용하세요.

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

기본적으로 어두운 코드

코드 블록이 기본적으로 어두운 코드 스타일을 사용하도록 하려면 devsite-dark-code-default 클래스를 추가합니다.

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

줄바꿈 강제

기본적으로 <pre> 블록에서 100자(영문 기준)를 초과하는 줄에는 가로 스크롤바가 추가됩니다.

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> 블록에 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 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>

터미널 코드

터미널용 코드를 설명할 때는 $를 사용하여 새 터미널 명령어를 표시하는 것이 좋습니다. 사용자의 복사된 코드에 추가하지 않고 $를 <pre> 컨테이너의 콘텐츠 시작 부분에 추가하려면 <pre> 요소에 class="devsite-terminal"를 적용합니다.

adb devices

코드:

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

터미널 코드의 한 줄 시작 부분에 $를 추가하려면 해당 줄이 포함된 <code> 요소에 class="devsite-terminal"를 적용합니다. 여러 줄에 $가 있는 경우에 이 전술을 사용합니다.

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

코드:

<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

맞춤 접두사를 사용하려면 클래스가 적용된 <pre> 또는 <code> 요소에 data-terminal-prefix 속성을 추가합니다.

Install-Package Google.Apis.Calendar.v3

코드:

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

'devsite-terminal' 클래스를 사용하여 추가된 접두사의 모든 인스턴스는 사용자의 복사된 코드에서 제외됩니다.

강조표시

<strong>를 사용하여 <pre> 블록 내의 콘텐츠에 주의를 환기합니다. 이렇게 하면 주변 콘텐츠가 밝아져 <strong> 블록으로 강조 표시된 섹션이 강조됩니다. 예를 들면 다음과 같습니다.

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

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

코드:

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

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

교체 가능한 변수

<pre> 내에서 대체 가능한 텍스트에는 <var> 및 대문자와 밑줄을 사용합니다. 예를 들면 다음과 같습니다.

dev_appserver.py YOUR_APP_DIR.

코드:

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

Markdown에서는 <var> 태그를 따옴표로 묶고 Jinja 표현식 대괄호를 사용하여 태그를 이스케이프 처리합니다(예: VAR_NAME).

예를 들면 다음과 같습니다.

Hello, my name is YOUR_NAME.

코드:

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

마크다운

마크다운을 사용하여 코드 블록을 지정할 수도 있습니다. 코드의 들여쓰기를 4칸으로 설정하거나 억음 부호 3개 (```)로 묶습니다.

예를 들면 다음과 같습니다.

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

    print("hello world")

둘 다

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

들여쓰기된 코드 블록이 아닌 울타리로 묶인 코드 블록을 사용하는 경우 pprint가 이를 이해할 수 있는 언어를 지정할 수도 있습니다.

print("hello world")

다음과 같이 변환됩니다.

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

인식되는 언어 목록은 Prettify 문서에서 확인할 수 있습니다.

언어를 none으로 명시적으로 설정하지 않는 한 Markdown을 통해 만든 모든 코드 블록에는 prettyprint 클래스가 적용됩니다. 커스텀 속성을 사용하여 코드 블록에 클래스를 추가할 수 있습니다.

The program completed successfully.

다음과 같이 변환됩니다.

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