Skip to content

Render LaTeX math inside live preview tables - #524

Merged
jsgrrchg merged 3 commits into
mainfrom
feat/table-math-live-preview
Oct 9, 2026
Merged

jsgrrchg merged 3 commits into
mainfrom
feat/table-math-live-preview

Conversation

@jsgrrchg

@jsgrrchg jsgrrchg commented Oct 9, 2026

Copy link
Copy Markdown
Owner

Markdown live preview now renders inline $…$ and display $$…$$ formulas inside table cells, closing the scope gap left by #496. Frontmatter and the rest of the note keep their current behavior.

How it works

Tables are rendered by a block widget that replaces their source, so the document-level math ranges still exclude Table nodes. Instead:

  • Shared scanner (b3160097): the delimiter loop in parseMathRanges is extracted into findMathRanges(text, excluded). Table cells use exactly the same rules as the rest of the note: escaped \$, $$$ runs, prices such as $20 and $30, and no whitespace after the opener. Document behavior is unchanged.
  • Cell rendering (6d02c9eb): each text segment of a cell is scanned with code spans excluded. Wikilinks and URLs are already split out and keep their dollars literal. Formulas render through the existing renderMath, so KaTeX options and error handling are shared. The widget only re-renders when the table source changes.

Behavior in cells

  • Pipes: as in GFM, an unescaped | always ends a cell, even inside a formula. \| reads as a literal | inside a formula; use \lvert/\rvert or \vert for bars and \Vert for a double bar.
  • Formatting: bold and highlights may wrap whole formulas (**$x$ text**, ==$x$==). Formatting that cuts through a formula or sits inside one stays literal, matching the rest of the editor.
  • Display math: $$x$$ in a cell uses display-style notation within the line.
  • Errors: invalid formulas stay readable, with the KaTeX message on hover.
  • Editing: the table widget ignores editor events, so clicking a formula does not reveal it alone. Moving the caret into the table shows its Markdown source, as before. The "Click to edit formula" tooltip is omitted inside tables.

Validation

  • 604 editor unit tests passed, including new scanner tests and table integration tests: delimiter rules, code spans, wikilinks, URLs, bold/highlight wrapping and cutting, escaped pipes, invalid formulas, and the raw source while the caret is inside the table.
  • All 12 math browser tests passed in Chromium with real KaTeX fonts. A new light/dark test checks that table formulas stay inside their cells, keep the text baseline, show no stray scrollbars, scroll horizontally when wide, and show errors.
  • tsc (app and vitest configs) and ESLint on changed files passed.
  • Visually checked in light and dark themes; no CSS changes were needed.
  • Documented table syntax in docs/markdown-math.md (f94e9ae6).

Out of scope

  • The alternative \(…\) / \[…\] delimiters.
  • Separately, aliased wikilinks inside tables ([[Note\|alias]]) appear to keep the backslash in their target. This PR does not change that.

Extract the delimiter scanner from parseMathRanges into findMathRanges so
content rendered outside the document flow, such as table cells, can reuse
the exact same rules.
Table cells now recognize formulas with the same delimiter rules as the rest
of the note. Code spans, wikilinks and URLs keep their dollars literal, bold
and highlights may wrap whole formulas but never cut through one, and `\|`
reads as a literal pipe inside a formula, as GFM requires for cells.
Check that table formulas stay inside their cells, keep the text baseline,
scroll when wide and show errors in both themes. Document pipes, formatting
and editing for formulas in tables.
@jsgrrchg
jsgrrchg merged commit 843a1cd into main Oct 9, 2026
9 checks passed
@jsgrrchg
jsgrrchg deleted the feat/table-math-live-preview branch October 9, 2026 21:18
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant