vuepress

vuepress copied to clipboard

Feature request

What problem does this feature solve?

Align syntax to include snippets

What does the proposed API look like?

Ideally a syntax which is similar to the syntax to include markdown files. Ideally the syntax works with a normal markdown parser, so it renders a link to the file which should be embedded.

For instance: [!include](fixtures/test.js)

Similar what is used for Azure Docs if you spot the [!INCLUDE cloud-shell-try-it.md] line

I know there is already an issue to support markers, but maybe this plugin for GitBook gives some insights and more options or implementation details: https://plugins.gitbook.com/plugin/include-codeblock

How should this be implemented in your opinion?

I don't know

Are you willing to work on this yourself?**

Yes

Probably related:

• https://github.com/vuejs/vuepress/issues/1191
• https://github.com/vuejs/vuepress/issues/750
• https://github.com/vuejs/vuepress/issues/1189
• https://github.com/vuejs/vuepress/issues/612

[!include](fixtures/test.js) is more likely a markdown-level syntax, IMO I prefer a SFC-styled syntax which is more suitable for VuePress, because the spirit of VuePress is Using Vue in Markdown, so a *.md file should be considered as a Vue Component instead of Snippet:

Suppose we want following abilities:

• SFC-styled syntax
• Combined with Markdown Slot
• Asynchronous Content

the syntax would be like this:

<ImportMarkdown src="third-party/foo.md" is="Foo" />   <!-- Markdown from node modules -->
<ImportMarkdown src="https://foo.md" is="Bar" />       <!-- Markdown from network -->

<Foo />                  <!-- Default Import -->
<Bar />                  <!-- Default Import -->
<Foo slot-key="name"/>   <!-- Combined with Markdown Slot -->

<SomeGlobalComponent>
    <Foo />
</SomeGlobalComponent>

Another syntax is using import * from as MDX, but I don't think that this is the goal of VuePress:

import Foo from 'third-party/foo.md'

<Foo />