Include Files
Mr.Hope ... 2022-6-4 Less than 1 minute
Let the Markdown file in your VuePress site support including other files.
# Config
module.exports = {
plugins: [
[
"md-enhance",
{
// Enable include files
include: true,
},
],
],
};
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
# Syntax
Use @include(filename) to include a file.
To partially import the file, you can specify the range of lines to be included:
@include(filename{start-end})@include(filename{start-})@include(filename{-end})
# Demo
@include(./demo.snippet.md):
# Heading 2
Contents containing bolded text and some Markdown Enhance features:
Tips
Hey how are you? 😄
@include(./demo.snippet.md{5-9}):
Tips
Hey how are you? 😄
# Advanced
You can also set an object to customize include filepath and include behavior.
interface IncludeOptions {
/**
* handle include filePath
*
* @default (path) => path
*/
getPath?: (path: string) => string;
/**
* Whether deep include files in included markdown files
*
* @default false
*/
deep?: boolean;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
E.g.: you can use @src as an alias for your source directory.
module.exports = {
plugins: [
[
"md-enhance",
{
// Add `@src` alias support
include: {
getPath: (file) => {
if (file.startsWith("@src"))
return file.replace("@src", path.resolve(__dirname, ".."));
return file;
},
},
},
],
],
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
Also, to place your Markdown files directly besides your actual files, but don’t want them rendered as pages, you can set patterns options in VuePress config. See patterns (opens new window) for more details.
module.exports = {
patterns: ["**/*.md", "!*.snippet.md", "!.vuepress", "!node_modules"],
plugins: [
[
"md-enhance",
{
include: true,
},
],
],
};
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12