AIO 編輯器
CodeBlock
程式碼區塊（lowlight 語法高亮）。
程式碼區塊，自製變體：基於 CodeBlockLowlight，renderHTML 直接內嵌 hljs 高亮結構——輸出的 HTML 在非編輯情境（郵件、前台）不需再跑一次高亮。
- config key：
AioEditorCoreExtension.CodeBlock - 來源：自製（基於
@tiptap/extension-code-block-lowlight＋lowlight）
載入途徑：跟隨 features 宣告：CodeBlock。按鈕未宣告但要保留能力 → include: [AioEditorCoreExtension.CodeBlock]。
排除影響（exclude: [CodeBlock]）： 按鈕 CodeBlock 將自動隱藏； 以 extraExtensions 補上同名 extension（codeBlock）即為替換。
選項
| 欄位 | 型別 | 預設值 | 說明 |
|---|---|---|---|
lowlight | ReturnType<typeof createLowlight> | createLowlight(all) | 語法高亮引擎；預設載入 highlight.js 全語言，追求 bundle 可自建僅含所需語言之實例 |
languageClassPrefix | string | 'language-' | code 元素之語言 class 前綴 |
defaultLanguage | string 或 null | null | 未指定語言時之預設；null 為自動偵測 |
exitOnTripleEnter | boolean | true | 連按三次 Enter 離開區塊 |
exitOnArrowDown | boolean | true | 區塊尾按 ↓ 離開 |
enableTabIndentation | boolean | true | 區塊內 Tab 輸入縮排 |
tabSize | number | 4 | Tab 縮排寬度 |
HTMLAttributes | Record<string, any> | { class: 'hljs' } | 渲染輸出時附加之 HTML 屬性 |
Commands
| Command | 說明 |
|---|---|
setCodeBlock({ language? }) | 轉為程式碼區塊 |
toggleCodeBlock({ language? }) | 切換程式碼區塊 |
快捷鍵
| 按鍵 | 行為 |
|---|---|
Mod-Alt-C | 切換程式碼區塊 |
覆寫範例
const config: AioEditorConfig = { extensionsConfig: { CodeBlock: { defaultLanguage: 'typescript', tabSize: 2 } }}輸入規則：行首 ```（可接語言名）自動轉為程式碼區塊。位於區塊內時會出現 CodeBlock bubble。