HTML 코드 블록

개요

HTML 문서에서 소스 코드 표시를 커스터마이즈할 수 있는 다양한 옵션이 있습니다. 예를 들면 다음과 같습니다.

Knitr 또는 Jupyter에서 실행된 코드의 일부 또는 전체 숨기기
실행된 코드의 접기(기본값은 숨김, 사용자가 펼칠 수 있음)
가로 공간을 넘치는 코드 처리
문서를 생성한 마크다운 파일의 소스 보기
코드 모양을 제어하는 문법 강조 테마와 기타 옵션
코드 블록에 클립보드 복사 버튼 제공
downlit 패키지를 사용해 코드 블록의 함수에 대한 온라인 문서 링크 생성(현재는 Knitr 엔진에서만 동작)

이 옵션들의 사용 방법은 아래에 자세히 설명되어 있습니다.

코드 숨기기

많은 문서에서 동적 출력을 생성하는 실행 코드 전체를 숨기고 싶을 수 있습니다. 문서의 execute 옵션에 echo: false를 지정하면 됩니다. 예:

---
title: "My Document"
execute:
  echo: false
jupyter: python3
---

이 옵션은 코드 블록 단위로 덮어쓸 수 있습니다. 예:

```{python}
#| echo: true

import matplotlib.pyplot as plt
plt.plot([1,2,3,4])
plt.show()
```

코드 블록 옵션은 블록 상단의 특수 주석에 포함됩니다(상단에서 #|로 시작하는 줄이 옵션으로 처리됩니다).

코드 접기

code-fold 옵션을 사용하면 코드를 포함하되 HTML <details> 태그로 기본 숨김 처리합니다. 예를 들어 Code 버튼을 클릭하면 다음 플롯을 만든 코드를 볼 수 있습니다.

Code

library(ggplot2)
dat <- data.frame(cond = rep(c("A", "B"), each=10),
                  xvar = 1:20 + rnorm(20,sd=3),
                  yvar = 1:20 + rnorm(20,sd=3))

ggplot(dat, aes(x=xvar, y=yvar)) +
  geom_point(shape=1) + 
  geom_smooth()

여기서는 code-fold: true와 함께 요약 텍스트를 커스터마이즈했습니다(기본값은 위에 보이는 “Code”).

format:
  html:
    code-fold: true
    code-summary: "Show the code"

code-fold에 사용할 수 있는 값은 다음과 같습니다.

값	동작
`false`	접기 없음(기본값)
`true`	코드 접기(초기 숨김)
`show`	코드 접기(초기 표시)

code-fold와 code-summary 청크 속성으로 청크별 제어도 가능합니다.

```{r}
#| code-fold: true
#| code-summary: "Show the code"
```

코드 오버플로

소스 코드 너비가 가로 표시 공간을 넘치는 경우가 있습니다. 기본적으로 코드 블록에 가로 스크롤바가 표시됩니다. 스크롤바를 원하지 않으면 긴 줄을 줄바꿈하도록 설정할 수 있습니다.

전역 기본 동작은 code-overflow 옵션으로 설정합니다. 예:

format:
  html:
    code-overflow: wrap

code-overflow에 사용할 수 있는 값은 다음과 같습니다.

옵션	설명
`scroll`	가로 폭을 넘는 코드 블록에 스크롤 적용(기본값, `white-space: pre`에 해당)
`wrap`	가로 폭을 넘는 코드 줄을 줄바꿈(`white-space: pre-wrap`에 해당)

전역 기본값은 코드 블록 단위로 덮어쓸 수 있습니다. 계산 셀에서는 code-overflow 셀 옵션으로 설정합니다.

```{python}
#| code-overflow: wrap

# very long line of code....
```

정적 코드 블록에는 .code-overflow-scroll 또는 .code-overflow-wrap CSS 클래스를 추가합니다.

```{.python .code-overflow-wrap}
# very long line of code....
```

이 옵션과 무관하게, 인쇄된 HTML 출력에서는 코드가 항상 줄바꿈됩니다(그렇지 않으면 페이지 경계에서 잘리기 때문).

코드 도구

문서 헤더에 Code 메뉴를 포함해 독자가 소스 코드와 상호작용할 수 있는 도구를 제공할 수 있습니다. code-tools: true로 활성화합니다.

format:
  html:
    code-fold: true
    code-tools: true

접힌 코드 블록이 포함된 문서에서는 Code 메뉴에서 접힌 코드 표시/숨기기와 문서 전체 소스 보기 옵션을 제공합니다.

렌더링된 Quarto 문서 헤더 스크린샷. code-fold와 code-tools를 true로 설정한 결과로, 페이지 제목 오른쪽에 'Code' 드롭다운 메뉴가 보이며 아래로 향한 삼각형이 있다. 메뉴가 열려 있고 'Hide All Code', 'Show All Code', 'View Source' 항목이 세로로 나열되어 있다.

이 문서는 옵션에 code-tools: true를 지정했으므로, 상단 메인 헤더 옆에 Code 메뉴가 보일 것입니다.

code-tools의 하위 옵션으로 제공할 기능과 “Code” 캡션 텍스트를 제어할 수 있습니다. 예를 들어 아래는 “View Source”만 제공하고(코드 표시 전환 없음) 코드 메뉴 캡션을 숨깁니다.

format:
  html: 
    code-tools:
      source: true
      toggle: false
      caption: none

기본적으로 소스 코드는 문서에 포함되어 다음과 같은 팝업 창으로 표시됩니다.

이 웹페이지 위에 'Source Code' 팝업 창이 표시된 스크린샷. 팝업에는 이 페이지를 작성한 원시 마크다운과 R 코드가 들어 있으며, 오른쪽 상단에 닫기용 'X'가 있다.

source 값에 URL을 지정할 수도 있습니다.

format:
  html: 
    code-tools:
      source: https://github.com/quarto-dev/quarto-web/blob/main/index.md

프로젝트 내에서 repo-url 옵션을 지정했다면 repo만 사용해 소스 파일에 대한 올바른 링크를 생성할 수 있습니다.

format:
  html: 
    code-tools:
      source: repo

표준 HTML 테마를 비활성화한 경우(예: theme: none) code-tools 옵션을 사용할 수 없습니다.

모양

기본적으로 코드 블록은 현재 테마에서 가져온 색상의 왼쪽 테두리로 렌더링됩니다. 배경색과 왼쪽 테두리를 제어하는 간단한 옵션으로 코드 청크 모양을 커스터마이즈할 수 있습니다. 옵션은 활성/비활성을 위한 불리언이거나 유효한 CSS 색상 문자열(또는 SASS 변수 이름)일 수 있습니다.

다음은 코드 블록의 기본 모양(code-block-bg: true)입니다.

회색 배경을 가진 코드 블록.

code-block-border-left 옵션을 사용해 왼쪽 테두리만 적용할 수도 있습니다.

code-block-border-left: true

왼쪽 테두리에 회색 세로 줄이 있는 코드 블록. 배경은 없다.

배경과 테두리를 함께 적용하고 왼쪽 테두리 색상을 커스터마이즈할 수도 있습니다.

code-block-bg: true
code-block-border-left: "#31BAE9"

회색 배경과 왼쪽 테두리에 파란 세로 줄이 있는 코드 블록.

코드 파일명

파일 내용을 문서화할 때 코드가 어떤 파일과 연관되는지 명확히 하고 싶다면 코드 블록에 filename 속성을 사용하세요.

예를 들어 다음 코드가 있다고 하면,

```{.python filename="matplotlib.py"}
import matplotlib.pyplot as plt
plt.plot([1,23,2,4])
plt.show()
```

다음과 같은 HTML 출력이 생성됩니다.

matplotlib.py

import matplotlib.pyplot as plt
plt.plot([1,23,2,4])
plt.show()

HTML 이외 포맷에서도 파일명이 표시되지만, 코드 블록 위에 굵게 표시됩니다.

문법 강조

Pandoc는 언어 이름이 지정된 fenced code blocks의 문법을 자동으로 강조합니다. 예:

```python
1 + 1
```

Pandoc는 140개 이상의 언어에 대해 문법 강조를 제공합니다(전체 목록은 quarto pandoc --list-highlight-languages 출력 참고). 지원되지 않는 언어의 강조 표시가 필요하다면 언어 이름으로 default를 사용하면 됩니다.

highlight-style로 지원되는 테마 중 하나를 지정해 코드 하이라이팅 스타일을 설정할 수 있습니다. 이 테마들은 “adaptive”로, 웹사이트 테마에 따라 다크/라이트 모드가 자동으로 전환됩니다. 다크/라이트 모드를 모두 제공하는 사이트에 잘 맞도록 설계되었습니다.

a11y
arrow
atom-one
ayu
breeze
github
gruvbox

표준 Pandoc 테마도 모두 사용할 수 있습니다.

pygments
tango
espresso
zenburn
kate
monochrome
breezedark
haddock

추가로 확장 테마도 제공됩니다. 예:

dracula
monokai
nord
oblivion
printing
radical
solarized
vim-dark

highlight-style 옵션은 사용할 테마를 결정합니다. 예:

highlight-style: github

하이라이팅 테마는 단일 정의를 제공하거나, 밝은 배경용과 어두운 배경용 두 정의를 제공할 수 있습니다. 두 정의가 있을 때 Quarto는 코드 청크 배경의 밝기에 따라 적절한 스타일을 자동 선택합니다. 자동 선택을 피하려면 전체 이름(예: atom-one-dark)을 지정하면 됩니다.

기본적으로 코드는 접근성을 고려한 arrow 테마로 강조됩니다. 어두운 배경에서 접근성을 높이도록 설계된 arrow-dark 테마도 추가했습니다.

라이트/다크 테마 예시는 다음과 같습니다.

Arrow (라이트)

Arrow (다크)

Ayu (라이트)

Ayu (다크)

커스텀 하이라이팅

내장 문법 강조 테마 외에도, 유효한 테마 파일 경로(KDE XML 문법 강조 설명 기반)를 제공해 자신만의 문법 강조를 지정할 수 있습니다. 하이라이팅은 skylighting으로 구현됩니다.

예:

---
highlight-style: custom.theme
---

또한 adaptive 테마를 제공하려면 라이트와 다크 테마 파일을 함께 지정할 수 있습니다.

---
highlight-style:
  light: custom-light.theme
  dark: custom-dark.theme
---

adaptive 텍스트 하이라이팅 테마와 마찬가지로, 라이트/다크 highlight-style을 제공하면 테마 파일에 지정된 배경색은 무시되고 전체 테마의 배경색이 적용됩니다.

코드 주석

코드 블록과 실행 코드 셀의 코드 줄에 주석을 추가할 수 있습니다. 자세한 내용은 Code Annotation을 참고하세요.

줄 번호

코드 블록 옆에 줄 번호를 표시하려면 code-line-numbers 옵션을 추가하세요. 예:

format:
  html:
    code-line-numbers: true

줄 번호가 있는 코드 블록은 다음과 같이 표시됩니다.

import matplotlib.pyplot as plt
plt.plot([1,23,2,4])
plt.show()

code-line-numbers 속성으로 개별 코드 블록에 줄 번호를 켤 수도 있습니다. 예:

``` {.python code-line-numbers="true"}
import matplotlib.pyplot as plt
plt.plot([1,23,2,4])
plt.show()
```

실행 가능한 블록

계산 문서는 실행 가능한 코드 블록(실제로 실행되어 출력이 렌더링 문서에 포함되는 코드)을 포함하는 방법을 설명합니다. 여기서는 이를 반복하지 않고, 실행 문법을 보여주는 코드 블록(예: 튜토리얼 작성)을 포함하는 방법을 다룹니다.

문서용(비실행) 펜스 코드 블록을 포함하고 싶은 경우가 많습니다. 이때 언어(예: python, r 등)를 한 쌍이 아니라 두 쌍의 중괄호로 감싸면 됩니다. 예:

```{{python}}
1 + 1
```

그러면 문서에는 다음과 같이 출력됩니다.

```{python}
1 + 1
```

여러 코드 블록과 다른 마크다운이 포함된 예시를 보여주려면, 예시 전체를 4개의 백틱으로 감싸고, 내부 코드 블록에는 두 겹 중괄호 문법을 사용하세요. 예:

````
---
title: "My document"
---

Some markdown content.

```{{python}}
1 + 1
```

Some additional markdown content.

````

복사 버튼

아래 코드 블록에 마우스를 올리면 오른쪽 상단에 복사 아이콘이 나타납니다.

library(dygraphs)
dygraph(nhtemp, main = "New Haven Temperatures") %>% 
  dyRangeSelector(dateWindow = c("1920-01-01", "1960-01-01"))

이 동작은 기본으로 활성화되어 있으며 code-copy 옵션으로 설정할 수 있습니다.

format:
  html:
    code-copy: false

code-copy에 사용할 수 있는 값은 다음과 같습니다.

`hover`	호버 시 버튼 표시(기본값)
`true`	코드 복사 버튼 항상 표시
`false`	코드 복사 버튼 표시 안 함

코드 링크

code-link 옵션은 코드 블록의 함수에 온라인 문서 링크를 추가합니다.

format:
  html:
    code-link: true

코드 링크는 현재 knitr 엔진에서만 구현되어 있습니다(downlit 패키지 사용). downlit의 제한으로 인해 code-line-numbers 또는 code-annotations가 true이면 코드 링크가 동작하지 않습니다.

--- title: "HTML 코드 블록" format: html: code-tools: true execute: warning: false --- ## 개요 HTML 문서에서 소스 코드 표시를 커스터마이즈할 수 있는 다양한 옵션이 있습니다. 예를 들면 다음과 같습니다. 1. [Knitr](https://yihui.name/knitr) 또는 [Jupyter](https://jupyter.org)에서 실행된 코드의 일부 또는 전체 숨기기 2. 실행된 코드의 접기(기본값은 숨김, 사용자가 펼칠 수 있음) 3. 가로 공간을 넘치는 코드 처리 4. 문서를 생성한 마크다운 파일의 소스 보기 5. 코드 모양을 제어하는 문법 강조 테마와 기타 옵션 6. 코드 블록에 클립보드 복사 버튼 제공 7. [downlit](https://downlit.r-lib.org/) 패키지를 사용해 코드 블록의 함수에 대한 온라인 문서 링크 생성(현재는 Knitr 엔진에서만 동작) 이 옵션들의 사용 방법은 아래에 자세히 설명되어 있습니다. ## 코드 숨기기 많은 문서에서 동적 출력을 생성하는 실행 코드 전체를 숨기고 싶을 수 있습니다. 문서의 `execute` 옵션에 `echo: false`를 지정하면 됩니다. 예: ``` yaml --- title: "My Document" execute: echo: false jupyter: python3 --- ``` 이 옵션은 코드 블록 단위로 덮어쓸 수 있습니다. 예: ```{python} #| echo: true import matplotlib.pyplot as plt plt.plot([1,2,3,4]) plt.show() ``` 코드 블록 옵션은 블록 상단의 특수 주석에 포함됩니다(상단에서 `#|`로 시작하는 줄이 옵션으로 처리됩니다). ## 코드 접기 `code-fold` 옵션을 사용하면 코드를 포함하되 HTML `<details>` 태그로 기본 숨김 처리합니다. 예를 들어 **Code** 버튼을 클릭하면 다음 플롯을 만든 코드를 볼 수 있습니다. ```{r} #| code-fold: true library(ggplot2) dat <- data.frame(cond = rep(c("A", "B"), each=10), xvar = 1:20 + rnorm(20,sd=3), yvar = 1:20 + rnorm(20,sd=3)) ggplot(dat, aes(x=xvar, y=yvar)) + geom_point(shape=1) + geom_smooth() ``` 여기서는 `code-fold: true`와 함께 요약 텍스트를 커스터마이즈했습니다(기본값은 위에 보이는 "Code"). ``` yaml format: html: code-fold: true code-summary: "Show the code" ``` `code-fold`에 사용할 수 있는 값은 다음과 같습니다. | 값 | 동작 | |---------|------------------------------| | `false` | 접기 없음(기본값) | | `true` | 코드 접기(초기 숨김) | | `show` | 코드 접기(초기 표시) | `code-fold`와 `code-summary` 청크 속성으로 청크별 제어도 가능합니다. ```{r} #| code-fold: true #| code-summary: "Show the code" ``` ## 코드 오버플로 소스 코드 너비가 가로 표시 공간을 넘치는 경우가 있습니다. 기본적으로 코드 블록에 가로 스크롤바가 표시됩니다. 스크롤바를 원하지 않으면 긴 줄을 줄바꿈하도록 설정할 수 있습니다. 전역 기본 동작은 `code-overflow` 옵션으로 설정합니다. 예: ``` yaml format: html: code-overflow: wrap ``` `code-overflow`에 사용할 수 있는 값은 다음과 같습니다. | 옵션 | 설명 | |------------------|------------------------------------------------------| | `scroll` | 가로 폭을 넘는 코드 블록에 스크롤 적용(기본값, `white-space: pre`에 해당) | | `wrap` | 가로 폭을 넘는 코드 줄을 줄바꿈(`white-space: pre-wrap`에 해당) | 전역 기본값은 코드 블록 단위로 덮어쓸 수 있습니다. 계산 셀에서는 `code-overflow` 셀 옵션으로 설정합니다. ```{python} #| code-overflow: wrap # very long line of code.... ``` 정적 코드 블록에는 `.code-overflow-scroll` 또는 `.code-overflow-wrap` CSS 클래스를 추가합니다. ```` python ```{.python .code-overflow-wrap} # very long line of code.... ``` ```` 이 옵션과 무관하게, 인쇄된 HTML 출력에서는 코드가 항상 줄바꿈됩니다(그렇지 않으면 페이지 경계에서 잘리기 때문). ## 코드 도구 문서 헤더에 **Code** 메뉴를 포함해 독자가 소스 코드와 상호작용할 수 있는 도구를 제공할 수 있습니다. `code-tools: true`로 활성화합니다. ``` yaml format: html: code-fold: true code-tools: true ``` 접힌 코드 블록이 포함된 문서에서는 **Code** 메뉴에서 접힌 코드 표시/숨기기와 문서 전체 소스 보기 옵션을 제공합니다. ![](images/code-tools-01.png){.border fig-alt="렌더링된 Quarto 문서 헤더 스크린샷. code-fold와 code-tools를 true로 설정한 결과로, 페이지 제목 오른쪽에 'Code' 드롭다운 메뉴가 보이며 아래로 향한 삼각형이 있다. 메뉴가 열려 있고 'Hide All Code', 'Show All Code', 'View Source' 항목이 세로로 나열되어 있다."} 이 문서는 옵션에 `code-tools: true`를 지정했으므로, 상단 메인 헤더 옆에 **Code** 메뉴가 보일 것입니다. `code-tools`의 하위 옵션으로 제공할 기능과 "Code" 캡션 텍스트를 제어할 수 있습니다. 예를 들어 아래는 "View Source"만 제공하고(코드 표시 전환 없음) 코드 메뉴 캡션을 숨깁니다. ``` yaml format: html: code-tools: source: true toggle: false caption: none ``` 기본적으로 소스 코드는 문서에 포함되어 다음과 같은 팝업 창으로 표시됩니다. ![](images/code-tools-source.png){fig-alt="이 웹페이지 위에 'Source Code' 팝업 창이 표시된 스크린샷. 팝업에는 이 페이지를 작성한 원시 마크다운과 R 코드가 들어 있으며, 오른쪽 상단에 닫기용 'X'가 있다."} `source` 값에 URL을 지정할 수도 있습니다. ``` yaml format: html: code-tools: source: https://github.com/quarto-dev/quarto-web/blob/main/index.md ``` 프로젝트 내에서 `repo-url` 옵션을 지정했다면 `repo`만 사용해 소스 파일에 대한 올바른 링크를 생성할 수 있습니다. ``` yaml format: html: code-tools: source: repo ``` 표준 HTML 테마를 비활성화한 경우(예: `theme: none`) `code-tools` 옵션을 사용할 수 없습니다. ## 모양 기본적으로 코드 블록은 현재 테마에서 가져온 색상의 왼쪽 테두리로 렌더링됩니다. 배경색과 왼쪽 테두리를 제어하는 간단한 옵션으로 코드 청크 모양을 커스터마이즈할 수 있습니다. 옵션은 활성/비활성을 위한 불리언이거나 유효한 CSS 색상 문자열(또는 SASS 변수 이름)일 수 있습니다. 다음은 코드 블록의 기본 모양(`code-block-bg: true`)입니다. ![](images/code-bg.png){fig-alt="회색 배경을 가진 코드 블록."} `code-block-border-left` 옵션을 사용해 왼쪽 테두리만 적용할 수도 있습니다. ``` yaml code-block-border-left: true ``` ![](images/code-default.png){fig-alt="왼쪽 테두리에 회색 세로 줄이 있는 코드 블록. 배경은 없다."} 배경과 테두리를 함께 적용하고 왼쪽 테두리 색상을 커스터마이즈할 수도 있습니다. ``` yaml code-block-bg: true code-block-border-left: "#31BAE9" ``` ![](images/code-custom.png){fig-alt="회색 배경과 왼쪽 테두리에 파란 세로 줄이 있는 코드 블록."} ## 코드 파일명 {#code-filename} 파일 내용을 문서화할 때 코드가 어떤 파일과 연관되는지 명확히 하고 싶다면 코드 블록에 `filename` 속성을 사용하세요. 예를 들어 다음 코드가 있다고 하면, ```` markdown ```{.python filename="matplotlib.py"} import matplotlib.pyplot as plt plt.plot([1,23,2,4]) plt.show() ``` ```` 다음과 같은 HTML 출력이 생성됩니다. ```{.python filename="matplotlib.py"} import matplotlib.pyplot as plt plt.plot([1,23,2,4]) plt.show() ``` HTML 이외 포맷에서도 파일명이 표시되지만, 코드 블록 위에 굵게 표시됩니다. ## 문법 강조 Pandoc는 언어 이름이 지정된 [fenced code blocks](https://pandoc.org/MANUAL.html#fenced-code-blocks)의 문법을 자동으로 강조합니다. 예: ```python 1 + 1 ``` Pandoc는 140개 이상의 언어에 대해 문법 강조를 제공합니다(전체 목록은 `quarto pandoc --list-highlight-languages` 출력 참고). 지원되지 않는 언어의 강조 표시가 필요하다면 언어 이름으로 `default`를 사용하면 됩니다. `highlight-style`로 지원되는 테마 중 하나를 지정해 코드 하이라이팅 스타일을 설정할 수 있습니다. 이 테마들은 "adaptive"로, 웹사이트 테마에 따라 다크/라이트 모드가 자동으로 전환됩니다. 다크/라이트 모드를 모두 제공하는 사이트에 잘 맞도록 설계되었습니다. - a11y - arrow - atom-one - ayu - breeze - github - gruvbox 표준 Pandoc 테마도 모두 사용할 수 있습니다. - pygments - tango - espresso - zenburn - kate - monochrome - breezedark - haddock 추가로 확장 테마도 제공됩니다. 예: - dracula - monokai - nord - oblivion - printing - radical - solarized - vim-dark `highlight-style` 옵션은 사용할 테마를 결정합니다. 예: ``` yaml highlight-style: github ``` 하이라이팅 테마는 단일 정의를 제공하거나, 밝은 배경용과 어두운 배경용 두 정의를 제공할 수 있습니다. 두 정의가 있을 때 Quarto는 코드 청크 배경의 밝기에 따라 적절한 스타일을 자동 선택합니다. 자동 선택을 피하려면 전체 이름(예: `atom-one-dark`)을 지정하면 됩니다. 기본적으로 코드는 접근성을 고려한 `arrow` 테마로 강조됩니다. 어두운 배경에서 접근성을 높이도록 설계된 `arrow-dark` 테마도 추가했습니다. 라이트/다크 테마 예시는 다음과 같습니다. #### Arrow (라이트) ![](images/arrow.png){fig.alt="Arrow(라이트) 테마를 보여주는 코드 블록."} #### Arrow (다크) ![](images/arrow-dark.png){fig.alt="Arrow(다크) 테마를 보여주는 코드 블록."} #### Ayu (라이트) ![](images/ayu.png){fig.alt="Ayu(라이트) 테마를 보여주는 코드 블록."} #### Ayu (다크) ![](images/ayu-dark.png){.preview-image fig.alt="Ayu(다크) 테마를 보여주는 코드 블록."} ### 커스텀 하이라이팅 내장 문법 강조 테마 외에도, 유효한 테마 파일 경로(KDE XML 문법 강조 설명 기반)를 제공해 자신만의 문법 강조를 지정할 수 있습니다. 하이라이팅은 [skylighting](https://github.com/jgm/skylighting)으로 구현됩니다. 예: ``` yaml --- highlight-style: custom.theme --- ``` 또한 adaptive 테마를 제공하려면 라이트와 다크 테마 파일을 함께 지정할 수 있습니다. ``` yaml --- highlight-style: light: custom-light.theme dark: custom-dark.theme --- ``` adaptive 텍스트 하이라이팅 테마와 마찬가지로, 라이트/다크 `highlight-style`을 제공하면 테마 파일에 지정된 배경색은 무시되고 전체 테마의 배경색이 적용됩니다. {{< include _code-annotation.md >}} ## 줄 번호 {#line-numbers} 코드 블록 옆에 줄 번호를 표시하려면 `code-line-numbers` 옵션을 추가하세요. 예: ``` yaml format: html: code-line-numbers: true ``` 줄 번호가 있는 코드 블록은 다음과 같이 표시됩니다. ``` {.python code-line-numbers="true"} import matplotlib.pyplot as plt plt.plot([1,23,2,4]) plt.show() ``` `code-line-numbers` 속성으로 개별 코드 블록에 줄 번호를 켤 수도 있습니다. 예: ```` python ``` {.python code-line-numbers="true"} import matplotlib.pyplot as plt plt.plot([1,23,2,4]) plt.show() ``` ```` ## 실행 가능한 블록 [계산](/docs/get-started/computations/index.qmd) 문서는 실행 가능한 코드 블록(실제로 실행되어 출력이 렌더링 문서에 포함되는 코드)을 포함하는 방법을 설명합니다. 여기서는 이를 반복하지 않고, 실행 문법을 보여주는 코드 블록(예: 튜토리얼 작성)을 포함하는 방법을 다룹니다. {{< include ../computations/_unexecuted-blocks.md >}} ## 복사 버튼 아래 코드 블록에 마우스를 올리면 오른쪽 상단에 복사 아이콘이 나타납니다. ```{r eval=FALSE} library(dygraphs) dygraph(nhtemp, main = "New Haven Temperatures") %>% dyRangeSelector(dateWindow = c("1920-01-01", "1960-01-01")) ``` 이 동작은 기본으로 활성화되어 있으며 `code-copy` 옵션으로 설정할 수 있습니다. ``` yaml format: html: code-copy: false ``` `code-copy`에 사용할 수 있는 값은 다음과 같습니다. | | | |---------|--------------------------------| | `hover` | 호버 시 버튼 표시(기본값) | | `true` | 코드 복사 버튼 항상 표시 | | `false` | 코드 복사 버튼 표시 안 함 | ## 코드 링크 `code-link` 옵션은 코드 블록의 함수에 온라인 문서 링크를 추가합니다. ``` yaml format: html: code-link: true ``` 코드 링크는 현재 knitr 엔진에서만 구현되어 있습니다([downlit](https://downlit.r-lib.org) 패키지 사용). downlit의 제한으로 인해 `code-line-numbers` 또는 `code-annotations`가 `true`이면 코드 링크가 동작하지 않습니다.