Vuepress: markdown-it-footnote help

[davemacdo]

I'm trying to use the markdown-it-footnote plugin as described in the docs here:

https://vuepress.vuejs.org/guide/markdown.html#advanced-configuration

I have saved markdown-it-footnote to devDependencies and installed it, and have the following in my config.js module.exports

  markdown: {
    config: md => {
      md.use(require('markdown-it-footnote'))
    }

I'm using the default theme with no custom layouts. What am I missing?

Edit: Nevermind. I looked at it this morning, and everything seems to be fine. I think I must have been looking at the wrong file.

[ulivz]

Hi, thanks for your interest but please follow issue reporting guidelines, Github issues are for bug reports and feature requests only. You can ask questions on the forum, the Discord server, or StackOverflow. If it turns out to be a bug, come back and open an issue with a proper reproduction repo 🙂

[ejabu]

• [x] I confirm that this is an issue rather than a question.

Bug report

cannot use one of markdown plugin named markdown-it-footnote in Vuepress 1.0.2 (Latest)

Steps to reproduce

1. Install Package by editing package.json

"dependencies": {
    "vuepress": "^1.0.2",
  },
  "devDependencies": {
    "markdown-it-footnote": "^3.0.2",
  }

1. edit .vuepress/config.js

markdown: {
        lineNumbers: true,
        config: md => {
            md.use(require('markdown-it-footnote'))
        }
    },

1. put this lines inside one of .md files

Here is a footnote reference,[^1] and another.[^longnote]

[^1]: Here is the footnote.

[^longnote]: Here's one with multiple blocks.

Footnote 1 link [^first].

Footnote 2 link[^second].

What is expected?

Footnote token will replaced and in the lower part of page, there will be footnote references.

What is actually happening?

Footnote token still visible and was not rendered by markdown-it-footnote

Other relevant information

I changed vuepress version to 0.14.2 inspired by this repo and it worked like this

• Output of npx vuepress info in my VuePress project:

[berot3]

So for everyone who comes here from google, like me:

The next google-result seems to be the solution (https://forum.vuejs.org/t/trying-to-get-markdown-it-footnote-to-work/69527)

instead of:

markdown: {
config: md => {
    md.use(require("markdown-it-footnote"));
}
}

this works for me:

markdown: {
extendMarkdown: md => {
    md.use(require("markdown-it-footnote"));
}
}

And why? Simply because the first config is for vuepress version 0 (before alpha) and the below config is for the current alpha version beginning with version 1.

[kid1412621]

So for everyone who comes here from google, like me:

The next google-result seems to be the solution (https://forum.vuejs.org/t/trying-to-get-markdown-it-footnote-to-work/69527)

instead of:

markdown: {
config: md => {
  md.use(require("markdown-it-footnote"));
}
}

this works for me:

markdown: {
extendMarkdown: md => {
  md.use(require("markdown-it-footnote"));
}
}

And why? Simply because the first config is for vuepress version 0 (before alpha) and the below config is for the current alpha version beginning with version 1.

is this possible config via yaml?

or how about VuePress support this by default ? like markdown-it-emoji?

[tarvos21]

For new user of Vuepress:

1. yarn add markdown-it-footnote
2. add code below to .vuepress/config.js:

markdown: {
extendMarkdown: md => {
    md.use(require("markdown-it-footnote"));
  }
}