[Vitepress] Markdown Intellisense Randomly Breaks When Containing Latex

[Locietta]

Vue - Official extension or vue-tsc version

2.2.0

VSCode version

1.96.4

Vue version

3.5.13

TypeScript version

5.7.3

System Info

System:
    OS: Windows 11 10.0.26100
    CPU: (16) x64 AMD Ryzen 7 7435HS
    Memory: 7.24 GB / 23.74 GB
  Binaries:
    Node: 23.6.1 - D:\Scoop\apps\nodejs\current\node.EXE
    npm: 10.9.2 - D:\Scoop\apps\nodejs\current\npm.CMD
    pnpm: 10.0.0 - D:\Scoop\shims\pnpm.EXE
  Browsers:
    Edge: Chromium (130.0.2849.68)
    Internet Explorer: 11.0.26100.1882
  npmPackages:
    vitepress: 1.5.0 => 1.5.0

package.json dependencies

Steps to reproduce

1. create a vitepress project

npx vitepress init

2. Setting up intellisense for markdown files following https://vitepress.dev/guide/using-vue#vs-code-intellisense-support
3. index.md:

---
hello: world
---

<script setup>
import { ref } from 'vue'

const count = ref(0)
</script>

## Title

The count is: {{ count }}

<button :class="$style.button" @click="count++">Increment</button>

$$
<p_i\leq
$$

$xxx$.

$\ $

<style module>
.button {
  color: red;
  font-weight: bold;
}
</style>

What is expected?

Intellisense works properly with latex content presented in markdown files. While also provide vue component support in markdown.

What is actually happening?

Link to minimal reproduction

https://github.com/Locietta/repro-vitepress-latex-md-intellisense

Any additional comments?

Probably the extension should exclude latex blocks/inline equations similar to code fences. The issue is orinally submitted to vitepress repo: vuejs/vitepress#4528.

[KazariEX]

Not sure if support for inline syntax should be added, as it may lead to mismatch of other content.

[Locietta]

Maybe at least we can support GitHub style inline math syntax $`a+b`$, which should be less likely to interfere with syntax highlighting of other content.

[brc-dd]

$`a+b`$ should already work fine I guess because content inside backticks will be treated like inline code which are ignored and dollar doesn't carry any special meaning in Vue content 👀

Edit: Ah, that syntax isn't supported by vitepress. You can do something like this. We can support it in vitepress I guess.

import { defineConfig } from 'vitepress';

export default defineConfig({
  markdown: {
    math: true,
    config(md) {
      const orig = md.renderer.rules.math_inline;
      md.renderer.rules.math_inline = function (tokens, idx, ...args) {
        const token = tokens[idx];
        token.content = token.content.replace(/^`(.*)`$/, '$1');
        return orig(tokens, idx, ...args);
      };
    },
  },
});