Markdown component

[ycmjason]

Hello,

I think it would be awesome if we could have a markdown vue component that could be used in the markdown pages.

This way we could module our very long markdown into smaller sections.

Thoughts?

E.g.

# My very long md

This is a freaking long md...

<vp-md src="./sectionA.md"/>

<vp-md src="./sectionB.md"/>

<vp-md src="./sectionC.md"/>

[yyx990803]

I don't think this has to be a component, can simply be a comment-based directive:

<!-- include ./sectionA.md -->

And then parsed and handled directly inside lib/webpack/markdownLoader.js.

[ycmjason]

I will look into that tonight if I got the time.

[ycmjason]

An attempt in here #227.

[MartinMuzatko]

There is already https://www.npmjs.com/package/markdown-it-include
But I see a few problems with this:

1. no vue templating within those included markdown files.
2. partials have to be excluded from getting rendered by vuepress

[ycmjason]

@MartinMuzatko my attempt at #227 should be able to load vue templating.

Yet, the partials are also being rendered. Maybe we could make it so that vuepress will ignore .partial.md files and not render them.

[eyleron]

How about the convention in other template languages or SCSS where filenames with a preceding underscore are treated as partials and don't get rendered?

_layout-header.md

[ycmjason]

@eyleron I am not so sure about this as @yyx990803 and @ulivz haven't got time to advice on this.

[davemacdo]

I know this is an old Issue, but it's something I would definitely use. I did want to point out that there are already several syntaxes for this in various markdown flavors. Personally, I'm used to using Mulitmarkdown's file transclusion syntax in a lot of my markdown already:

# Parent Markdown Stuff

{{path/to/included.md}}

See also:

• Brett Terpstra's multi-file document syntax, which has been adopted by other markdown processors
• iA Writer's Markdown Content Blocks

A lot of the content I'm including in VuePress sites exists as Markdown already, so the more it can mimic the behavior of other renderers, the better.

[ycmjason]

@davemacdo
Please see this: #227

There is a plan for rolling this out.

#421

In 1.0.0

[davemacdo]

Thanks. I missed that in my search. I'll take my comment there.

[rajaraodv]

This would be EXCELLENT! We have several "technical docs" people who want to reuse markdowns as "templates" and not learn Vue. I'm really hoping that this features is added! BTW, thanks a lot of creating Vuepress!

[ycmjason]

@rajaraodv
I have got an implementation already. But I will wait until Next version is available then I will make this a plugin.

[rajaraodv]

@ycmjason Awesome!! Is there any way to use it in the current version? Context: I'm showing off how cool vuepress is to folks and one question I'm getting is that the images are too small. I just a hacky solution for the time being.

[ulivz]

In 1.x, you can use Content component. it accepts 2 arguments: pageKey and slotKey.

<!-- Include content of another page -->
<Content :page-key="..."/>

<!-- markdown slot of the selected page  -->
<Content slot-key="..."/>

For more details, please head to: https://vuepress.vuejs.org/guide/using-vue.html#content

[bretterer]

@ulivz see #1173 it seems to be broken.

[coffeephile]

@ulivz I wanted to include a markdown file from another markdown file using <Content /> but I had trouble getting it to work.

I came up with a working solution by kind of exposing findPageForPath() to the markdown scope with the following mixin.

// enhanceApp.js

import { findPageForPath } from '@app/util'

export default ({
  Vue
}) => {
  Vue.mixin({
    methods: {
      getPageKey(pages, path) {
        const result = findPageForPath(pages, path)
        return result.key
      }
    }
  })
}

<!-- my-markdown-file.md -->

<Content :page-key="getPageKey($site.pages, '/path/to/my-other-markdown-file/')" />

This solution works, however I am wondering if there is a better way to achieve this.

Any recommendations appreciated. 🙇

[fsodano]

Is there a better way to achieve this nowadays? For now I'm forced to do:

<Content :page-key="$site.pages.find(p => p.path === '/my-page.html').key"/>

Cheers.

[iamchriswick]

Whats the status of this? Is it today possible to import say a.md and b.md into cd.md?

[deepansh96]

I got it working with markdown-it-include package.

This is how I extended markdown in my .vuepress/config.js

module.exports = {
    .
    .
    .
    extendsMarkdown: (md) => {
        // use more markdown-it plugins!
        md.use(require('markdown-it-include'))
    }
}

The key here is that I was using v2 of vuepress and there the API has changed from extendMarkdown to extendsMarkdown

After doing this, go to the parent .md file where you want to inlcude child .md files and include them like this

!!!include(./docs/your-directory/getting-started.md)!!!

[alexfornuto]

For those also brought here by Google looking for a solution to includes, @deepansh96's solution works, but don't forget to change extendsMarkdown to extendMarkdown.

[deepansh96]

I got it working with markdown-it-include package.

This is how I extended markdown in my .vuepress/config.js

module.exports = {
    .
    .
    .
    extendsMarkdown: (md) => {
        // use more markdown-it plugins!
        md.use(require('markdown-it-include'))
    }
}

The key here is that I was using v2 of vuepress and there the API has changed from extendMarkdown to extendsMarkdown

After doing this, go to the parent .md file where you want to inlcude child .md files and include them like this

!!!include(./docs/your-directory/getting-started.md)!!!

This is breaking on the current version of vuepress@next.
This was working in the version ^2.0.0-beta.19 but breaking in ^2.0.0-beta.59.

The error I'm getting this this:
Error: Dynamic require of "markdown-it-include" is not supported

[duhdugg]

This is breaking on the current version of vuepress@next. This was working in the version ^2.0.0-beta.19 but breaking in ^2.0.0-beta.59.

The error I'm getting this this: Error: Dynamic require of "markdown-it-include" is not supported

this is working for me in a "type": "module" package:

import markdownItInclude from "markdown-it-include";
// ...
export default defineUserConfig({
  // ...
  extendsMarkdown: (md) => {
    md.use(markdownItInclude);
  }
});