1

I'm creating a blog using Next.js + MDX-Bundler and using rehype plugins to add additonal content to my .html file from .mdx. But I noticed that if I have a plain-text url, it doesn't get converted to an anchor tag. I also found a reference mentioning that rehype doesn't do that.

But is there a way to do it?

This is possible in most of the popular website which take markdown input. Even this question in stack-overflow is based on markdown. If I enter a URL like this(https://google.com/ or http://www.google.com/), it gets converted to a URL in the preview. How to get similar functionality when converting mdx file into blog posts.

Gangula
  • 5,193
  • 4
  • 30
  • 59

1 Answers1

1

I was not able to find resources that are specific to this particular issue. But I added remark-gfm to enable the use of tables in my markdown. And that solved this issue.

Below code is how you can add remark-gfm into mdx-bundler. And it is different based on the mdx loader you are using (like nextMDX, Next-mdx-remote, Next-mdx-enhanced etc...):

install remark-gfm with npm:

npm install remark-gfm

// utils/mdx.js
import remarkGfm from 'remark-gfm'

const POSTS_PATH = path.join(rootDir, "data/posts");

export const getSinglePost = async (slug) => {
    const filepath = path.join(POSTS_PATH, `${slug}.mdx`)

    const { code, frontmatter } = await bundleMDX({
        // source: sourceMDX,
        file: filepath,
        cwd: POSTS_PATH,
        xdmOptions(options) {
            options.remarkPlugins = [
                ...(options.remarkPlugins ?? []),
                remarkGfm,
            ];

            return options;
        },
    });

    return {
        frontmatter,
        code,
    };
};
Gangula
  • 5,193
  • 4
  • 30
  • 59