> ## 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="程式碼編輯器概覽" 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="程式碼編輯器全螢幕模式" 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**
* 輸入三個反引號 ` ``` ` 以插入程式碼區塊

<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="插入程式碼區塊" 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="選取程式語言" 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="選取程式碼主題" width="999" height="881" data-path="images/write-and-edit/code/en/content/select-theme.png" />

## 主要功能

Craft 更新後的程式碼編輯器包含多項改進：

* **Craft AI 助理整合** - 可直接在程式碼上使用 AI 幫助
* **全螢幕模式** - 聚焦程式碼，減少干擾
* **無字元限制** - 支援長篇程式碼範例
* **自動換行** - 長行更易閱讀
* **穩定性改善** - 已修正過去程式碼區塊消失的問題
* **乾淨、重新設計的全螢幕模式** - 在 macOS 上提供更佳體驗

這些改進讓撰寫與維護技術內容更順暢且更可預期。

## 限制事項

程式碼編輯器仍在持續演進中，請注意下列行為：

* **數學公式** - 無法透過語言選擇器將程式碼區塊轉換為數學公式。數學公式必須明確使用 `/menu → Insert TeX formula` 或從 Insert sidebar 插入。
* **固定高度** - 文件檢視中的程式碼區塊具有固定高度，且不會捲動。此設計可避免頁面捲動與區塊捲動之間的衝突。
* **下列語言不支援語法高亮**：Ada, Dart, Haskell, Julia, Matlab, Objective-C, Perl, Prolog, Scala, VB.NET
* **不支援自動補完** - 如自動加入關閉標籤等自動補完功能目前不支援，因為這些功能非 Runestone（我們程式碼編輯器的基礎）的一部分。
* **舊款裝置效能** - 如果同一頁面新增大量程式碼區塊，較不強的裝置可能會影響效能，儘管整體效能已有顯著提升。
* **拼寫檢查** - 拼寫檢查行為由 Safari 或系統設定控制，非由 Craft 控制。

<Info title="AI 助理">
  Craft 的 AI 助理可以直接在你的程式碼區塊中協助你除錯、說明或重構程式碼，無需離開你的文件。
</Info>