lang dynamic segment?}>
If you're using another name like `app/[locale]`, you also need to update `generateStaticParams()` in docs page:
```tsx
export function generateStaticParams() {
return source.generateParams(); // [!code --]
return source.generateParams('slug', 'locale'); // [!code ++] new param name
}
```
Good Heading
{items.map((item, i) => (
{i !== 0 && (
))}
);
}
```
You can use it by passing the page tree via `tree` in a server component.
### Breadcrumb Item
code
),
depth: 2,
url: '#hello-code',
},
];
```
# Fumadocs Core (core library of framework): MDX Plugins
URL: /docs/headless/mdx
Source: https://raw.githubusercontent.com/fuma-nama/fumadocs/refs/heads/main/apps/docs/content/docs/headless/mdx/index.mdx
Useful remark & rehype plugins for your docs.
# Fumadocs Core (core library of framework): Package Install
URL: /docs/headless/mdx/install
Source: https://raw.githubusercontent.com/fuma-nama/fumadocs/refs/heads/main/apps/docs/content/docs/headless/mdx/install.mdx
Generate code blocks for installing packages
## Usage
...
```
### Meta
It parses the `title` meta string, and add it to the `pre` element via attribute.
````mdx
```js title="Title"
console.log('Hello');
```
````
You may filter the meta string before processing it with the `filterMetaString` option.
### Inline Code
`console.log("hello world"){:js}` works.
See [https://shiki.style/packages/rehype#inline-code](https://shiki.style/packages/rehype#inline-code).
### Icon
Add an icon according to the language of codeblock.
It outputs HTML, you might need to render it with React `dangerouslySetInnerHTML`.
```jsx
...``` Disable or customise icons with the `icon` option. ### More Options see [Shiki](https://shiki.style). # Fumadocs Core (core library of framework): Remark Admonition URL: /docs/headless/mdx/remark-admonition Source: https://raw.githubusercontent.com/fuma-nama/fumadocs/refs/heads/main/apps/docs/content/docs/headless/mdx/remark-admonition.mdx Use Admonition in Fumadocs In Docusaurus, there's an [Admonition syntax](https://docusaurus.io/docs/markdown-features/admonitions). For people migrating from Docusaurus, you can enable this remark plugin to support the Admonition syntax. ## Usage ```ts title="source.config.ts" tab="Fumadocs MDX" import { remarkAdmonition } from 'fumadocs-core/mdx-plugins'; import { defineConfig } from 'fumadocs-mdx/config'; export default defineConfig({ mdxOptions: { remarkPlugins: [remarkAdmonition], }, }); ``` ```ts tab="MDX Compiler" import { compile } from '@mdx-js/mdx'; import { remarkAdmonition } from 'fumadocs-core/mdx-plugins'; await compile('...', { remarkPlugins: [remarkAdmonition], }); ``` ### Input ```md :::warning Hello World ::: ``` ### Output ```mdx
```
Where `./public/hello.png` points to the image in public directory.
### Example: Without Imports
You can disable Next.js static imports on local images.
```ts
import { remarkImage } from 'fumadocs-core/mdx-plugins';
export default {
remarkPlugins: [[remarkImage, { useImport: false }]],
};
```
```mdx
```
Yields:
```mdx
```
### Example: Relative Paths
When `useImport` is enabled, you can reference local images using relative paths.
```mdx
```
Be careful that using it with `useImport` disabled **doesn't work**.
Next.js will not add the image to public assets unless you have imported it in code.
For images in public directory, you can just reference them without relative paths.
### Example: Public Directory
Customise the path of public directory
```ts
import { remarkImage } from 'fumadocs-core/mdx-plugins';
import path from 'node:path';
export default {
remarkPlugins: [
remarkImage,
{
publicDir: path.join(process.cwd(), 'dir'),
},
],
};
```
You can pass a URL too.
```ts
import { remarkImage } from 'fumadocs-core/mdx-plugins';
export default {
remarkPlugins: [
remarkImage,
{
publicDir: 'http://localhost:3000/images',
},
],
};
```
# Fumadocs Core (core library of framework): Remark TS to JS
URL: /docs/headless/mdx/remark-ts2js
Source: https://raw.githubusercontent.com/fuma-nama/fumadocs/refs/heads/main/apps/docs/content/docs/headless/mdx/remark-ts2js.mdx
A remark plugin to transform TypeScript codeblocks into two tabs of codeblock with its JavaScript variant.
## Usage
Install dependencies:
{children}
;
}
```
````
```tsx ts2js
import { ReactNode } from 'react';
export default function Layout({ children }: { children: ReactNode }) {
return {children}
;
}
```
# Fumadocs Core (core library of framework): Remark Structure
URL: /docs/headless/mdx/structure
Source: https://raw.githubusercontent.com/fuma-nama/fumadocs/refs/heads/main/apps/docs/content/docs/headless/mdx/structure.mdx
Extract information from your documents, useful for implementing document search
## Usage
Add it as a remark plugin.
```ts title="MDX Compiler"
import { compile } from '@mdx-js/mdx';
import { remarkStructure } from 'fumadocs-core/mdx-plugins';
const vfile = await compile('...', {
remarkPlugins: [remarkStructure],
});
```
> This plugin is included by default on Fumadocs MDX.
Extracted information could be found in `vfile.data.structuredData`, you may
write your own plugin to convert it into a MDX export.
### Options
How is this guide?
Thank you for your feedback!