feat(web): render LaTeX math in chat via KaTeX

.changeset/web-katex-math.md

@@ -0,0 +1,5 @@
+---
+"@moonshot-ai/kimi-code": patch
+---
+
+Render LaTeX display math (`$$…$$`) in the web chat via KaTeX. Single `$` is intentionally left as literal text, so prices, env vars, and shell paths (e.g. `$PATH`, `$5/$10`, `$HOME/bin`) are never swallowed as a formula.

apps/kimi-web/package.json

@@ -16,6 +16,7 @@
     "@fontsource-variable/jetbrains-mono": "^5.2.8",
     "@xterm/addon-fit": "^0.11.0",
     "@xterm/xterm": "^6.0.0",
+    "katex": "^0.16.22",
     "markstream-vue": "1.0.3",
     "shiki": "^4.2.0",
     "stream-markdown": "^0.0.16",

apps/kimi-web/src/components/chat/Markdown.vue

@@ -2,7 +2,8 @@
 <script setup lang="ts">
 import { computed, inject, nextTick, onMounted, onUnmounted, reactive, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { MarkdownRender } from 'markstream-vue';
+import { MarkdownRender, enableKatex } from 'markstream-vue';
+import type { MarkdownIt } from 'markstream-vue';
 import { useIsDark } from '../../composables/useIsDark';
 import type { FilePreviewRequest } from '../../types';
 import { collectFilePathAliases, findFilePathLinks } from '../../lib/filePathLinks';
@@ -13,6 +14,23 @@ import { copyTextToClipboard } from '../../lib/clipboard';
 // Terminal Pro. Importing the same file from multiple components is a no-op
 // after the first (Vite dedups the CSS import).
 import 'markstream-vue/index.px.css';
+// KaTeX math: markstream renders `$$…$$` display math only after the optional
+// katex peer is enabled, and its stylesheet (+ bundled fonts) is what gives
+// formulas their layout. enableKatex() registers the default `import('katex')`
+// loader; it runs once on first import of this module and is safe at module
+// scope. Without the CSS the math renders unstyled, so both must travel
+// together.
+import 'katex/dist/katex.min.css';
+enableKatex();
+
+// Only `$$…$$` display math is rendered; single `$` inline math is disabled so
+// prices, env vars, and shell paths (`$5`, `$PATH`, `$HOME/bin`) stay literal
+// without any escaping or code-detection gymnastics. `math_block` (the $$ rule)
+// is left enabled.
+function disableInlineMath(md: MarkdownIt): MarkdownIt {
+  md.inline.ruler.disable('math');
+  return md;
+}
 
 const { t } = useI18n();
 
@@ -353,6 +371,7 @@ function copyDiff(code: string, idx: number) {
       <MarkdownRender
         v-if="seg.kind === 'md'"
         :content="seg.text"
+        :custom-markdown-it="disableInlineMath"
         mode="chat"
         :code-renderer="renderPlan.codeRenderer"
         :is-dark="isDark"
@@ -575,6 +594,19 @@ function copyDiff(code: string, idx: number) {
   text-decoration: underline;
 }
 
+/* KaTeX math. Colour already inherits (--text) since KaTeX draws with
+   currentColor, so the only skinning needed is layout: let a wide display
+   formula scroll inside its own box instead of overflowing the chat column and
+   breaking the mobile layout. Inline math stays in the text flow. */
+.md :deep(.katex-display) {
+  overflow-x: auto;
+  overflow-y: hidden;
+  /* room for the horizontal scrollbar so it doesn't clip the bottom of the
+     formula (e.g. integral/sum subscripts) */
+  padding: 2px 0 6px;
+  margin: 0.6em 0;
+}
+
 /* Blockquote */
 .md :deep(blockquote) {
   margin: 0.5em 0;