feat: update math parsing and rendering capabilities, enhance bug report template, and improve share link functionality

Author: Simon-He95

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -22,15 +22,6 @@ body:
       placeholder: Reproduction URL and steps
     validations:
       required: true
-  - type: textarea
-    id: system-info
-    attributes:
-      label: System Info
-      description: Output of `npx envinfo --system --npmPackages '{vite,@vitejs/*}' --binaries --browsers`
-      render: shell
-      placeholder: System, Binaries, Browsers
-    validations:
-      required: true
   - type: dropdown
     id: package-manager
     attributes:

README.md

@@ -61,6 +61,14 @@ These features make the library especially suited for real-time, AI-driven, and
 - [Streaming playground](https://vue-markdown-renderer.simonhe.me/) — try large Markdown files and progressive diagrams to feel the difference.
 - [Markdown vs v-html comparison](https://vue-markdown-renderer.simonhe.me/markdown) — contrast the library's reactive rendering with a traditional static pipeline.
 
+### Interactive Test Page
+
+- Try the interactive test page for quick verification and debugging: https://vue-markdown-renderer.simonhe.me/test
+
+  This page provides a left-side editor and right-side live preview powered by the library. It also includes a "生成并复制分享链接" action that encodes your input into the URL for easy sharing, and a fallback flow to open or prefill a GitHub issue when the input is too long for URL embedding.
+
+  Use this page to reproduce rendering issues, verify math/mermaid/code block behaviour, and quickly produce a shareable link or an issue with prefilled reproduction steps.
+
 ### Intro Video
 
 This short video introduces the vue-renderer-markdown component library and highlights key features and usage patterns.

README.zh-CN.md

@@ -61,6 +61,14 @@
 - [Streaming playground](https://vue-markdown-renderer.simonhe.me/) — 在浏览器中试用大文件、渐进式图表等特性。
 - [Markdown vs v-html comparison](https://vue-markdown-renderer.simonhe.me/markdown) — 对比本库的响应式渲染与传统静态管线。
 
+### 交互测试页面
+
+- 试用交互式测试页面以便快速验证与调试： https://vue-markdown-renderer.simonhe.me/test
+
+  此页面提供左侧编辑器与右侧实时预览（由本库驱动）。页面包含“生成并复制分享链接”功能，会将你的输入编码到 URL 中以便分享；当输入过长无法嵌入 URL 时，会提供直接打开或预填 GitHub Issue 的回退流程。
+
+  你可以使用该页面复现渲染问题，验证数学公式 / Mermaid / 代码块的渲染行为，并快速生成可共享链接或带复现信息的 issue。
+
 ### 介绍视频
 
 一段短视频介绍了 vue-renderer-markdown 的关键特性与使用方式。

package.json

@@ -103,9 +103,10 @@
   },
   "dependencies": {
     "@floating-ui/dom": "^1.7.4",
-    "stream-markdown-parser": "^0.0.10"
+    "stream-markdown-parser": "^0.0.11"
   },
   "devDependencies": {
+    "lz-string": "^1.5.0",
     "@antfu/eslint-config": "^5.4.1",
     "@types/node": "^18.19.130",
     "@vitejs/plugin-vue": "^5.2.4",

packages/markdown-parser/package.json

@@ -1,7 +1,7 @@
 {
   "name": "stream-markdown-parser",
   "type": "module",
-  "version": "0.0.10",
+  "version": "0.0.11",
   "packageManager": "[email protected]",
   "description": "Pure markdown parser and renderer utilities with streaming support - framework agnostic",
   "author": "Simon He",

packages/markdown-parser/src/plugins/isMathLike.ts

@@ -59,6 +59,8 @@ export function isMathLike(s: string) {
   // If the content looks like a timestamp or date, it's not math.
   if (DATE_TIME_RE.test(stripped))
     return false
+  if (stripped.includes('**'))
+    return false
   if (stripped.length > 2000)
     return true // very long blocks likely math
 

packages/markdown-parser/src/plugins/math.ts

@@ -20,6 +20,7 @@ export const KATEX_COMMANDS = [
   'cdots',
   'quad',
   'in',
+  'end',
   'infty',
   'perp',
   'mid',
@@ -69,7 +70,6 @@ export const KATEX_COMMANDS = [
   'text',
   'left',
   'right',
-  'times',
 ]
 
 // Precompute escaped KATEX commands and default regex used by
@@ -145,17 +145,27 @@ export function normalizeStandaloneBackslashT(s: string, opts?: MathOptions) {
     : [commands.map(c => c.replace(/[.*+?^${}()|[\\]\\\]/g, '\\$&')).join('|'), ESCAPED_TEX_BRACE_COMMANDS].filter(Boolean).join('|')
   let result = out
   if (braceEscaped) {
-    const braceCmdRe = new RegExp(`(^|[^\\\\])(${braceEscaped})\\s*\\{`, 'g')
+    const braceCmdRe = new RegExp(`(^|[^\\\\\\w])(${braceEscaped})\\s*\\{`, 'g')
     result = result.replace(braceCmdRe, (_m: string, p1: string, p2: string) => `${p1}\\${p2}{`)
   }
   result = result.replace(/span\{([^}]+)\}/, 'span\\{$1\\}')
     .replace(/\\operatorname\{span\}\{((?:[^{}]|\{[^}]*\})+)\}/, '\\operatorname{span}\\{$1\\}')
+
+  // If a single backslash appears immediately before a newline (e.g. "... 8 \n5..."),
+  // it's likely intended as a LaTeX linebreak (`\\`). Double it, but avoid
+  // changing already escaped `\\` sequences.
+  // Match a single backslash not preceded by another backslash, followed by an optional CR and a LF.
+  result = result.replace(/(^|[^\\])\\\r?\n/g, '$1\\\\\n')
+
+  // If the string ends with a single backslash (no trailing newline), double it.
+  result = result.replace(/(^|[^\\])\\$/g, '$1\\\\')
   return result
 }
 export function applyMath(md: MarkdownIt, mathOpts?: MathOptions) {
   // Inline rule for \(...\) and $$...$$ and $...$
   const mathInline = (state: unknown, silent: boolean) => {
     const s = state as any
+
     if (/^\*[^*]+/.test(s.src)) {
       return false
     }
@@ -228,43 +238,54 @@ export function applyMath(md: MarkdownIt, mathOpts?: MathOptions) {
         if (endIdx === -1) {
           // no matching close for this opener; skip forward
           const content = src.slice(index + open.length)
-          if (isMathLike(content)) {
-            searchPos = index + open.length
-            foundAny = true
-            if (!silent) {
-              s.pending = ''
-              const toPushBefore = preMathPos ? src.slice(preMathPos, searchPos) : src.slice(0, searchPos)
-              const isStrongPrefix = countUnescapedStrong(toPushBefore) % 2 === 1
-
-              if (preMathPos)
-                pushText(src.slice(preMathPos, searchPos))
-              else
-                pushText(src.slice(0, searchPos))
-              if (isStrongPrefix) {
-                const strongToken = s.push('strong_open', '', 0)
-                strongToken.markup = src.slice(0, index + 2)
-                const token = s.push('math_inline', 'math', 0)
-                token.content = normalizeStandaloneBackslashT(content, mathOpts)
-                token.markup = open === '$$' ? '$$' : open === '\\(' ? '\\(\\)' : open === '$' ? '$' : '()'
-                token.raw = `${open}${content}${close}`
-                token.loading = true
-                strongToken.content = content
-                s.push('strong_close', '', 0)
-              }
-              else {
-                const token = s.push('math_inline', 'math', 0)
-                token.content = normalizeStandaloneBackslashT(content, mathOpts)
-                token.markup = open === '$$' ? '$$' : open === '\\(' ? '\\(\\)' : open === '$' ? '$' : '()'
-                token.raw = `${open}${content}${close}`
-                token.loading = true
+          if (content.includes(open)) {
+            searchPos = src.indexOf(open, index + open.length)
+            continue
+          }
+          if (endIdx === -1) {
+            if (isMathLike(content)) {
+              searchPos = index + open.length
+              foundAny = true
+              if (!silent) {
+                s.pending = ''
+                const toPushBefore = preMathPos ? src.slice(preMathPos, searchPos) : src.slice(0, searchPos)
+                const isStrongPrefix = countUnescapedStrong(toPushBefore) % 2 === 1
+
+                if (preMathPos) {
+                  pushText(src.slice(preMathPos, searchPos))
+                }
+                else {
+                  let text = src.slice(0, searchPos)
+                  if (text.endsWith(open))
+                    text = text.slice(0, text.length - open.length)
+                  pushText(text)
+                }
+                if (isStrongPrefix) {
+                  const strongToken = s.push('strong_open', '', 0)
+                  strongToken.markup = src.slice(0, index + 2)
+                  const token = s.push('math_inline', 'math', 0)
+                  token.content = normalizeStandaloneBackslashT(content, mathOpts)
+                  token.markup = open === '$$' ? '$$' : open === '\\(' ? '\\(\\)' : open === '$' ? '$' : '()'
+                  token.raw = `${open}${content}${close}`
+                  token.loading = true
+                  strongToken.content = content
+                  s.push('strong_close', '', 0)
+                }
+                else {
+                  const token = s.push('math_inline', 'math', 0)
+                  token.content = normalizeStandaloneBackslashT(content, mathOpts)
+                  token.markup = open === '$$' ? '$$' : open === '\\(' ? '\\(\\)' : open === '$' ? '$' : '()'
+                  token.raw = `${open}${content}${close}`
+                  token.loading = true
+                }
+                // consume the full inline source
+                s.pos = src.length
               }
-              // consume the full inline source
-              s.pos = src.length
+              searchPos = src.length
+              preMathPos = searchPos
             }
-            searchPos = src.length
-            preMathPos = searchPos
+            break
           }
-          break
         }
         const content = src.slice(index + open.length, endIdx)
         if (!isMathLike(content)) {
@@ -388,12 +409,6 @@ export function applyMath(md: MarkdownIt, mathOpts?: MathOptions) {
         if (open.includes('[')) {
           if (lineText.replace('\\', '') === '[') {
             if (startLine + 1 < endLine) {
-              // const nextLineStart
-              //   = state.bMarks[startLine + 1] + state.tShift[startLine + 1]
-              // const nextLineText = state.src.slice(
-              //   nextLineStart,
-              //   state.eMarks[startLine + 1],
-              // )
               matched = true
               openDelim = open
               closeDelim = close
@@ -429,7 +444,6 @@ export function applyMath(md: MarkdownIt, mathOpts?: MathOptions) {
         startDelimIndex + openDelim.length,
         endDelimIndex,
       )
-
       const token: any = s.push('math_block', 'math', 0)
       token.content = normalizeStandaloneBackslashT(content)
       token.markup

playground/src/const/markdown.ts

@@ -85,6 +85,14 @@ e^x = 1 + x + \frac{x^2}{2!} + \frac{x^3}{3!} + \cdots + \frac{x^n}{n!} + \cdots
 (1+x)^m = 1 + mx + \frac{m(m-1)}{2!}x^2 + \frac{m(m-1)(m-2)}{3!}x^3 + \cdots, \quad |x| < 1
 \]
 
+- **矩阵**：
+\[
+\begin{bmatrix}
+2x_2 - 8x_3 = 8 \\
+5x_1 - 5x_3 = 10
+\end{bmatrix}
+\]
+
 - **公式**