is documentation regarding remark plugins still accurate?

[aaronjbecker]

I'm trying to add support for footnotes (or gfm) via a plugin, but following the directions on the mdsvex docs isn't working for me.

I've tried using versions 2 of remark-footnotes, as mentioned in a closed issue, but this isn't working for me. The remark-footnotes entry point looks for this.Parser and this.Compiler, finds neither, and fails.

Are remark plugins no longer supported? There seems to be a lot of talk about moving away from unified, building a custom parser, etc. in the issues and I'm having trouble figuring out where things stand as a newcomer to this project.

I'm new to this-- I was just trying to build a blog that incorporates some interactive data visualization Svelte components...

[buhodev]

Hey @aaronjbecker, did you find a solution? I encountered the same bug and haven't found a solution yet

[pngwn]

The documentation is accurate but due to the version of remark being used the latest plugins are not all supported.

[buhodev]

Thanks for the quick response, I installed remark-footnotes@2.0 as https://github.com/pngwn/MDsveX/issues/374#issuecomment-1007426242 says and it worked.

[zadamg]

I also tried installing 2.0... doesn't work:

import { vitePreprocess } from '@sveltejs/kit/vite'
import adapter from '@sveltejs/adapter-vercel';
import { mdsvex, escapeSvelte } from 'mdsvex'
import remarkUnwrapImages from 'remark-unwrap-images'
import remarkToc from 'remark-toc'
import rehypeSlug from 'rehype-slug'
import rehypeMermaid from 'rehype-mermaidjs'
import emoji from 'remark-emoji'
import remarkGfm from 'remark-gfm'
import shiki from 'shiki'

/** @type {import('mdsvex').MdsvexOptions} */
const mdsvexOptions = {
    extensions: ['.md'],
    layout: {
        _: './src/mdsvex.svelte'
    },
    highlight: {
        highlighter: async (code, lang = 'text') => {
            const highlighter = await shiki.getHighlighter({ theme: 'poimandres' })
            const html = escapeSvelte(highlighter.codeToHtml(code, { lang }))
            return `{@html \`${html}\` }`
        }
    },
    remarkPlugins: [remarkUnwrapImages, [remarkToc, { tight: true }], remarkGfm, emoji],
    rehypePlugins: [rehypeSlug, rehypeMermaid],
}

/** @type {import('@sveltejs/kit').Config} */
const config = {
    extensions: ['.svelte', '.md'],
    preprocess: [vitePreprocess(), mdsvex(mdsvexOptions)],
    kit: {
        adapter: adapter()
    }
}

export default config

Also, rehypeMermaid doesn't work either. I'll open a new ticket for that.

Is there another solve for footnotes other than remark-footnotes@2.0, which only seems to work for half the people with the issue?

Thanks!

[mahtaran]

We're also encountering this issue, luckily using footnotes 2 works for us, but it'd be great to just use remark-gfm ^^