How can I troubleshoot InvalidCharacterError?

[kaiyoma]

In both the dev server and a build, I'm seeing this when clicking on one of my pages:

Uncaught (in promise) InvalidCharacterError: Failed to execute 'setAttribute' on 'Element': '24' is not a valid attribute name.
    at patchAttr (runtime-dom.esm-bundler.js:620:10)
    at patchProp (runtime-dom.esm-bundler.js:793:5)
    at mountElement (runtime-core.esm-bundler.js:4873:11)
    at processElement (runtime-core.esm-bundler.js:4820:7)
    at patch (runtime-core.esm-bundler.js:4688:11)
    at mountChildren (runtime-core.esm-bundler.js:4932:7)
    at mountElement (runtime-core.esm-bundler.js:4855:7)
    at processElement (runtime-core.esm-bundler.js:4820:7)
    at patch (runtime-core.esm-bundler.js:4688:11)
    at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:5326:11)

"24" appears in my Markdown, but not as a tag, or anything resembling a tag. How can I debug this further?

[brc-dd]

open the page where that’s happening and keep removing things one by one until that error goes away.

most likely you’ve something like {24} in your code.

[kaiyoma]

Okay I found it (thanks for the debugging tip!). It was Markdown like this:

Ethernet1/2/4 => { name: 'Ethernet', slot: 1, rest: '2/4' }

[brc-dd]

yeah, you can escape { and } using backslash (\{) or the whole part using backticks (`). alternatively, you can also disable markdown-it-attrs if you aren't using it anywhere:

// .vitepress/config.ts
import { defineConfig } from 'vitepress';

export default defineConfig({
  markdown: {
    attrs: {
      disable: true,
    },
  },
});

you can also change its delimiters to something more uncommon:

import { defineConfig } from 'vitepress';

export default defineConfig({
  markdown: {
    attrs: {
      leftDelimiter: '%{',
      rightDelimiter: '}%',
    },
  },
});