> ## Documentation Index
> Fetch the complete documentation index at: https://craft-support.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# 코드

> 구문 하이라이팅 및 서식 옵션을 사용해 코드 블록을 추가합니다.

Craft의 코드 에디터를 사용하면 문서 내에서 바로 코드를 생성·편집·표시할 수 있습니다. 30개 이상의 프로그래밍 언어를 지원하며, 대부분의 언어에 대해 구문 하이라이팅을 제공하므로 기술 문서 작성에 안정적이고 깔끔한 환경을 제공합니다.

<img src="https://mintcdn.com/craft-support/crCjmeXe7Wo0HfP_/images/write-and-edit/code/en/content/code-editor-overview.png?fit=max&auto=format&n=crCjmeXe7Wo0HfP_&q=85&s=3917ee7a689ab58b810fe902536a91d4" alt="Code editor overview" width="957" height="824" data-path="images/write-and-edit/code/en/content/code-editor-overview.png" />

<img src="https://mintcdn.com/craft-support/crCjmeXe7Wo0HfP_/images/write-and-edit/code/en/content/code-editor-fullscreen.png?fit=max&auto=format&n=crCjmeXe7Wo0HfP_&q=85&s=458581dfeb0edfd991c68d1c73e80f98" alt="Code editor fullscreen mode" width="999" height="881" data-path="images/write-and-edit/code/en/content/code-editor-fullscreen.png" />

## 코드 블록 삽입

문서의 아무 위치에 다음 방법 중 하나로 코드 블록을 추가할 수 있습니다:

* `/code` 를 입력한 다음 **Insert Code Block**을 선택합니다.
* 오른쪽 sidebar의 Insert 메뉴에서 **Code Block**을 선택합니다.
* 코드 블록을 삽입하려면 백틱 3개 ` ``` ` 를 입력합니다.

<img src="https://mintcdn.com/craft-support/crCjmeXe7Wo0HfP_/images/write-and-edit/code/en/content/insert-code-block.png?fit=max&auto=format&n=crCjmeXe7Wo0HfP_&q=85&s=487f2ed842a6c236003b0d02fcd4b9a2" alt="Inserting a code block" width="1256" height="1101" data-path="images/write-and-edit/code/en/content/insert-code-block.png" />

## 프로그래밍 언어 변경

적절한 구문 하이라이팅을 위해 프로그래밍 언어를 설정합니다:

<Steps>
  <Step>
    블록 오른쪽 상단의 \*\*three-dot menu (⋯)\*\*을 클릭합니다
  </Step>

  <Step>
    **Select Language**(코딩 아이콘)을 클릭합니다
  </Step>

  <Step>
    목록에서 다른 언어를 선택합니다.
  </Step>

  <Step>
    지원되는 언어에서는 구문 하이라이팅이 즉시 적용됩니다.
  </Step>
</Steps>

<img src="https://mintcdn.com/craft-support/crCjmeXe7Wo0HfP_/images/write-and-edit/code/en/content/select-language.png?fit=max&auto=format&n=crCjmeXe7Wo0HfP_&q=85&s=8d145448ae29857836217cf627895393" alt="Selecting a programming language" width="999" height="881" data-path="images/write-and-edit/code/en/content/select-language.png" />

## 테마 사용자화

코드 블록의 시각적 스타일을 변경하려면:

<Steps>
  <Step>
    블록 오른쪽 상단의 \*\*three-dot menu (⋯)\*\*을 클릭합니다
  </Step>

  <Step>
    **Select Theme**(브러시 아이콘)을 클릭합니다
  </Step>

  <Step>
    목록에서 원하는 테마를 선택합니다.
  </Step>
</Steps>

<img src="https://mintcdn.com/craft-support/crCjmeXe7Wo0HfP_/images/write-and-edit/code/en/content/select-theme.png?fit=max&auto=format&n=crCjmeXe7Wo0HfP_&q=85&s=371bb814edd2b827a47e4f7ed5a19622" alt="Selecting a code theme" width="999" height="881" data-path="images/write-and-edit/code/en/content/select-theme.png" />

## 주요 기능

업데이트된 Craft 코드 에디터에는 다음과 같은 개선 사항이 포함되어 있습니다:

* **Craft AI 어시스턴트 통합** - AI와 함께 문서를 떠나지 않고 코드 작업을 할 수 있습니다.
* **Full screen mode** - 산만함 없이 코드에 집중할 수 있습니다.
* **No character limit** - 긴 코드 샘플을 온전히 지원합니다.
* **Line wrapping** - 긴 줄의 가독성이 향상됩니다.
* **Improved stability** - 코드 블록이 사라지던 이전 문제들이 해결되었습니다.
* **Clean, redesigned full-screen mode** - macOS에서 향상된 경험을 제공합니다.

이러한 변경으로 기술 콘텐츠의 작성 및 유지 관리가 더욱 원활하고 예측 가능해집니다.

## 제한 사항

코드 에디터는 아직 발전 중입니다. 다음 동작을 참고하십시오:

* **Math formulas**: 언어 선택기로 코드 블록을 수학 공식으로 변환할 수 없습니다. 수학 공식은 `/menu → Insert TeX formula` 를 사용하거나 Insert sidebar에서 명시적으로 삽입해야 합니다.
* **Fixed height**: 문서 보기의 코드 블록은 고정 높이이며 스크롤되지 않습니다. 이는 페이지 스크롤과 블록 스크롤 간의 충돌을 방지합니다.
* **No syntax highlighting** for these languages: Ada, Dart, Haskell, Julia, Matlab, Objective-C, Perl, Prolog, Scala, VB.NET
* **No auto-complete**: 자동 완성 기능(예: 닫는 태그 자동 추가 등)은 지원되지 않습니다. 이 기능들은 저희 코드 에디터의 기반인 Runestone의 일부가 아니기 때문입니다.
* **Performance on older devices**: 동일 페이지에 많은 코드 블록이 추가되면 성능이 약한 기기에서는 성능 저하가 있을 수 있습니다. 다만 전체 성능은 상당히 개선되었습니다.
* **Spellcheck**: 맞춤법 검사 동작은 Craft가 아니라 Safari 또는 시스템 설정으로 제어됩니다.

<Info title="AI 어시스턴트">
  Craft AI 어시스턴트는 문서를 떠나지 않고도 코드 블록에서 직접 디버깅, 설명, 리팩토링을 도와줍니다.
</Info>