diff --git a/fern/products/docs/pages/component-library/custom-components/reusable-markdown.mdx b/fern/products/docs/pages/component-library/custom-components/reusable-markdown.mdx index 42ca5a9d0..12199a971 100644 --- a/fern/products/docs/pages/component-library/custom-components/reusable-markdown.mdx +++ b/fern/products/docs/pages/component-library/custom-components/reusable-markdown.mdx @@ -7,13 +7,12 @@ Keep your documentation DRY (Don't Repeat Yourself) by defining a reusable Markd Reusable snippets work well for constants (API limits, subscription prices, version numbers), repeated warnings or notes, and standardized formatting blocks. -## Create a reusable snippet + + -To use reusable snippets, start by creating a new folder in your `fern` project called `snippets`. Inside the `snippets` folder, create a new Markdown file for each snippet you want to define. - -For example: +Create a folder called `snippets` anywhere in your `fern` project. Inside the `snippets` folder, create a new Markdown file for each snippet you want to define. -```bash {3, 6-8} +```bash Example file structure {3, 6-8} fern └─ pages └─ my-tutorial.mdx @@ -23,16 +22,17 @@ fern ├─ peace-lily.mdx └─ trees.mdx ``` - -In each snippet file, define the content you want to reuse. For example, `peace-lily.mdx` might contain: + + +In each snippet file, define the content you want to reuse. ```mdx title="snippets/peace-lily.mdx" Remember to water your plant at least twice a week. ``` + + -## Use a reusable snippet - -To use a snippet in your documentation, reference it by its file path (including the `.mdx` extension) in your content. For example, to include the `peace-lily` snippet in your content, use: +To use a snippet in your documentation, reference it by its file path (including the `.mdx` extension). For example, to include the `peace-lily` snippet from the folder structure above: @@ -50,4 +50,16 @@ To use a snippet in your documentation, reference it by its file path (including - \ No newline at end of file + + + + The `src` path is an absolute path that takes the `fern` folder as the root. The path is the same no matter which page you're referencing it from: + + | Folder structure | Reference | + | --- | --- | + | `fern/snippets/peace-lily.mdx` | `src="/snippets/peace-lily.mdx"` | + | `fern/docs/snippets/peace-lily.mdx` | `src="/docs/snippets/peace-lily.mdx"` | + | `fern/docs/guides/snippets/peace-lily.mdx` | `src="/docs/guides/snippets/peace-lily.mdx"` | + + + \ No newline at end of file