Internal links between Markdown files

[jaredkrinke]

(Apologies if this is documented somewhere or has been asked before--I couldn't find anything other than eleventy-plugin-link_to for Nunjucks, which uses template syntax)

Is it possible to have relative links between Markdown files translate into links to their corresponding output URL?

I'm using relative links to Markdown files because that felt most natural and it works great with GitHub's built-in Markdown viewer (the one used on github.com, when viewing a repository).

For example, I might have this in posts/file1.md to link to posts/file2.md:

Look at [this other post](file2.md)

I'd like this to result in something like (the "../" is needed since Eleventy spits out a directory for each post):

Look at <a href="../file2">this other post</a>

Note: I'm sure there are lots of edge cases that could make this tricky (e.g. modifying the output location), but if there's nothing official, I'll probably resort to a kludgy regular expression.

Also note: I don't want to use permalinks because they don't work locally, and it's likely I'll move my web site at some point.

Thanks in advance for any suggestions!!

[minttoothpick]

You might have some luck with markdown-it-replace-link. Depends on how deep or varied your folder structure is. But using your example of two posts in the same folder, I think you could check for links ending in .md, and return them prepended with ../ and the file extension removed.

[jaredkrinke]

Thanks! markdown-it-replace-link is exactly what I was looking for.

I don't think this will be suitable for everyone, but here's what I'm using:

// Convert relative Markdown file links to relative post links
const customMarkdownIt = require("markdown-it")({
        html: true,
        replaceLink: link => link.replace(/^([^/][^:]*)\.md(#[^#]+)?$/, "../$1/$2"),
    })
    .use(require("markdown-it-replace-link"));

eleventyConfig.setLibrary("md", customMarkdownIt);

Edit: Updated code to support anchors as well.

[JacksonBailey]

Thanks so much for this, I had stumbled onto this plugin and figured out removing the .md extension but didn't think to do the rest.

It's insane to me that there's no way to support linking between Markdown files out of the box. That's such a common need.

[nhoizey]

That's such a common need.

@JacksonBailey this is also a need I had, but I'm not sure it's so common, and most important, anyone can structure its site as he wishes, so it would be difficult to have a generic feature working everywhere. Also, Markdown is only one of multiple ways to create content in Eleventy, so maybe it should be a feature of Markdown-it instead.

Anyway, like I said I also had the need, so I created a plugin for that, but it only supports Nunjucks: https://github.com/nhoizey/eleventy-plugin-link_to#readme