feat: add skipFootnoteLike option to inline span

Adds a new option to mdc_inline_span that, when enabled, skips
footnote-like syntax [^...] to avoid conflicts with footnote plugins
(e.g. markdown-it-footnote).

By default, the option is false to preserve backward compatibility.

Usage:
  md.use(MarkdownItMdc, { syntax: { inlineSpan: { skipFootnoteLike: true } } })

Fixes compatibility with slidev and other tools using footnotes
alongside Comark/MDC syntax.

Author: kermanx

src/index.ts

@@ -2,7 +2,7 @@ import type MarkdownIt from 'markdown-it'
 import { MarkdownItMdcBlock } from './syntax/block'
 import { MarkdownItInlineComponent } from './syntax/inline-component'
 import { MarkdownItInlineProps } from './syntax/inline-props'
-import { MarkdownItInlineSpan } from './syntax/inline-span'
+import { MarkdownItInlineSpan, type MdcInlineSpanOptions } from './syntax/inline-span'
 
 export interface MarkdownItMdcOptions {
   /**
@@ -26,10 +26,12 @@ export interface MarkdownItMdcOptions {
     /**
      * Enable inline span syntax.
      *
+     * Pass `true` to enable with defaults, or pass an object to configure.
+     *
      * @see https://content.nuxtjs.org/guide/writing/mdc#inline-span
      * @default true
      */
-    inlineSpan?: boolean
+    inlineSpan?: boolean | MdcInlineSpanOptions
     /**
      * Enable inline component syntax.
      *
@@ -54,8 +56,12 @@ const MarkdownItMdc: MarkdownIt.PluginWithOptions<MarkdownItMdcOptions> = (md, o
   if (inlineProps)
     md.use(MarkdownItInlineProps)
 
-  if (inlineSpan)
-    md.use(MarkdownItInlineSpan)
+  if (inlineSpan) {
+    const spanOptions = typeof inlineSpan === 'object'
+      ? inlineSpan
+      : {}
+    md.use(MarkdownItInlineSpan, spanOptions)
+  }
 
   if (inlineComponent)
     md.use(MarkdownItInlineComponent)

src/syntax/inline-span.ts

@@ -1,17 +1,27 @@
 import type MarkdownIt from 'markdown-it'
 
 export interface MdcInlineSpanOptions {
-
+  /**
+   * Skip footnote-like syntax `[^...]` to avoid conflicts with footnote plugins.
+   *
+   * @default false
+   */
+  skipFootnoteLike?: boolean
 }
 
-export const MarkdownItInlineSpan: MarkdownIt.PluginWithOptions<MdcInlineSpanOptions> = (md) => {
+export const MarkdownItInlineSpan: MarkdownIt.PluginWithOptions<MdcInlineSpanOptions> = (md, options = {}) => {
+  const { skipFootnoteLike = false } = options
+
   md.inline.ruler.before('link', 'mdc_inline_span', (state, silent) => {
     const start = state.pos
     const char = state.src[start]
 
     if (char !== '[')
       return false
 
+    if (skipFootnoteLike && state.src[start + 1] === '^')
+      return false
+
     let index = start + 1
     let depth = 0
     while (index < state.src.length) {

test/inline-span.test.ts

@@ -0,0 +1,26 @@
+import MarkdownIt from 'markdown-it'
+import { describe, expect, it } from 'vitest'
+import { MarkdownItInlineSpan } from '../src/syntax/inline-span'
+
+describe('mdc inline span with skipFootnoteLike option', () => {
+  it('should treat [^note] as span by default', () => {
+    const md = new MarkdownIt({ html: true })
+    md.use(MarkdownItInlineSpan)
+    expect(md.renderInline('Test[^note]'))
+      .toBe('Test<span>^note</span>')
+  })
+
+  it('should skip [^note] when skipFootnoteLike is true', () => {
+    const md = new MarkdownIt({ html: true })
+    md.use(MarkdownItInlineSpan, { skipFootnoteLike: true })
+    expect(md.renderInline('Test[^note]'))
+      .toBe('Test[^note]')
+  })
+
+  it('should still render normal span when skipFootnoteLike is true', () => {
+    const md = new MarkdownIt({ html: true })
+    md.use(MarkdownItInlineSpan, { skipFootnoteLike: true })
+    expect(md.renderInline('[^note] and [Span]'))
+      .toBe('[^note] and <span>Span</span>')
+  })
+})

test/input/8.inline-span.md

@@ -5,3 +5,5 @@ Hello [World]{.bg-blue-500}!
 Hello [World\] Yes]!
 
 Hello [World]{style=""}!
+
+Test[^note]

test/output/8.inline-span.html

@@ -2,3 +2,4 @@
 <p>Hello <span class="bg-blue-500">World</span>!</p>
 <p>Hello <span>World] Yes</span>!</p>
 <p>Hello <span style="">World</span>!</p>
+<p>Test<span>^note</span></p>