Skip to content

fix(web): upgrade markstream-vue to 1.0.9-beta.1 and enable Monaco code highlighting #2415

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
wbxl2000 merged 2 commits into from
Jul 30, 2026
Merged

fix(web): upgrade markstream-vue to 1.0.9-beta.1 and enable Monaco code highlighting #2415

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
67f2ae3
fix(web): upgrade markstream-vue to 1.0.9-beta.1 and enable Monaco co…
wbxl2000 Jul 30, 2026
bc630c0
fix(nix): update pnpm deps hash for markstream-vue 1.0.9-beta.1
wbxl2000 Jul 30, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/kimi-web-markstream-monaco.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@moonshot-ai/kimi-code": patch
---

web: Enable Monaco-based highlighting for code blocks, and fix line numbers overlapping or drifting out of alignment in fallback-rendered code blocks.
5 changes: 4 additions & 1 deletion apps/kimi-web/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,10 +18,13 @@
"@xterm/addon-fit": "^0.11.0",
"@xterm/xterm": "^6.0.0",
"katex": "^0.17.0",
"markstream-vue": "^1.0.7",
"markstream-vue": "^1.0.9-beta.1",
"mermaid": "^11.15.0",
"monaco-editor": "^0.55.1",
"shiki": "^4.3.0",
"stream-diffs": "^0.0.2",
"stream-markdown": "^0.0.16",
"stream-monaco": "^0.0.49",
"vue": "^3.5.35",
"vue-i18n": "^11.4.5"
},
Expand Down
10 changes: 9 additions & 1 deletion apps/kimi-web/src/components/chat/Markdown.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -327,7 +327,14 @@ const CODE_DARK_THEME = 'github-dark';
// blank placeholders. Pinning `loading` to false drops the skeleton entirely:
// the block renders its plain-text fallback immediately and shiki upgrades it to
// the highlighted version when the highlighter is ready. Streaming blocks are
// unaffected (their `stream` is true, so the skeleton gate was already false).
// unaffected (their `stream` is true, so the skeleton gate was already
// false).
// Chat code blocks show no gutter: line numbers eat 3+ characters of reading
// width and every chat block starts at line 1 anyway. stream-diffs derives its
// gutter from `lineNumbers === false` (boolean, not monaco's 'off' string).
// This rides inside codeBlockProps because markstream 1.0.7 only forwards the
// top-level codeBlockMonacoOptions to the 'monaco' renderer kind — the 'shiki'
// kind's props object omits it, while codeBlockProps reach the same component.
const codeBlockProps = {
showHeader: true,
showCopyButton: true,
Expand All @@ -336,6 +343,7 @@ const codeBlockProps = {
showCollapseButton: false,
showFontSizeButtons: false,
loading: false,
monacoOptions: { lineNumbers: false },

@chatgpt-codex-connector chatgpt-codex-connector Bot Jul 30, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Badge Select Monaco for eligible code blocks

This only adds Monaco options/dependencies, but this component still passes :code-renderer="renderPlan.codeRenderer", and renderPlan can only produce shiki (or pre for heavy messages, with streaming forced to shiki). In normal chat messages the Monaco/stream-diffs renderer is therefore never selected, so the intended Monaco highlighting and the line-number override here do not take effect; switch the non-heavy path to the Monaco renderer if this change is meant to enable it.

Useful? React with 👍 / 👎.

@wbxl2000 wbxl2000 Jul 30, 2026

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is not accurate for markstream-vue 1.0.7+. The shiki renderer kind is a legacy name kept for compatibility — its dispatch resolves to the same Monaco-based component as the monaco kind: 'shiki' → ViewportDeferredMarkdownCodeBlockNode → index5.js (MarkdownCodeBlockNode) → imports CodeBlockNode.js (the stream-diffs/Monaco one). Verified empirically in a minimal repro: with code-renderer="shiki" the page loads both index5.js and CodeBlockNode.js and renders through the Monaco component, so the newly installed peers take effect on this exact path. codeBlockMonacoOptions is the one that only reaches the monaco kind — which is precisely why the lineNumbers override rides inside codeBlockProps (same pattern as kimi-code-app#155, which has been running code-renderer="shiki" against the Monaco component since it merged).

};

// Root cause for the "large session turns into code skeletons" failure:
Expand Down
2 changes: 1 addition & 1 deletion flake.nix
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -162,7 +162,7 @@
inherit (finalAttrs) pname version src pnpmWorkspaces;
inherit pnpm;
fetcherVersion = 3;
hash = "sha256-bL1AaInlb8dE+ua7a6llvQWkibEwEzfI3oQW5IOpX6I=";
hash = "sha256-FNxf3Zpr+s6ubtLIqXCkVgecBGejGM4hovUNVRnNoX4=";
};

nativeBuildInputs = [
Expand Down
Loading
Loading