= {
attributes: {
...(defaultSchema.attributes || {}),
div: [...((defaultSchema.attributes || {}).div || []), 'className', 'data-md-table-scroll'],
+ span: [...((defaultSchema.attributes || {}).span || []), 'className', 'dataLatex', 'dataDisplay', 'dataMathRendered', 'data-latex', 'data-display', 'data-math-rendered'],
a: [
'ariaDescribedBy', 'ariaLabel', 'ariaLabelledBy',
'dataFootnoteBackref', 'dataFootnoteRef',
@@ -517,13 +581,12 @@ function buildCacheKey(text: string): string {
}
function wrapCodeBlocks(html: string, isStreaming = false) {
- let counter = 0;
return html.replace(
/]*)>([\s\S]*?)<\/code><\/pre>/g,
(match, attributes, content) => {
const langMatch = attributes.match(/class="[^"]*language-([\w-]+)/);
const language = langMatch ? langMatch[1] : 'text';
- const blockId = `code-${stableHash(`${attributes}|${counter++}`)}`;
+ const blockId = `code-${stableHash(`${attributes}|${content}`)}`;
const streamingAttr = isStreaming ? ' data-streaming="1"' : '';
const escapedContent = content
.replace(/&/g, '&')
@@ -568,6 +631,143 @@ function renderMarkdownToHtml(text: string): string {
return String(file);
}
+export interface MarkdownSegment {
+ type: 'text' | 'code';
+ content: string;
+ language?: string;
+ closed: boolean;
+ key: string;
+}
+
+function hashCodeBlock(language: string, content: string): string {
+ return stableHash(`${language || ''}|${content}`);
+}
+
+export function parseMarkdownSegments(text: string, isStreaming = false): MarkdownSegment[] {
+ if (!text) {
+ return [{ type: 'text', content: '', closed: true, key: 'text-0' }];
+ }
+
+ const segments: MarkdownSegment[] = [];
+ let cursor = 0;
+ const regex = /^```([^\n]*)\n([\s\S]*?)^```/gm;
+ let match: RegExpExecArray | null;
+
+ while ((match = regex.exec(text)) !== null) {
+ if (match.index > cursor) {
+ segments.push({
+ type: 'text',
+ content: text.slice(cursor, match.index),
+ closed: true,
+ key: `text-${cursor}`
+ });
+ }
+
+ const language = match[1].trim();
+ const content = match[2];
+ const key = `code-${hashCodeBlock(language, content)}`;
+
+ segments.push({
+ type: 'code',
+ content,
+ language,
+ closed: true,
+ key
+ });
+
+ cursor = regex.lastIndex;
+ }
+
+ if (cursor < text.length) {
+ const remaining = text.slice(cursor);
+
+ if (isStreaming) {
+ const openMatch = remaining.match(/^```([^\n]*)\n([\s\S]*)$/m);
+ if (openMatch) {
+ if (openMatch.index && openMatch.index > 0) {
+ segments.push({
+ type: 'text',
+ content: remaining.slice(0, openMatch.index),
+ closed: true,
+ key: `text-${cursor}`
+ });
+ }
+ const language = openMatch[1].trim();
+ const content = openMatch[2];
+ segments.push({
+ type: 'code',
+ content,
+ language,
+ closed: false,
+ key: 'code-streaming-active'
+ });
+ return segments;
+ }
+ }
+
+ segments.push({
+ type: 'text',
+ content: remaining,
+ closed: true,
+ key: `text-${cursor}`
+ });
+ }
+
+ return segments;
+}
+
+export function renderMarkdownText(text: string): string {
+ if (!text) return '';
+
+ const safeText = transformMathBlocks(
+ transformShowFileBlocks(
+ transformShowImageBlocks(transformShowHtmlBlocks(text, false))
+ )
+ );
+
+ let html = '';
+ try {
+ html = renderMarkdownToHtml(safeText);
+ } catch (error) {
+ console.warn('Markdown 渲染失败，降级为纯文本渲染:', error);
+ html = escapeHtml(safeText).replace(/\n/g, '
');
+ }
+
+ return html;
+}
+
+export function renderMathBlocks(container: HTMLElement) {
+ if (!container || typeof window === 'undefined') return;
+
+ const elements = container.querySelectorAll(
+ '.math-block:not([data-math-rendered]), .math-inline:not([data-math-rendered])'
+ );
+
+ elements.forEach((el) => {
+ const latex = el.getAttribute('data-latex');
+ if (!latex) return;
+
+ const display = el.getAttribute('data-display') === 'block';
+ try {
+ el.innerHTML = katex.renderToString(latex, {
+ throwOnError: false,
+ displayMode: display,
+ trust: true
+ });
+ el.setAttribute('data-math-rendered', 'true');
+ } catch (error) {
+ console.warn('LaTeX渲染失败:', error);
+ el.setAttribute('data-math-rendered', 'error');
+ }
+ });
+}
+
+function renderMathBlocksForSelector(selector: string) {
+ if (typeof document === 'undefined') return;
+ const elements = document.querySelectorAll(selector);
+ elements.forEach((el) => renderMathBlocks(el as HTMLElement));
+}
+
function escapeHtml(input: string) {
return input
.replace(/&/g, '&')
@@ -589,8 +789,10 @@ export function renderMarkdown(text: string, isStreaming = false) {
}
}
- const safeText = transformShowFileBlocks(
- transformShowImageBlocks(transformShowHtmlBlocks(text, isStreaming))
+ const safeText = transformMathBlocks(
+ transformShowFileBlocks(
+ transformShowImageBlocks(transformShowHtmlBlocks(text, isStreaming))
+ )
);
let html = '';
try {
@@ -632,29 +834,7 @@ export function renderMarkdown(text: string, isStreaming = false) {
});
}
- if (typeof renderMathInElement !== 'undefined') {
- const elements = document.querySelectorAll(
- '.text-output .text-content:not(.streaming-text)'
- );
- elements.forEach((element) => {
- if (element.hasAttribute('data-math-rendered')) return;
- try {
- renderMathInElement(element as HTMLElement, {
- delimiters: [
- { left: '$$', right: '$$', display: true },
- { left: '$', right: '$', display: false },
- { left: '\\[', right: '\\]', display: true },
- { left: '\\(', right: '\\)', display: false }
- ],
- throwOnError: false,
- trust: true
- });
- element.setAttribute('data-math-rendered', 'true');
- } catch (error) {
- console.warn('LaTeX渲染失败:', error);
- }
- });
- }
+ renderMathBlocksForSelector('.text-output .text-content:not(.streaming-text)');
}, 100);
}
@@ -662,7 +842,7 @@ export function renderMarkdown(text: string, isStreaming = false) {
}
export function renderLatexInRealtime() {
- if (typeof renderMathInElement === 'undefined') {
+ if (typeof window === 'undefined') {
return;
}
@@ -673,20 +853,7 @@ export function renderLatexInRealtime() {
latexRenderTimer = requestAnimationFrame(() => {
const elements = document.querySelectorAll('.text-output .streaming-text');
elements.forEach((element) => {
- try {
- renderMathInElement(element as HTMLElement, {
- delimiters: [
- { left: '$$', right: '$$', display: true },
- { left: '$', right: '$', display: false },
- { left: '\\[', right: '\\]', display: true },
- { left: '\\(', right: '\\)', display: false }
- ],
- throwOnError: false,
- trust: true
- });
- } catch {
- // ignore
- }
+ renderMathBlocks(element as HTMLElement);
});
});
}
diff --git a/static/src/styles/components/chat/_chat-area.scss b/static/src/styles/components/chat/_chat-area.scss
index be71f12..e58e021 100644
--- a/static/src/styles/components/chat/_chat-area.scss
+++ b/static/src/styles/components/chat/_chat-area.scss
@@ -1549,3 +1549,39 @@ a.md-download-link {
opacity: 0.8;
}
}
+
+// ===== 数学公式样式 =====
+.math-block {
+ display: block;
+ margin: 16px 0;
+ overflow-x: auto;
+ overflow-y: hidden;
+ text-align: center;
+ scrollbar-width: thin;
+ scrollbar-color: color-mix(in srgb, var(--claude-text-secondary) 55%, transparent) transparent;
+
+ &::-webkit-scrollbar {
+ height: 6px;
+ }
+
+ &::-webkit-scrollbar-track {
+ background: transparent;
+ }
+
+ &::-webkit-scrollbar-thumb {
+ background: color-mix(in srgb, var(--claude-text-secondary) 55%, transparent);
+ border-radius: 999px;
+ }
+
+ .katex-display {
+ display: inline-block;
+ margin: 0;
+ text-align: initial;
+ }
+}
+
+.math-inline {
+ display: inline-block;
+ vertical-align: middle;
+ line-height: 1;
+}