> ## 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 を Click します。
  </Step>

  <Step>
    Click on **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 を Click します。
  </Step>

  <Step>
    Click on **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**: 次の言語では構文ハイライトが利用できません：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>