devjiwonchoi / remote-mdx

Use MDX in your React App
https://npmjs.com/remote-mdx
MIT License
13 stars 2 forks source link

"meta" on codebox #12

Open AugustinMauroy opened 1 month ago

AugustinMauroy commented 1 month ago

I would like to use remote-mdx for compiling MDX.

But I don't know how to access "meta" from a code box custom

Example

import { compileMDX } from 'remote-mdx/rsc'

cost sourceMDX = `
---
title: how to ...
---

# How to ...
'''js filename="index.js"
'''

`;

const foo = compileMDX({
source
})
talatkuyuk commented 1 month ago

It is not the job of remote-mdx. You should use a remark plugin for it, or should create a custom plugin.

For example, remark-flexible-code-titles plugin can handle filenames in code fences like below.

```js:index.js
console.log("xx");
```typescript
import remarkCodeTitles from "remark-flexible-code-titles";
// ...
const foo = compileMDX({
  source,
  options: {
     mdxOptions: {
       remarkPlugins: [remarkCodeTitles]
     }
  }
});
// ...

If you want to use the exact syntax (like '''js filename="index.js") that you gave in your example, then you have to create a custom remark plugin, getting inspired from remark-flexible-code-titles.