Description
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.