[Feature Request] Dynamic Link Rendering

[zojize]

Clear and concise description of the problem

I'm migrating a Jeykll project to a Vue-SSG project and a common pattern I encounter in the markdown in the Jeykll project is templated links. For example:

[Foo bar]({{ site.foo }}/bar)

Which gets replaced by the foo variable defined in a config file during build/dev time by Jekyll. However, this plugin does no transformation to links like this, and markdown-it outputs them raw. It would be nice if this could be supported by this plugin directly allowing dynamically rendered links/images.

Suggested solution

[Foo bar]({{ foo }}/bar)

should be transformed to

<a :href="`${foo}/bar`">Foo bar</a>

Optional title:

[Foo bar]({{ foo }}/bar "the {{ title }}")

should be transformed to

<a :href="`${foo}/bar`" :title="`the ${title}`">Foo bar</a>

Alternative

Currently I accomplish this by using the before transformation to raw markdown to replace items at build/dev time, this solution does not work for dynamic variables but good enough for my usage:

Markdown({
  transforms: {
    before: (code) => {
      const data = {
         frontmatter: matter(code).data,
         // others
      }
      return code.replaceAll(
        new RegExp(`\{\{ *(${Object.keys(data).join('|')})( *\. *([$_\p{ID_Start}][$\p{ID_Continue}]*))+ *\}\}`, 'gu'),
        (match, key) => {
          const keys = match.slice(2, -2).split('.').slice(1).map(key => key.trim())
          let value = data[key]
          for (const key of keys) {
            if (key in value)
              value = value[key]
            else
              return match
          }
          return value === data ? match : `${value}`
        },
      )
    },
  },
})

Additional context

I'd love to help implement this feature! let me know what you think of this idea.

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.