Where is the props of Pre component?

[jlenon7]

Hey guys. I'm having a problem with the pre component of MDX. I'm trying to create a CodeBlock component for pre that could display the code block and also the filename above it. The problem is that I can't found the filename prop or metastring anywhere, I tried to use the Playground and check how the code is being compiled and the filename prop is not there also.

This is the example I've created in Playground:

The mdx is being compiled to:

That's exactly what is happening in my project, I can't find the filename or even metastring anywhere. Am I missing something?

[ChristianMurphy]

Welcome @jlenon7! 👋

Understanding mdx's architecture will help clarify this: https://mdxjs.com/packages/mdx/#architecture
Your first screenshot shows markdown code meta properties, there is no equivalent in HTML (according to commonmark) so it is dropped when converting markdown (mdast) to HTML (hast).
If you'd like to preserve the information, you'll want to add a markdown (remark/mdast) plugin defining how you want the metadata to be preserved.

There are some existing plugins which may already have the behavior you want:

• https://github.com/remcohaszing/remark-mdx-code-meta#readme
• https://github.com/ipikuka/remark-flexible-code-titles#readme
• https://github.com/kevinzunigacuellar/remark-code-title#readme

Or if none of those meet your needs, you can create your own plugin.
You can find an introduction on how to write plugins at https://unifiedjs.com/learn/

[jlenon7]

Thank you so much @ChristianMurphy.

Do you know any "template project" that already configures most of the remark and rehype plugins focused on documentation project style? I'm looking for something like Nextra Docs or Docusarus, but without any style, I want only a documentation project scaffold where I can drop my own styles. I'm trying to create something like that, but I'm very new to frontend, so I'm having little troubles 😅

[ChristianMurphy]

You could directly use Docusarus or Nextra. 🙂
Both support themes, which allow you to drop you own styles in.

There are static site generators which can be used to create documentation as well, including:

• https://www.docz.site/
• https://nextjs.org/
• https://www.gatsbyjs.com/
• https://astro.js.org/
• https://remix.run/
• https://tina.io/
• and many more

There's also the option to roll your own static site generator, and that can be a great learning experience, but do know it can be rather time consuming compared with using an existing system which has solved many of the routing and server side rendering challenges already.

[jlenon7]

Thanks mate and excuse my ignorance, I'm sailing in unknown seas.

[jlenon7]

Do you know any project written using Nextra that uses a custom theme? Just to get a better example because the docs are incomplete.

[ChristianMurphy]

The nextra team may be better answer that question.
I'd try looking at https://github.com/jaredpalmer/nextra-blank-custom-theme
But there may be other or better examples out there.

[muditjuneja]

I had a similar issue where I was not able to get the properties in my code component.
I was able to create a simple rehype plugin that allows you to pass properties like the below -

```mdx path=google.com src=no-src
# Heading 1
```

Later on this is available in the code component as a metaData prop which can be extracted like below -

const components = {
  code: (props) => {
    console.log("props", props);
    const metaDataObject = props.metaData.split(' ').reduce((obj, item) => {
        const [key, value] = item.split('=');
        obj[key] = value;
        return obj;
      }, {});

    return <Code {...props} path={metaDataObject.path} src={metaDataObject.src} />;
  },
}

Using this in gatsby variant of Carbon design system here - https://github.com/carbon-design-system/gatsby-theme-carbon/pull/1289/files#diff-3c2d1eade54db26a66f65bf042875994c93c044734a9c62a19385e0d15435a35R132

Plugin - https://www.npmjs.com/package/rehype-mdx-fenced-code-meta-support

[wooorm]

This is an older issue, see also https://github.com/remcohaszing/rehype-mdx-code-props!

[muditjuneja]

Unfortunately, I was not able to get this work in our gatsby project. It broke both the dev loop and also the build for us.

[remcohaszing]

Please create a minimal reproduction and report an issue.