侧边栏和摘读记录：AI 回答里的 LaTeX 公式渲染成数学式

CONTRIBUTING.md

@@ -41,7 +41,7 @@ extension/
 ├── tokens.css      共享的颜色、字号、间距（含深色主题）
 ├── triage/         B站分拣台：收藏夹（fav-*.js，由 triage.js 启动，纯函数在 triage-core.js）、关注（follow.js，纯函数在 follow-core.js），后台接口 triage-bg.js、follow-bg.js
 ├── history/        摘读记录页
-├── vendor/         第三方代码：defuddle.js（网页正文提取，`scripts/update-defuddle.sh <版本>` 更新，要 bash）
+├── vendor/         第三方代码：defuddle.js（网页正文提取，`scripts/update-defuddle.sh <版本>` 更新，要 bash）；temml.min.js、Temml-Local.css、Temml.woff2（AI 回答里的 LaTeX 公式，来源和版本见 `THIRD_PARTY_NOTICES.md`）
 ├── dev-sidepanel/  侧边栏的开发预览
 └── dev/            设置页的开发用假数据
 ```

THIRD_PARTY_NOTICES.md

@@ -76,3 +76,33 @@ The YouTube subtitle fetching approach follows [jdepoix/youtube-transcript-api](
 ## catppuccin/palette
 
 The extension's status colors (ok, warn, danger) use the [Catppuccin](https://github.com/catppuccin/palette) palette (MIT, Copyright (c) 2021 Catppuccin): Mocha for dark mode, and Latte for light mode with its accents desaturated and darkened.
+
+## ronkok/Temml
+
+`extension/vendor/temml.min.js`, `Temml-Local.css` and `Temml.woff2` are the files of the same names in `dist/` of [Temml](https://github.com/ronkok/Temml), unmodified. The side panel and 摘读记录 use them to show the LaTeX in an AI answer as MathML. To update, copy the three files from the npm package and change the version below.
+
+Version: 0.14.0
+
+```
+The MIT License (MIT)
+
+Copyright (c) 2020 Ron Kok
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+```

extension/history/history.css

@@ -61,6 +61,7 @@ summary { cursor: pointer; color: var(--text-2); font-size: var(--fs-xs); }
 .turn-a :is(p, ul, ol, pre, table) { margin: var(--space-1) 0; }
 .turn-a :is(h3, h4, h5) { margin: var(--space-2) 0 var(--space-1); font-size: var(--fs-sm); color: var(--text); }
 .turn-a :is(ul, ol) { padding-left: 1.4em; }
+.turn-a .md-math-block { display: block; overflow-x: auto; }
 .turn-a code { font-family: var(--font-mono); }
 .turn-a pre { overflow-x: auto; padding: var(--space-2); border-radius: var(--radius-sm); background: var(--surface-muted); }
 .turn-a table { border-collapse: collapse; }

extension/history/history.html

@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>MoonDigest · 摘读记录</title>
     <link rel="stylesheet" href="../tokens.css" />
+    <link rel="stylesheet" href="../vendor/Temml-Local.css" />
     <link rel="stylesheet" href="../triage/triage.css" />
     <link rel="stylesheet" href="./history.css" />
     <link rel="stylesheet" href="../triage/tags.css" />
@@ -118,6 +119,7 @@ <h3 data-text="aiParams">请求和 AI 参数</h3>
     <script src="../typing.js"></script>
     <script src="../sites.js"></script>
     <script src="../tag-core.js"></script>
+    <script src="../vendor/temml.min.js"></script>
     <script src="../note.js"></script>
     <script src="../download.js"></script>
     <script src="../note-actions.js"></script>

extension/messages.selftest.js

@@ -16,7 +16,7 @@ const vm = require("vm");
 
 const root = __dirname;
 const read = (f) => fs.readFileSync(path.join(root, f), "utf8");
-const files = require("./page-sources.selftest.js").walk(".", (d) => /^dev/.test(d)).filter((f) => f.endsWith(".js") && !f.endsWith(".selftest.js") && f !== "messages.js");
+const files = require("./page-sources.selftest.js").walk(".", (d) => /^(dev|vendor$)/.test(d)).filter((f) => f.endsWith(".js") && !f.endsWith(".selftest.js") && f !== "messages.js");
 // Comments out, strings kept (field names and types live in them), same offsets.
 const blank = (s) => s.replace(/\/\*[\s\S]*?\*\/|(^|[^:"'`\\])\/\/.*$/gm, (m, pre = "") => pre + m.slice(pre.length).replace(/[^\n]/g, " "));
 const src = Object.fromEntries(files.map((f) => [f, blank(read(f))]));

extension/note.js

@@ -854,10 +854,33 @@
       .replace(/[\x00-\x08\x0b\x0c\x0e-\x1f\x7f]/g, (c) => `\\x${c.charCodeAt(0).toString(16).padStart(2, "0")}`);
   }
 
+  // LaTeX in an answer: $$..$$ and \[..\] are display math, \(..\) and $..$ inline. A lone $ is math only when it hugs
+  // its content and no digit follows the closing one, so "$5 和 $10" stays text. Code alternatives match first and are
+  // kept, a fence still streaming included. Display math ends at a blank line, so a stray \[ cannot swallow the answer.
+  const MATH_OR_CODE = /```[\s\S]*?(?:```|$)|`[^`\n]+`|\$\$((?:(?!\n[ \t]*\n)[\s\S])+?)\$\$|\\\[((?:(?!\n[ \t]*\n)[\s\S])+?)\\\]|\\\((.+?)\\\)|(?<![\w$\\])\$(?!\s)([^$\n]+?)(?<![\s\\])\$(?![\w$])/g;
+
   // Chat-answer Markdown to HTML for the side panel and the history page. HTML is escaped first,
   // so only the tags built here reach the page.
   function renderMarkdown(text) {
-    let escaped = escapeHtml(stripThinkBlocks(text));
+    // Math is set aside before escaping, since Temml reads the raw LaTeX. Code keeps its dollars and backslashes.
+    const math = [];
+    const temml = globalThis.temml;
+    const source = stripThinkBlocks(text).replaceAll("\u0003", "").replace(MATH_OR_CODE, (all, dollars, bracket, paren, dollar) => {
+      const tex = dollars ?? bracket ?? paren ?? dollar;
+      if (tex === undefined || !temml) {
+        return all;
+      }
+      const displayMode = dollars !== undefined || bracket !== undefined;
+      let html;
+      try {
+        html = temml.renderToString(tex, { displayMode, throwOnError: false });
+      } catch {
+        // throwOnError covers parse errors only: a runaway macro overflows the stack, and the answer must still show.
+        return all;
+      }
+      return `\u0003${math.push(displayMode ? `<span class="md-math-block">${html}</span>` : html) - 1}\u0003`;
+    });
+    let escaped = escapeHtml(source);
     const codeBlocks = [];
     escaped = escaped.replace(/```([\s\S]*?)```/g, (_, code) => {
       // The fence's first line is its language (```python), not code.
@@ -1002,7 +1025,8 @@
     flushPara();
     closeList();
     // A code block that shares its line with text is shown inline.
-    return out.join("").replace(/\u0001MDG_CODE_(\d+)\u0001/g, (_, n) => `<code>${codeBlocks[Number(n)]}</code>`);
+    return out.join("").replace(/\u0001MDG_CODE_(\d+)\u0001/g, (_, n) => `<code>${codeBlocks[Number(n)]}</code>`)
+      .replace(/\u0003(\d+)\u0003/g, (_, n) => math[Number(n)]);
   }
 
   // Code spans are set aside first, so the bold, italic and link rules never reach inside them.
@@ -1013,7 +1037,8 @@
       .replace(/\*\*([^*\n]+)\*\*/g, (_, c) => `<strong>${c}</strong>`)
       .replace(/(^|[^*])\*([^*\n]+)\*(?!\*)/g, (_, pre, c) => `${pre}<em>${c}</em>`)
       .replace(/\[([^\]]+)\]\(([^)\s]+)\)/g, (_, t, u) => {
-        const safeUrl = /^(https?:|mailto:|#)/i.test(u) ? u : "#";
+        // A formula's placeholder would put its HTML inside the attribute.
+        const safeUrl = /^(https?:|mailto:|#)/i.test(u) && !u.includes("\u0003") ? u : "#";
         return `<a href="${safeUrl}" target="_blank" rel="noopener noreferrer">${t}</a>`;
       })
       .replace(/\u0002(\d+)\u0002/g, (_, n) => spans[Number(n)]);

extension/note.selftest.js

@@ -506,6 +506,29 @@ const XSS = ["<img src=x onerror=alert(1)>", `"'><script>alert(1)</script>`];
 const assertInert = (html, where) => assert.ok(!/<img src=x|<script|"'>/i.test(html) && /&lt;|&#60;/.test(html), `${where}: ${html}`);
 for (const bad of XSS) assertInert(N.renderMarkdown(`${bad}\n\n- **${bad}**\n\n\`${bad}\``), "renderMarkdown");
 assert.ok(N.renderMarkdown("[x](javascript:alert(1))").includes('href="#"'), "only http, mailto and # links");
+// #462: LaTeX renders as MathML where Temml is loaded (the side panel and 摘读记录), and stays text elsewhere.
+assert.strictEqual(N.renderMarkdown("\\(x\\) 和 $y$"), "<p>\\(x\\) 和 $y$</p>", "no Temml, no math");
+{
+  const mctx = vm.createContext({ URL, URLSearchParams, console });
+  for (const f of ["common.js", "limits.js", "errors.js", "settings.js", "sites.js", "tag-core.js", "vendor/temml.min.js", "note.js"]) vm.runInContext(fs.readFileSync(path.join(__dirname, f), "utf8"), mctx);
+  const md = mctx.MdgNote.renderMarkdown;
+  const block = md("得到：\n\n\\[ \\begin{bmatrix} 1 & 3\\\\ 4 & 6 \\end{bmatrix} \\]\n\n$$a<b$$");
+  assert.strictEqual(block.match(/<span class="md-math-block"><math [^>]*display="block"/g)?.length, 2, block);
+  assert.ok(block.includes("<mtable") && !block.includes("bmatrix") && !block.includes("\\["), block);
+  const inline = md("- 用 **\\(2\\times2\\)** 的窗口，$x_1$");
+  assert.strictEqual(inline.match(/<math/g)?.length, 2, inline);
+  assert.ok(/<li>用 <strong><math/.test(inline) && inline.includes("×") && !inline.includes('display="block"'), inline);
+  assert.ok(!md("花了 $5 和 $10，$5-$10").includes("<math"), "prices are not math");
+  assert.ok(!md("`$x$` 和\n```\n\\[y\\]\n```").includes("<math"), "code keeps its LaTeX");
+  assert.ok(!md("还没写完 \\[ x").includes("<math"), "an unclosed formula stays text while the answer streams");
+  for (const bad of XSS) assertInert(md(`$$${bad}$$ \\(\\text{${bad}}\\) ${bad}`), "renderMarkdown math");
+  assert.ok(!md("\\(\\href{javascript:alert(1)}{x}\\)").includes("href="), "\\href is not trusted");
+  assert.ok(md("前 $\\def\\a#1{\\a{#1#1}}\\a{x}$ 后").startsWith("<p>前 $"), "a formula that overflows Temml's stack stays text");
+  assert.ok(!md("```python\nx = '$a$'\ny = '\\(b\\)'\n").includes("<math"), "a fence still streaming keeps its LaTeX");
+  assert.ok(md("\\[ a\n\n```\ncode \\] here\n```").includes("<pre><code>code \\] here"), "display math stops at a blank line");
+  assert.ok(md("[x](https://a.com/$b$)").includes('<a href="#"'), "no formula inside an href");
+  assert.strictEqual(md("\u00030\u0003 plain"), "<p>0 plain</p>", "a placeholder character in the answer is dropped");
+}
 // 详情 › 笔记标签 shows the tags the note gets: none when the setting is cleared, plus the 分拣台 tags, from one function.
 assert.deepStrictEqual([...N.noteTags({ userTags: ["学 习"] }, { tags: "" })], ["学_习"]);
 assert.deepStrictEqual([...N.noteTags({}, { tags: "MoonDigest, a" })], ["MoonDigest", "a"]);

extension/sidepanel.css

@@ -831,6 +831,12 @@ body:has(#spInput:not(:placeholder-shown)) .sp-summary-btn {
   overflow-x: auto;
 }
 
+/* A wide matrix scrolls inside the bubble. */
+.sp-msg-assistant .md-math-block {
+  display: block;
+  overflow-x: auto;
+}
+
 .sp-msg-assistant pre code {
   padding: 0;
   background: transparent;

extension/sidepanel.html

@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>MoonDigest · AI 侧边栏</title>
     <link rel="stylesheet" href="./tokens.css" />
+    <link rel="stylesheet" href="./vendor/Temml-Local.css" />
     <link rel="stylesheet" href="./sidepanel.css" />
   </head>
   <body>
@@ -110,6 +111,7 @@
     <script src="./typing.js"></script>
     <script src="./sites.js"></script>
     <script src="./tag-core.js"></script>
+    <script src="./vendor/temml.min.js"></script>
     <script src="./note.js"></script>
     <script src="./download.js"></script>
     <script src="./note-actions.js"></script>