diff --git a/docs/guide/markdown.md b/docs/guide/markdown.md index 8245dbb6..274eb61c 100644 --- a/docs/guide/markdown.md +++ b/docs/guide/markdown.md @@ -324,6 +324,63 @@ module.exports = { } +## Import Code Snippets + +You can import code snippets from existing files via following syntax: + +``` md +<<< ./filepath +``` + +It also supports [line highlighting](#line-highlighting-in-code-blocks): + +``` md +<<< ./filepath{highlightLines} +``` + +**Input** + +``` md +<<< ./snippets/snippet.js{2} +``` + +**Output** + + + +<<< ./snippets/snippet.js{2} + + + +::: tip +The value of `.` corresponds to `process.cwd()`. +::: + +You can also use a [VS Code region](https://code.visualstudio.com/docs/editor/codebasics#_folding) to only include the corresponding part of the code file. You can provide a custom region name after a `#` following the filepath (`snippet` by default): + +**Input** + +``` md +<<< ./snippets/snippet-with-region.js{1} +``` + +**Code file** + + + +<<< ./snippets/snippet-with-region.js + + + +**Output** + + + +<<< ./snippets/snippet-with-region.js#snippet{1} + + + + ## Advanced Configuration VitePress uses [markdown-it](https://github.com/markdown-it/markdown-it) as the Markdown renderer. A lot of the extensions above are implemented via custom plugins. You can further customize the `markdown-it` instance using the `markdown` option in `.vitepress/config.js`: diff --git a/docs/snippets/snippet-with-region.js b/docs/snippets/snippet-with-region.js new file mode 100644 index 00000000..9c7faaeb --- /dev/null +++ b/docs/snippets/snippet-with-region.js @@ -0,0 +1,7 @@ +// #region snippet +function foo() { + // .. +} +// #endregion snippet + +export default foo diff --git a/docs/snippets/snippet.js b/docs/snippets/snippet.js new file mode 100644 index 00000000..575039d1 --- /dev/null +++ b/docs/snippets/snippet.js @@ -0,0 +1,3 @@ +export default function () { + // .. +}