feat(web): render TeX math in Markdown

This commit is contained in:
ZiyaZhang
2026-08-01 00:05:23 -07:00
parent 67b166b928
commit 1e334fa955
9 changed files with 236 additions and 7 deletions

View File

@@ -1,5 +1,5 @@
/* Visual baseline: deepsuite `@deepseek/md` markdown.css, adapted to CSS
Modules. Cite pills, KaTeX, header anchors, and thinking-small variants are
Modules. Cite pills, header anchors, and thinking-small variants are
intentionally absent (no matching DOM). Token names match that sheet. */
.markdown {
@@ -160,6 +160,12 @@
font-family: var(--ds-font-family-code);
}
.markdown :global(.katex-display) {
max-width: 100%;
overflow-x: auto;
overflow-y: hidden;
}
.markdown input[type='checkbox'] {
margin: 0 8px 0 0;
accent-color: var(--dsw-alias-label-secondary);

View File

@@ -1,11 +1,15 @@
import { isValidElement, useMemo } from 'react'
import ReactMarkdown from 'react-markdown'
import type { Components, UrlTransform } from 'react-markdown'
import rehypeKatex from 'rehype-katex'
import remarkGfm from 'remark-gfm'
import remarkMath from 'remark-math'
import { CodeBlock } from './CodeBlock.tsx'
import 'katex/dist/katex.min.css'
import css from './MarkdownText.module.css'
const remarkPlugins = [remarkGfm]
const remarkPlugins = [remarkGfm, remarkMath]
const rehypePlugins = [rehypeKatex]
function sanitizeUrl(url: string): string {
try {
@@ -93,7 +97,7 @@ const streamingComponents = buildComponents(true)
* pass a reference-stable object (memoized per locale revision), because the
* component table memoizes on its identity and a fresh literal per render
* would rebuild it every streaming chunk.
* @returns A GFM document with raw HTML, relative links, unsafe protocols, and remote images disabled.
* @returns A GFM document with TeX math rendered through KaTeX and raw HTML, relative links, unsafe protocols, and remote images disabled.
*/
export function MarkdownText({ text, streaming = false, codeLabels }: {
text: string
@@ -110,6 +114,7 @@ export function MarkdownText({ text, streaming = false, codeLabels }: {
<div className={css.markdown}>
<ReactMarkdown
remarkPlugins={remarkPlugins}
rehypePlugins={rehypePlugins}
components={components}
urlTransform={safeUrl}
>