fix: escape Vue template delimiters in KaTeX rendered output

[Copilot]

Fix for {{ inside Math Causing Errors ✅

Issue: Consecutive {{ inside LaTeX math expressions were being interpreted by Vue as template interpolation delimiters, causing parsing errors.

Solution: Applied the existing escapeVueInCode utility function to both inline and block KaTeX rendering output. This function replaces {{ with {{ which prevents Vue from interpreting the braces as template interpolation delimiters while preserving the correct rendering of the math expressions.

Changes made:

• Import escapeVueInCode in markdown-it-katex.ts
• Apply escaping to inline KaTeX renderer output
• Apply escaping to block KaTeX renderer output
• Add test case for the issue with proper double braces
• Run security checks (CodeQL - no issues found)

Files Changed:

1. packages/slidev/node/syntax/markdown-it/markdown-it-katex.ts - Added escaping to KaTeX output
2. test/katex.test.ts - Added test case for double braces in math expressions (fixed to use actual {{ instead of escaped \{\{)

Testing:

• ✅ Test now correctly uses {{ in LaTeX expressions (e.g., ${{\\alpha}}^T$)
• ✅ Verifies that {{ is escaped to {{ in the output
• ✅ No security vulnerabilities found (CodeQL analysis)

Fixes #2240

Original prompt

---

This section details on the original issue you should resolve

<issue_title>{{ inside math causes unclear errors</issue_title>
<issue_description>Describe the bug

Consecutive {{ inside LaTeX math expressions cause several kinds of unclear error messages.

Workaround: Adding a space between consecutive braces helps, e.g. ${ {\alpha}^i}^T$ then LaTeX renders fine.

Minimal reproduction

Steps to reproduce the behavior:

1. https://sli.dev/new
2. Write ${{\alpha}}^T$ in slides.md and save. Note open {{ AND closing }}.

=> Shows error (may take a second or two until it pops up):

[plugin:vite:vue] Error parsing JavaScript expression: Expecting Unicode escape sequence \uXXXX. (1:2)

/home/projects/zzmivaxqxg.github/slides.md__slidev_1.md:3:200

1  |  <template>
2  |  <InjectedLayout v-bind="_frontmatterToProps($frontmatter,0)">
3  |  <p><span class="katex"><span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><msup><mi>α</mi><mi>T</mi></msup></mrow><annotation encoding="application/x-tex">{{\alpha}}^T</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.8413em;"></span><span class="mord"><span class="mord"><span class="mord"><span class="mord mathnormal" style="margin-right:0.0037em;">α</span></span></span><span class="msupsub"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.8413em;"><span style="top:-3.063em;margin-right:0.05em;"><span class="pstrut" style="height:2.7em;"></span><span class="sizing reset-size6 size3 mtight"><span class="mord mathnormal mtight" style="margin-right:0.13889em;">T</span></span></span></span></span></span></span></span></span></span></span></p>
   |                                                                                                                                                                                                          ^
4  |  
5  |  </InjectedLayout>

Click outside, press Esc key, or fix the code to dismiss.
You can also disable this overlay by setting server.hmr.overlay to false in vite.config.js.

(The important part is "Error parsing JavaScript expression". The detail about "\uXXXX" is specific to \alpha and may vary per math expression. A simple expression like ${{x}}$ can work with no error! But e.g. ${{x-}}$ fails because x- is invalid as JS.)

3. If instead you write ${{\alpha}^i}^T$, note {{ BUT no closing }}, it shows different error:

[plugin:vite:vue] Interpolation end sign was not found.

/home/projects/zzmivaxqxg.github/slides.md__slidev_1.md:3:221

1  |  <template>
2  |  <InjectedLayout v-bind="_frontmatterToProps($frontmatter,0)">
3  |  <p><span class="katex"><span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><msup><msup><mi>α</mi><mi>i</mi></msup><mi>T</mi></msup></mrow><annotation encoding="application/x-tex">{{\alpha}^i}^T</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:1.0559em;"></span><span class="mord"><span class="mord"><span class="mord"><span class="mord"><span class="mord mathnormal" style="margin-right:0.0037em;">α</span></span><span class="msupsub"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.8247em;"><span style="top:-3.063em;margin-right:0.05em;"><span class="pstrut" style="height:2.7em;"></span><span class="sizing reset-size6 size3 mtight"><span class="mord mathnormal mtight">i</span></span></span></span></span></span></span></span></span><span class="msupsub"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:1.0559em;"><span style="top:-3.2776em;margin-right:0.05em;"><span class="pstrut" style="height:2.7em;"></span><span class="sizing reset-size6 size3 mtight"><span class="mord mathnormal mtight" style="margin-right:0.13889em;">T</span></span></span></span></span></span></span></span></span></span></span></p>
   |                                                                                                                                                                                                                               ^
4  |  
5  |  </InjectedLayout>

(Looks like the KaTeX render succeeds, it seems it's only the <annotation encoding="application/x-tex">{{\alpha}^i}^T</annotation> tag that triggers issue?
Guess: is it intercepted by some Vue template syntax?)

Environment

• Slidev version: 52.1.0

• Browser: Firefox 141

• OS: Linux

• reproduced in a local project (i.e. npm create slidev@latest).
  </issue_description>

<agent_instructions>In MarkdownItKatex, before returning rendered text, you should escape {{ using the existing escapeVueInCode. e.g. escapeVueInCode(katex.renderToString(...))</agent_instructions>

Comments on the Issue (you are @copilot in this section)

• Fixes {{ inside math causes unclear errors #2240

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

[netlify]

✅ Deploy Preview for slidev ready!

Name	Link
🔨 Latest commit	cd7997a
🔍 Latest deploy log	https://app.netlify.com/projects/slidev/deploys/6917001d2fd4ac0008d749f2
😎 Deploy Preview	https://deploy-preview-2347--slidev.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[pkg-pr-new]

Open in StackBlitz

@slidev/client

npm i https://pkg.pr.new/slidevjs/slidev/@slidev/client@2347

create-slidev

npm i https://pkg.pr.new/slidevjs/slidev/create-slidev@2347

create-slidev-theme

npm i https://pkg.pr.new/slidevjs/slidev/create-slidev-theme@2347

@slidev/parser

npm i https://pkg.pr.new/slidevjs/slidev/@slidev/parser@2347

@slidev/cli

npm i https://pkg.pr.new/slidevjs/slidev/@slidev/cli@2347

@slidev/types

npm i https://pkg.pr.new/slidevjs/slidev/@slidev/types@2347

commit: cd7997a

[kermanx]

@copilot fix!

[Copilot]

@copilot fix!

Fixed the test to use actual double braces {{ in LaTeX expressions instead of escaped braces \{\{. The test now properly validates that expressions like ${{\\alpha}}^T$ have their braces escaped in the output. (4a848c0)