vuepress

vuepress copied to clipboard

Consider the following usecase: I have a Vue component, which I need to use very frequently in my markdown text. In my case, it links a term used in the text with a glossary entry. Because it is too verbose to write <Term term="my_term">, I added my own shortcut syntax :my_term:. Then I use regular expression to convert it into the Vue component.

This has to happen before the text gets parsed by markdown-it. I found a workaround by using markdown-it-regexp plugin:

// config.js
module.exports = {
  markdown: {
    extendMarkdown: md => {
      var Plugin = require('markdown-it-regexp')     
      const termLinker = Plugin(/:([\w+]*):/ , (match, utils) => {
        return `<Term term="${match[1]}"/>`
      })
      md.use(termLinker)
    }
  }
}

However, I think that such a feature could be offered by Vuepress out of the box. Something like this:

// config.js
module.exports = {
preRender: [
  linkTerms (pageContent) {
    // modify pageContent with regular expressions
    return modifiedContent
  },
  someOtherOperation (pageContent) {
    // `pageContent` is now the output of the previous function `linkTerms`
    // The output of the last function will be given to markdown-it to be rendered
    return modifiedContent
  }
]
}

What do you think about this approach?

@eeriksp I have been on a search for this :)

Do we have this feature implemented yet?

Is it extendsMarkdown or extendMarkdown? I couldn't seem to get it to work to replace some of the text in markdown.