Add LaTeX math rendering support

[OrF8]

Summary

This PR adds LaTeX math rendering support to Markdown Live Preview to resolve the math rendering gap reported in issue #108. It integrates KaTeX into the Markdown preview pipeline so mathematical expressions render correctly while preserving existing Markdown behavior and safety checks.

Changes

• Added KaTeX-based rendering for LaTeX math in the Markdown preview.
• Added support for inline math using single dollar delimiters (e.g. $E = mc^2$).
• Added support for display math using double dollar delimiters (e.g. $$ ... $$ blocks).
• Kept DOMPurify sanitization in place to preserve existing security behavior.
• Ensured invalid LaTeX input does not crash the preview (rendering failures are handled gracefully).
• Updated relevant preview behavior/content and styling where needed so math rendering integrates cleanly with existing Markdown output.

Testing

• npm run build
• Manual inline math rendering test
• Manual display math rendering test
• Regular Markdown rendering
• Dark mode
• Sync scroll
• PDF export

Notes

PDF export renders math, but very tall symbols such as \int can be slightly clipped at the bottom.

Related issue

Closes #108.

[Copilot]

Pull request overview

This PR adds LaTeX math rendering to the Markdown Live Preview by integrating KaTeX into the existing marked → DOMPurify → preview rendering pipeline, and extends PDF export so rendered math is styled correctly.

Changes:

• Load and register marked-katex-extension at runtime to render $...$ (inline) and $$...$$ (display) math.
• Include KaTeX CSS in the live preview and inline KaTeX CSS (with rewritten font URLs) into the PDF export clone.
• Add styling for display-math blocks to improve horizontal overflow behavior.

Reviewed changes

Copilot reviewed 3 out of 7 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
src/main.js	Adds KaTeX/marked-katex-extension integration, adjusts DOMPurify call, and includes KaTeX CSS in PDF export.
public/css/style.css	Adds styling for KaTeX display math containers in the preview.
index.html	Adds KaTeX stylesheet link for live preview rendering.
dist/index.html	Updates built HTML to include KaTeX stylesheet and new bundle reference.
dist/css/style.css	Updates built CSS with KaTeX display styling.
dist/assets/index-DWLYmPWz.js	New built bundle containing the KaTeX integration changes.
dist/assets/index-BEfDAM6P.js	Removes the previous built bundle.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[OrF8]

Summary of bd6e7a0

I pushed follow-up changes addressing these points:

1. KaTeX CSS source of truth

I removed the duplicated hard-coded KaTeX CSS URL/version from the PDF export logic. The PDF export now derives the KaTeX stylesheet URL from the existing KaTeX <link> in index.html, so the live preview and exported PDF use the same KaTeX asset. This should avoid version drift between the regular preview and the PDF export path.

2. DOMPurify sanitization behavior

I reverted/adjusted the DOMPurify configuration so this change does not unintentionally narrow the sanitization behavior by switching to USE_PROFILES: { html: true }. The goal of this PR is only to add math rendering, not to change the project’s existing sanitization policy.

3. Display math overflow / clipping

I changed the display-math styling approach instead of relying on overflow-x: auto together with overflow-y: visible, since that combination does not behave as intended across axes. The updated styling uses spacing/padding/line-height adjustments to avoid clipping while still keeping display equations usable in the preview and PDF export.

I also re-tested the PDF export. The integral symbol itself is now fully visible. There is still a minor visual limitation where the limits of tall operators such as \int may be positioned slightly imperfectly in the exported PDF, but the expression is readable and no longer clipped.

[OrF8]

BTW, I am testing with:

Math test

Regular Markdown still works:

Heading

• item 1
• item 2

bold text and italic text

Inline math: $E = mc^2$.

Another inline example: $\alpha + \beta = \gamma$.

Display math:

$$ \int_0^1 x^2,dx = \frac{1}{3} $$

Escaped dollar sign: $5 should stay as a dollar amount.

Math inside blockquote: $\ell$

Inline code should not render math: $x^2$

Fenced code should not render math:

$x^2$
$$x^2$$

Invalid math should not crash the app: $\notarealcommand{123}$

Math inside a blockquote:

$\ell$

Normal Markdown Regression Test

Google

Blockquote

A	B
1	2