diff --git a/packages/desktop/src/renderer/src/components/editorWithTabs/editor.vue b/packages/desktop/src/renderer/src/components/editorWithTabs/editor.vue
index 33ba5ec73c..88434680dd 100644
--- a/packages/desktop/src/renderer/src/components/editorWithTabs/editor.vue
+++ b/packages/desktop/src/renderer/src/components/editorWithTabs/editor.vue
@@ -2,13 +2,6 @@
   <div
     class="editor-wrapper"
     :class="[{ typewriter: typewriter, focus: focus, source: sourceCode }]"
-    :style="{
-      lineHeight: lineHeight,
-      fontSize: `${fontSize}px`,
-      'font-family': editorFontFamily
-        ? `${editorFontFamily}, ${defaultFontFamily}`
-        : `${defaultFontFamily}`
-    }"
     :dir="textDirection"
   >
     <div
@@ -122,7 +115,7 @@ import { exportStyledHTML, type HeaderFooterPart } from '@/util/exportHtml'
 import { applyCursor, isIndexCursor } from '@/util/cursor'
 import EditorSearch from '../search/index.vue'
 import bus from '@/bus'
-import { DEFAULT_EDITOR_FONT_FAMILY } from '@/config'
+import { DEFAULT_EDITOR_FONT_FAMILY, DEFAULT_CODE_FONT_FAMILY } from '@/config'
 import notice from '@/services/notification'
 import Printer from '@/services/printService'
 import { SpellcheckerLanguageCommand } from '@/commands'
@@ -132,7 +125,7 @@ import { moveImageToFolder, uploadImage } from '@/util/fileSystem'
 import { guessClipboardFilePath } from '@/util/clipboard'
 import { getCssForOptions, getHtmlToc, type PdfCssOptions, type HtmlTocOptions } from '@/util/pdf'
 import { resolveTocHeadingElement } from '@/util/tocNavigation'
-import { addCommonStyle, setEditorWidth, setWrapCodeBlocks } from '@/util/theme'
+import { addCommonStyle, setEditorWidth } from '@/util/theme'
 import { usePreferencesStore } from '@/store/preferences'
 import { useEditorStore } from '@/store/editor'
 import { useProjectStore } from '@/store/project'
@@ -267,6 +260,9 @@ const { projectTree } = storeToRefs(projectStore)
 
 // Component state
 const defaultFontFamily = DEFAULT_EDITOR_FONT_FAMILY
+const resolveEditorFont = (family: string): string =>
+  family ? `${family}, ${defaultFontFamily}` : defaultFontFamily
+const resolveCodeFont = (family: string): string => `${family}, ${DEFAULT_CODE_FONT_FAMILY}`
 const selectionChange = ref<unknown>(null)
 const editor = ref<MuyaInstance>(null)
 const isShowClose = ref(false)
@@ -552,13 +548,19 @@ watch(focus, (value) => {
 
 watch(fontSize, (value, oldValue) => {
   if (value !== oldValue && editor.value) {
-    editor.value.setFont({ fontSize: value })
+    editor.value.setOptions({ fontSize: value })
   }
 })
 
 watch(lineHeight, (value, oldValue) => {
   if (value !== oldValue && editor.value) {
-    editor.value.setFont({ lineHeight: value })
+    editor.value.setOptions({ lineHeight: value })
+  }
+})
+
+watch(editorFontFamily, (value, oldValue) => {
+  if (value !== oldValue && editor.value) {
+    editor.value.setOptions({ editorFontFamily: resolveEditorFont(value) })
   }
 })
 
@@ -572,7 +574,7 @@ watch(preferLooseListItem, (value, oldValue) => {
 
 watch(tabSize, (value, oldValue) => {
   if (value !== oldValue && editor.value) {
-    editor.value.setTabSize(value)
+    editor.value.setOptions({ tabSize: value })
   }
 })
 
@@ -660,8 +662,8 @@ watch(editorLineWidth, (value, oldValue) => {
 })
 
 watch(wrapCodeBlocks, (value, oldValue) => {
-  if (value !== oldValue) {
-    setWrapCodeBlocks(value)
+  if (value !== oldValue && editor.value) {
+    editor.value.setOptions({ wrapCodeBlocks: value })
   }
 })
 
@@ -714,7 +716,9 @@ watch(autoCheck, (value, oldValue) => {
 })
 
 watch(codeFontSize, (value, oldValue) => {
-  if (value !== oldValue) {
+  if (value !== oldValue && editor.value) {
+    editor.value.setOptions({ codeFontSize: value })
+    // Source-mode CodeMirror is a separate surface muya doesn't own.
     addCommonStyle({
       codeFontSize: value,
       codeFontFamily: codeFontFamily.value,
@@ -730,7 +734,9 @@ watch(codeBlockLineNumbers, (value, oldValue) => {
 })
 
 watch(codeFontFamily, (value, oldValue) => {
-  if (value !== oldValue) {
+  if (value !== oldValue && editor.value) {
+    editor.value.setOptions({ codeFontFamily: resolveCodeFont(value) })
+    // Source-mode CodeMirror is a separate surface muya doesn't own.
     addCommonStyle({
       codeFontSize: codeFontSize.value,
       codeFontFamily: value,
@@ -1695,6 +1701,10 @@ onMounted(() => {
     tabSize: tabSize.value,
     fontSize: fontSize.value,
     lineHeight: lineHeight.value,
+    editorFontFamily: resolveEditorFont(editorFontFamily.value),
+    codeFontSize: codeFontSize.value,
+    codeFontFamily: resolveCodeFont(codeFontFamily.value),
+    wrapCodeBlocks: wrapCodeBlocks.value,
     codeBlockLineNumbers: codeBlockLineNumbers.value,
     listIndentation: listIndentation.value,
     frontmatterType: frontmatterType.value,
@@ -1917,7 +1927,6 @@ onMounted(() => {
 
   document.addEventListener('keyup', keyup)
 
-  setWrapCodeBlocks(wrapCodeBlocks.value)
   setEditorWidth(editorLineWidth.value)
 })
 
diff --git a/packages/desktop/src/renderer/src/prefComponents/spellchecker/index.vue b/packages/desktop/src/renderer/src/prefComponents/spellchecker/index.vue
index 7b35a22ab8..6198e2ff92 100644
--- a/packages/desktop/src/renderer/src/prefComponents/spellchecker/index.vue
+++ b/packages/desktop/src/renderer/src/prefComponents/spellchecker/index.vue
@@ -223,6 +223,14 @@ const handleDeleteClick = (selectedItem: CustomDictionaryWord): void => {
 .pref-spellchecker .el-table tr {
   background: var(--editorBgColor);
 }
+/* Element Plus colours table cells with its own grey --el-text-color-regular,
+   which the app never themes, so the custom-dictionary words rendered as
+   low-contrast grey on every theme. Use the theme's editor text colour. */
+.pref-spellchecker .el-table,
+.pref-spellchecker .el-table th.el-table__cell,
+.pref-spellchecker .el-table td.el-table__cell {
+  color: var(--editorColor);
+}
 .pref-spellchecker .el-table th.el-table__cell.is-leaf,
 .pref-spellchecker .el-table th,
 .pref-spellchecker .el-table td {
@@ -240,11 +248,14 @@ const handleDeleteClick = (selectedItem: CustomDictionaryWord): void => {
 .pref-spellchecker .el-table__fixed::before {
   background: var(--tableBorderColor);
 }
-.pref-spellchecker .el-table__body tr.hover-row.current-row > td,
-.pref-spellchecker .el-table__body tr.hover-row.el-table__row--striped.current-row > td,
-.pref-spellchecker .el-table__body tr.hover-row.el-table__row--striped > td,
-.pref-spellchecker .el-table__body tr.hover-row > td {
-  background: var(--selectionColor);
+/* Theme Element Plus's table colour variables so the active theme is honoured
+   instead of EP's light defaults: the hovered row (--el-fill-color-light, a
+   near-white bar that hides the text) and the header background
+   (--el-fill-color-blank / white, which left the fixed "Options" column header
+   a white block on dark themes). */
+.pref-spellchecker .el-table {
+  --el-table-row-hover-bg-color: var(--selectionColor);
+  --el-table-header-bg-color: var(--editorBgColor);
 }
 .pref-spellchecker .el-table .el-table__cell {
   padding: 2px 0;
diff --git a/packages/desktop/src/renderer/src/util/theme.ts b/packages/desktop/src/renderer/src/util/theme.ts
index 00c5d22f96..fdba7d49d3 100644
--- a/packages/desktop/src/renderer/src/util/theme.ts
+++ b/packages/desktop/src/renderer/src/util/theme.ts
@@ -197,26 +197,6 @@ export const addThemeStyle = (theme: string): void => {
   }
 }
 
-export const setWrapCodeBlocks = (value: boolean): void => {
-  const CODE_WRAP_STYLE_ID = 'ag-code-wrap'
-  let result = ''
-  if (value) {
-    result =
-      '.mu-code-block .mu-code { display: block; white-space: pre-wrap; word-break: break-word; overflow: hidden; }'
-  } else {
-    result =
-      '.mu-code-block .mu-code { display: block; white-space: pre; word-break: break-word; overflow: auto; }'
-  }
-  let styleEle = document.querySelector(`#${CODE_WRAP_STYLE_ID}`) as HTMLStyleElement | null
-  if (!styleEle) {
-    styleEle = document.createElement('style')
-    styleEle.setAttribute('id', CODE_WRAP_STYLE_ID)
-    document.head.appendChild(styleEle)
-  }
-
-  styleEle.innerHTML = result
-}
-
 export const setEditorWidth = (value: string): void => {
   const EDITOR_WIDTH_STYLE_ID = 'editor-width'
   let result = ''
@@ -256,13 +236,7 @@ export const addCommonStyle = (options: CommonStyleOptions): void => {
   }
 
   sheet.innerHTML = `${scrollbarStyle}
-span code,
-td code,
-th code,
-code,
-code[class*="language-"],
-.CodeMirror,
-.mu-code-block {
+.CodeMirror {
 font-family: ${codeFontFamily}, ${DEFAULT_CODE_FONT_FAMILY};
 font-size: ${codeFontSize}px;
 }
diff --git a/packages/desktop/test/e2e/code-block-wrap.spec.ts b/packages/desktop/test/e2e/code-block-wrap.spec.ts
index 4a414c12d8..30e7d7b93b 100644
--- a/packages/desktop/test/e2e/code-block-wrap.spec.ts
+++ b/packages/desktop/test/e2e/code-block-wrap.spec.ts
@@ -5,15 +5,11 @@ import { launchWithMarkdown } from './helpers'
 // Post-migration (muyajs -> @muyajs/core) coverage backfill for the
 // "Wrap Code Blocks" and "Code Block Line Numbers" editor preferences.
 //
-// The wrap preference is implemented as an injected <style id="ag-code-wrap">
-// (packages/desktop/src/renderer/src/util/theme.ts::setWrapCodeBlocks). Issue
-// #4421 changed the selector from the legacy DOM class to
-// `.mu-code-block .mu-code`. If that selector ever stops matching the rendered
-// @muyajs/core code DOM (`pre.mu-code-block > code.mu-code`), the style silently
-// no-ops — the computed white-space below would never flip. These tests prove
-// the selector still matches the live engine DOM and that the round-trip
-// (renderer -> main store -> broadcast -> Pinia watcher -> setWrapCodeBlocks /
-// muya.setOptions(forceRender)) takes effect live.
+// The wrap preference is implemented via muya.setOptions({ wrapCodeBlocks }),
+// which toggles a .mu-code-wrap class on the editor root. Muya's stylesheet
+// then applies `white-space: pre-wrap` to .mu-code-wrap .mu-code-block .mu-code.
+// These tests prove the round-trip (renderer -> main store -> broadcast ->
+// Pinia watcher -> muya.setOptions) takes effect live.
 //
 // The actual visual wrapping / horizontal scroll behaviour is not asserted here
 // (that remains manual); we assert the load-bearing computed style + class.
@@ -58,8 +54,8 @@ test.describe('Code block wrap + line-numbers preferences', () => {
 
   // Item 99: wrap preference toggles white-space on .mu-code-block .mu-code.
   test('wrapCodeBlocks toggles computed white-space on .mu-code-block .mu-code', async() => {
-    // Default preference is wrapCodeBlocks: false, so on boot setWrapCodeBlocks
-    // injects `white-space: pre`. Establish the baseline first.
+    // Default preference is wrapCodeBlocks: false, so the editor root has no
+    // .mu-code-wrap class and white-space is pre. Establish the baseline first.
     await expect.poll(() => readWhiteSpace(page), { timeout: 10000 }).toBe('pre')
 
     // Enable wrapping -> selector should resolve to `pre-wrap`.
@@ -113,7 +109,7 @@ test.describe('Code block wrap + line-numbers preferences', () => {
       { timeout: 10000 }
     )
 
-    // The newly-rendered .mu-code must still pick up the #ag-code-wrap style.
+    // The newly-rendered .mu-code must still pick up the muya wrap CSS.
     await expect.poll(() => readWhiteSpace(page), { timeout: 10000 }).toBe('pre-wrap')
 
     // Restore defaults so the suite leaves no global preference state behind.
diff --git a/packages/desktop/test/unit/specs/editor-theme-style.spec.ts b/packages/desktop/test/unit/specs/editor-theme-style.spec.ts
index 07b48e45b4..f9edf72a23 100644
--- a/packages/desktop/test/unit/specs/editor-theme-style.spec.ts
+++ b/packages/desktop/test/unit/specs/editor-theme-style.spec.ts
@@ -9,7 +9,7 @@ vi.hoisted(() => {
   w.window.path ??= { sep: '/' }
 })
 
-import { addCommonStyle, setWrapCodeBlocks, setEditorWidth } from '@/util/theme'
+import { addCommonStyle, setEditorWidth } from '@/util/theme'
 import { COMMON_STYLE_ID, DEFAULT_CODE_FONT_FAMILY } from '@/config'
 
 const styleHtml = (id: string) =>
@@ -23,26 +23,28 @@ describe('theme.ts style injection helpers', () => {
     document.body.className = ''
   })
 
-  // Items 196, 210 — addCommonStyle injects code font onto the engine .mu-code-block.
+  // Items 196, 210 — addCommonStyle injects code font onto the source-mode .CodeMirror selector.
   describe('addCommonStyle', () => {
-    it('injects code font-family/size onto the .mu-code-block selector list', () => {
+    it('injects code font-family/size onto the .CodeMirror selector', () => {
       addCommonStyle({ codeFontFamily: 'Courier New', codeFontSize: 24 })
 
       const css = styleHtml(COMMON_STYLE_ID)
-      // selector list targets the engine block class
-      expect(css).toContain('.mu-code-block')
+      // selector targets source-mode CodeMirror only (muya owns code-block font via --mu-code-* vars)
+      expect(css).toContain('.CodeMirror')
+      expect(css).not.toContain('.mu-code-block')
       // family is the requested font followed by the default fallback chain
       expect(css).toContain(`font-family: Courier New, ${DEFAULT_CODE_FONT_FAMILY};`)
       // size is the numeric value suffixed with px
       expect(css).toContain('font-size: 24px;')
     })
 
-    it('targets the engine .mu-code-block class (not a legacy ag-* class)', () => {
+    it('targets only .CodeMirror (no legacy ag-* or mu-code-block classes)', () => {
       addCommonStyle({ codeFontFamily: 'Courier New', codeFontSize: 14 })
 
       const css = styleHtml(COMMON_STYLE_ID)
-      expect(css).toContain('.mu-code-block')
+      expect(css).toContain('.CodeMirror')
       expect(css).not.toContain('.ag-code-block')
+      expect(css).not.toContain('.mu-code-block')
     })
 
     it('prepends the webkit scrollbar hide rule when hideScrollbar is true', () => {
@@ -71,41 +73,6 @@ describe('theme.ts style injection helpers', () => {
     })
   })
 
-  // Item 197 — setWrapCodeBlocks toggles pre-wrap vs pre on .mu-code-block .mu-code.
-  describe('setWrapCodeBlocks', () => {
-    const WRAP_STYLE_ID = 'ag-code-wrap'
-
-    it('uses white-space: pre-wrap and overflow: hidden when wrapping is enabled', () => {
-      setWrapCodeBlocks(true)
-
-      const css = styleHtml(WRAP_STYLE_ID)
-      expect(css).toContain('.mu-code-block .mu-code {')
-      expect(css).toContain('white-space: pre-wrap;')
-      expect(css).toContain('overflow: hidden;')
-    })
-
-    it('uses white-space: pre and overflow: auto when wrapping is disabled', () => {
-      setWrapCodeBlocks(false)
-
-      const css = styleHtml(WRAP_STYLE_ID)
-      expect(css).toContain('.mu-code-block .mu-code {')
-      expect(css).toContain('white-space: pre;')
-      expect(css).toContain('overflow: auto;')
-      // the disabled rule must not leak the wrapped values
-      expect(css).not.toContain('white-space: pre-wrap;')
-    })
-
-    it('replaces the rule in the same single style element when toggled true -> false', () => {
-      setWrapCodeBlocks(true)
-      setWrapCodeBlocks(false)
-
-      expect(styleCount(WRAP_STYLE_ID)).toBe(1)
-      const css = styleHtml(WRAP_STYLE_ID)
-      expect(css).toContain('white-space: pre;')
-      expect(css).not.toContain('white-space: pre-wrap;')
-    })
-  })
-
   // Item 209 — setEditorWidth validates input and injects --editorAreaWidth override.
   describe('setEditorWidth', () => {
     const WIDTH_STYLE_ID = 'editor-width'
diff --git a/packages/muya/CLAUDE.md b/packages/muya/CLAUDE.md
index 4bcb060e9a..9728c84cde 100644
--- a/packages/muya/CLAUDE.md
+++ b/packages/muya/CLAUDE.md
@@ -72,6 +72,29 @@ Each subfolder is a floating tool/menu (inline format toolbar, image tools, para
 
 `src/index.ts` is the published entrypoint. The `exports` map in `package.json` points `.` at `./src/index.ts` during development and `./lib/es/index.js` after publish — keep this file the single export hub.
 
+### Appearance contract (typography)
+
+muya renders its own content's typography from two equivalent inputs — pass
+options, or override the CSS custom properties directly (pure-CSS theming).
+The variables are set on the editor root (`.mu-editor`) and consumed by the
+bundled stylesheets; each has a default baked into the CSS, so passing nothing
+renders the standalone defaults.
+
+| Option (`IMuyaOptions`) | CSS variable | Default | Applies to |
+|---|---|---|---|
+| `fontSize` (number, px) | `--mu-font-size` | `16px` | `.mu-editor` base text |
+| `lineHeight` (number) | `--mu-line-height` | `1.6` | `.mu-editor` base text |
+| `editorFontFamily` (string) | `--mu-font-family` | Open Sans stack | `.mu-editor` base text |
+| `codeFontSize` (number, px) | `--mu-code-font-size` | `90%` | `.mu-code-block` only |
+| `codeFontFamily` (string) | `--mu-code-font-family` | DejaVu Sans Mono stack | `.mu-code-block` only |
+| `wrapCodeBlocks` (boolean) | — (`.mu-code-wrap` root class) | off (`pre`) | code-block line wrapping |
+
+Inline code (`code.mu-inline-rule`) is deliberately NOT driven by these — it
+keeps its relative `0.8em` / mono sizing. Editor column width
+(`--editor-area-width`) and the colour palette (`--editor-color-*`) are
+separate, pre-existing contracts owned by the host. All runtime changes go
+through `muya.setOptions({...})`.
+
 ## Conventions enforced by tooling
 
 - **ESLint** (`eslint.config.mjs`, antfu base) adds:
diff --git a/packages/muya/e2e/tests/options/code-font.spec.ts b/packages/muya/e2e/tests/options/code-font.spec.ts
new file mode 100644
index 0000000000..4d13e99b64
--- /dev/null
+++ b/packages/muya/e2e/tests/options/code-font.spec.ts
@@ -0,0 +1,97 @@
+import type { Page } from '@playwright/test';
+import { expect, test } from '../fixtures/muya';
+
+/**
+ * Code-block font options reaching the rendered code, and the line-number
+ * gutter re-measuring when those options change.
+ *
+ * The code text is rendered as `<code class="mu-code"><span
+ * class="mu-codeblock-content">…`. The `<code>` element's user-agent
+ * `font-family: monospace` overrides the inherited block font, so
+ * `--mu-code-font-family` (set on the editor root) only reached `.mu-code-block`
+ * (the `<pre>`) and never the text — changing the code font had no visible
+ * effect. `.mu-code-block .mu-code { font-family: inherit }` re-opens the
+ * cascade. `font-size` was unaffected because the UA `<code>` rule sets no
+ * size, so it kept inheriting.
+ *
+ * Separately, the line-number gutter is positioned by measuring each line's
+ * pixel top (`repositionLineNumberSpans`), which only re-ran on text edits — a
+ * code-font / size / wrap change left the numbers misaligned until `setOptions`
+ * re-measured them.
+ */
+
+// The host boots with `codeBlockLineNumbers: true`, so the gutter renders.
+const CODE_MD = '```js\nconst a = 1\nconst b = 2\nconst c = 3\n```\n';
+
+// Measured `top` of the 3rd line number (the gutter is positioned, not derived).
+const thirdLineTop = (page: Page) => page.evaluate(() => {
+    const spans = document.querySelectorAll<HTMLElement>('.mu-line-numbers-rows span');
+    return Number.parseFloat(spans[2]?.style.top || '0');
+});
+
+test.describe('code-block font options', () => {
+    test('codeFontFamily reaches the code text element', async ({ page }) => {
+        await page.evaluate(md => window.muya!.setContent(md), CODE_MD);
+        await page.waitForSelector('.mu-codeblock-content');
+
+        const family = () => page.evaluate(() =>
+            getComputedStyle(document.querySelector('.mu-codeblock-content')!).fontFamily);
+
+        // Default: the bundled DejaVu stack inherited from the block (not the
+        // browser's bare `monospace`).
+        await expect.poll(family).toContain('DejaVu Sans Mono');
+
+        await page.evaluate(() =>
+            window.muya!.setOptions({ codeFontFamily: 'Courier New, monospace' }));
+
+        await expect.poll(family).toContain('Courier New');
+    });
+
+    test('changing code font size re-measures the line-number gutter', async ({ page }) => {
+        await page.evaluate(md => window.muya!.setContent(md), CODE_MD);
+        await page.waitForSelector('.mu-line-numbers-rows span');
+
+        // Wait for the initial line-number positioning.
+        await expect.poll(() => thirdLineTop(page)).toBeGreaterThan(0);
+        const before = await thirdLineTop(page);
+
+        await page.evaluate(() => window.muya!.setOptions({ codeFontSize: 30 }));
+
+        // The 3rd line number must move down to track the taller lines.
+        await expect.poll(() => thirdLineTop(page)).toBeGreaterThan(before + 5);
+    });
+
+    test('editor font size also re-measures the line-number gutter', async ({ page }) => {
+        await page.evaluate(md => window.muya!.setContent(md), CODE_MD);
+        await page.waitForSelector('.mu-line-numbers-rows span');
+
+        await expect.poll(() => thirdLineTop(page)).toBeGreaterThan(0);
+        const before = await thirdLineTop(page);
+
+        // The code block font is relative (`90%`), so the editor base font
+        // change enlarges the code lines — the gutter must track them.
+        await page.evaluate(() => window.muya!.setOptions({ fontSize: 30 }));
+
+        await expect.poll(() => thirdLineTop(page)).toBeGreaterThan(before + 5);
+    });
+
+    test('wrapCodeBlocks wraps long lines', async ({ page }) => {
+        const longLine = `\`\`\`js\nconst x = "${'a'.repeat(160)}"\n\`\`\`\n`;
+        await page.evaluate(md => window.muya!.setContent(md), longLine);
+        await page.waitForSelector('.mu-code-block .mu-code');
+
+        const overflowing = () => page.evaluate(() => {
+            const code = document.querySelector('.mu-code-block .mu-code') as HTMLElement;
+            return code.scrollWidth > code.clientWidth + 2;
+        });
+
+        // Off: the long line overflows horizontally.
+        await expect.poll(overflowing).toBe(true);
+
+        await page.evaluate(() => window.muya!.setOptions({ wrapCodeBlocks: true }));
+        await expect.poll(overflowing).toBe(false);
+
+        await page.evaluate(() => window.muya!.setOptions({ wrapCodeBlocks: false }));
+        await expect.poll(overflowing).toBe(true);
+    });
+});
diff --git a/packages/muya/src/__tests__/setOptions.spec.ts b/packages/muya/src/__tests__/setOptions.spec.ts
index 8c6f5fd29e..c327c47d42 100644
--- a/packages/muya/src/__tests__/setOptions.spec.ts
+++ b/packages/muya/src/__tests__/setOptions.spec.ts
@@ -14,7 +14,7 @@ vi.mock('../utils/diagram', () => ({
 }));
 
 // Coverage for the runtime option API added for the muyajs -> @muyajs/core
-// migration: setOptions / setFont / setTabSize / setListIndentation. Every
+// migration: setOptions / setListIndentation. Every
 // desktop Preferences toggle depends on options updating live. setOptions with
 // forceRender re-renders from current state (so render-affecting options take
 // effect) WITHOUT clearing undo history, and preserves the document content.
@@ -94,15 +94,6 @@ describe('muya runtime options', () => {
         expect(muya.domNode.getAttribute('spellcheck')).toBe('false');
     });
 
-    it('setFont and setTabSize update options', () => {
-        const muya = bootMuya('x\n');
-        muya.setFont({ fontSize: 18, lineHeight: 1.8 });
-        expect(muya.options.fontSize).toBe(18);
-        expect(muya.options.lineHeight).toBe(1.8);
-        muya.setTabSize(2);
-        expect(muya.options.tabSize).toBe(2);
-    });
-
     it('setListIndentation updates options and preserves content', () => {
         const muya = bootMuya('- a\n- b\n');
         const before = muya.getMarkdown();
@@ -128,6 +119,46 @@ describe('muya runtime options', () => {
         muya.setListIndentation(4);
         expect(muya.getMarkdown()).toBe('- a\n     - b\n');
     });
+
+    it('setOptions writes typography as --mu-* custom properties on the root', () => {
+        const muya = bootMuya('x\n');
+        muya.setOptions({
+            fontSize: 18,
+            lineHeight: 1.8,
+            editorFontFamily: 'Inter',
+            codeFontSize: 13,
+            codeFontFamily: 'Fira Code',
+        });
+        const { style } = muya.domNode;
+        expect(style.getPropertyValue('--mu-font-size')).toBe('18px');
+        expect(style.getPropertyValue('--mu-line-height')).toBe('1.8');
+        expect(style.getPropertyValue('--mu-font-family')).toBe('Inter');
+        expect(style.getPropertyValue('--mu-code-font-size')).toBe('13px');
+        expect(style.getPropertyValue('--mu-code-font-family')).toBe('Fira Code');
+    });
+
+    it('setOptions toggles the .mu-code-wrap class', () => {
+        const muya = bootMuya('x\n');
+        muya.setOptions({ wrapCodeBlocks: true });
+        expect(muya.domNode.classList.contains('mu-code-wrap')).toBe(true);
+        muya.setOptions({ wrapCodeBlocks: false });
+        expect(muya.domNode.classList.contains('mu-code-wrap')).toBe(false);
+    });
+
+    it('construction applies typography options onto the root', () => {
+        const host = document.createElement('div');
+        document.body.appendChild(host);
+        const muya = new Muya(host, {
+            fontSize: 20,
+            codeFontSize: 12,
+            wrapCodeBlocks: true,
+        } as ConstructorParameters<typeof Muya>[1]);
+        muya.init();
+        bootedHosts.push(muya.domNode);
+        expect(muya.domNode.style.getPropertyValue('--mu-font-size')).toBe('20px');
+        expect(muya.domNode.style.getPropertyValue('--mu-code-font-size')).toBe('12px');
+        expect(muya.domNode.classList.contains('mu-code-wrap')).toBe(true);
+    });
 });
 
 // Render-affecting options: the inline renderer (`InlineRenderer.tokenizer`)
diff --git a/packages/muya/src/assets/styles/blockSyntax.css b/packages/muya/src/assets/styles/blockSyntax.css
index a399d943d5..83a0b392b5 100644
--- a/packages/muya/src/assets/styles/blockSyntax.css
+++ b/packages/muya/src/assets/styles/blockSyntax.css
@@ -1,4 +1,8 @@
 .mu-editor {
+    font-size: var(--mu-font-size, 16px);
+    font-family: var(--mu-font-family, 'Open Sans', 'Clear Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif);
+    line-height: var(--mu-line-height, 1.6);
+
     outline: none;
 }
 
@@ -210,9 +214,33 @@
     border-radius: 3px;
 }
 
+/* Code-block font via `--mu-code-*`; code blocks only (inline code untouched). */
+.mu-code-block {
+    font-size: var(--mu-code-font-size, 90%);
+    font-family: var(
+        --mu-code-font-family,
+        'DejaVu Sans Mono',
+        'Source Code Pro',
+        'Droid Sans Mono',
+        Consolas,
+        monospace
+    );
+}
+
 .mu-code-block .mu-code {
     display: block;
     overflow: auto;
+
+    /* Override the <code> UA monospace so the block's code font reaches the text. */
+    font-family: inherit;
+}
+
+/* wrapCodeBlocks → `.mu-code-wrap`; wraps long lines (overrides prism's `pre`). */
+.mu-code-wrap .mu-code-block .mu-code {
+    overflow: hidden;
+
+    white-space: pre-wrap;
+    overflow-wrap: break-word;
 }
 
 .mu-code-block .mu-code::-webkit-scrollbar {
diff --git a/packages/muya/src/block/content/codeBlockContent/index.ts b/packages/muya/src/block/content/codeBlockContent/index.ts
index 6cd704d3e2..8ebf9fd767 100644
--- a/packages/muya/src/block/content/codeBlockContent/index.ts
+++ b/packages/muya/src/block/content/codeBlockContent/index.ts
@@ -169,6 +169,7 @@ class CodeBlockContent extends Content {
     }
 
     private _lastLineCount = -1;
+    private _lineNumberResizeObserver: ResizeObserver | null = null;
 
     private _updateLineNumbers(text: string) {
         if (!this.muya.options.codeBlockLineNumbers)
@@ -181,12 +182,23 @@ class CodeBlockContent extends Content {
             syncLineNumbersSpans(wrapper, count);
             this._lastLineCount = count;
         }
-        // Reposition on every update so wrap-mode line breaks are reflected.
-        const codeEl = this.domNode;
-        requestAnimationFrame(() => {
-            if (codeEl && wrapper.isConnected)
+        this._observeLineNumberResize(wrapper);
+    }
+
+    // Re-measure the gutter after any code-block reflow (initial render, font /
+    // wrap change, content edit, viewport resize). Fires post-layout, so it
+    // can't read stale positions; owns all repositioning.
+    private _observeLineNumberResize(wrapper: HTMLElement) {
+        if (this._lineNumberResizeObserver != null || typeof ResizeObserver === 'undefined')
+            return;
+        const codeEl = this.domNode!;
+        this._lineNumberResizeObserver = new ResizeObserver(() => {
+            if (codeEl.isConnected && wrapper.isConnected)
                 repositionLineNumberSpans(wrapper, codeEl);
+            else
+                this._lineNumberResizeObserver?.disconnect();
         });
+        this._lineNumberResizeObserver.observe(codeEl);
     }
 
     override inputHandler(event: Event): void {
diff --git a/packages/muya/src/config/index.ts b/packages/muya/src/config/index.ts
index 8242a1a1ab..d9f88fac59 100644
--- a/packages/muya/src/config/index.ts
+++ b/packages/muya/src/config/index.ts
@@ -113,6 +113,7 @@ export const CLASS_NAMES = genUpper2LowerKeyHash([
     'MU_EMPTY',
     'MU_FENCE_CODE',
     'MU_FOCUS_MODE',
+    'MU_CODE_WRAP',
     'MU_FRONT_MATTER',
     'MU_FRONT_ICON',
     'MU_GRAY',
@@ -320,6 +321,7 @@ export const MUYA_DEFAULT_OPTIONS = {
     orderListDelimiter: '.',
     tabSize: 4,
     codeBlockLineNumbers: false,
+    wrapCodeBlocks: false,
     // bullet/list marker width + listIndentation, tab or Daring Fireball Markdown (4 spaces) --> list indentation
     listIndentation: 1,
     frontmatterType: '-',
diff --git a/packages/muya/src/muya.ts b/packages/muya/src/muya.ts
index ddc7243089..a6e8125636 100644
--- a/packages/muya/src/muya.ts
+++ b/packages/muya/src/muya.ts
@@ -333,6 +333,8 @@ export class Muya {
             );
         }
 
+        applyAppearance(this.domNode, options);
+
         if (!forceRender)
             return;
 
@@ -357,19 +359,6 @@ export class Muya {
         }
     }
 
-    /** Update the editor font size / line height. */
-    setFont({ fontSize, lineHeight }: { fontSize?: IMuyaOptions['fontSize']; lineHeight?: IMuyaOptions['lineHeight'] }) {
-        if (typeof fontSize === 'number')
-            this.options.fontSize = fontSize;
-        if (typeof lineHeight === 'number')
-            this.options.lineHeight = lineHeight;
-    }
-
-    /** Update the tab size used for indentation. */
-    setTabSize(tabSize: IMuyaOptions['tabSize']) {
-        this.options.tabSize = tabSize;
-    }
-
     /** Update list indentation and re-render so it takes effect. */
     setListIndentation(listIndentation: IMuyaOptions['listIndentation']) {
         this.setOptions({ listIndentation }, true);
@@ -1668,6 +1657,23 @@ export class Muya {
     }
 }
 
+// Write provided appearance options as `--mu-*` vars / a wrap class on the root.
+function applyAppearance(domNode: HTMLElement, options: Partial<IMuyaOptions>) {
+    const { style } = domNode;
+    if (typeof options.fontSize === 'number')
+        style.setProperty('--mu-font-size', `${options.fontSize}px`);
+    if (typeof options.lineHeight === 'number')
+        style.setProperty('--mu-line-height', `${options.lineHeight}`);
+    if (options.editorFontFamily)
+        style.setProperty('--mu-font-family', options.editorFontFamily);
+    if (typeof options.codeFontSize === 'number')
+        style.setProperty('--mu-code-font-size', `${options.codeFontSize}px`);
+    if (options.codeFontFamily)
+        style.setProperty('--mu-code-font-family', options.codeFontFamily);
+    if ('wrapCodeBlocks' in options)
+        domNode.classList.toggle(CLASS_NAMES.MU_CODE_WRAP, !!options.wrapCodeBlocks);
+}
+
 /**
  * [ensureContainerDiv ensure container element is div]
  */
@@ -1699,5 +1705,7 @@ function getContainer(originContainer: HTMLElement, options: IMuyaOptions) {
     newContainer.setAttribute('spellcheck', spellcheckEnabled ? 'true' : 'false');
     originContainer.replaceWith(newContainer);
 
+    applyAppearance(newContainer, options);
+
     return newContainer;
 }
diff --git a/packages/muya/src/types.ts b/packages/muya/src/types.ts
index e7a2e4c9bb..4291764d00 100644
--- a/packages/muya/src/types.ts
+++ b/packages/muya/src/types.ts
@@ -3,6 +3,10 @@ import type { TState } from './state/types';
 export interface IMuyaOptions {
     fontSize: number;
     lineHeight: number;
+    editorFontFamily?: string;
+    codeFontSize?: number;
+    codeFontFamily?: string;
+    wrapCodeBlocks?: boolean;
     focusMode: boolean;
     trimUnnecessaryCodeBlockEmptyLines: boolean;
     preferLooseListItem: boolean;